Problem with role assignment inside delegate component

[Clever&Smart]

Hi all,

I am new to QML and I am currently working at a reusable QML component.
It is a ListView with a model class attached.
The model is derived from QStandardItemModel with custom roles defined.
Furthermore, the ListView uses a delegate component to render the data attached to the role.
As I have got several model sub classes I would like to reuse my ListView with different models which in the end all define different roles.
So far, everything works fine except re-use.

In order to reuse my ListView I think I have to assign roles more dynamically e.g. configure the role the delegate should use for rendering from outside of my ListView component.

Here is a short example of what I would like to achieve:

main.qml:

Rectangle
{
	MyListView
	{
		id: taskList
 
		model: taskModel //QStandardItemModel
		role: CustomDisplayText//<-role assignment does not work this way
	}
}

Rectangle
{
	MyListView
	{
		id: taskList
		
		model: taskModel //QStandardItemModel
		role: CustomDisplayText//<-role assignment does not work this way
	}
}

To copy to clipboard, switch view to plain text mode 

MyListView.qml:

MyListView
{
        id: myListView
        objectName: "myListView"
        property variant role
 
 
        delegate:   Rectangle
                    {
                        id: itemDelegate
                        objectName: "itemDelegate"
 
                        color: itemDelegate.focus? highlightColor : backgroundColor
 
                        Text
                        {
                            id: itemTextField
                            objectName: "itemTextField"
 
                            anchors.verticalCenter: itemDelegate.verticalCenter
 
                            text: role
                        }
 
                        MouseArea
                        {
                            id: itemDelegateMouseArea
                            objectName: "itemDelegateMouseArea"
                            anchors.fill: parent
                            onClicked:
                            {
                                itemDelegate.forceActiveFocus();
                                itemSelected(model.index)
                            }
                        }
                    }
}

MyListView
{
        id: myListView
        objectName: "myListView"
        property variant role


        delegate:   Rectangle
                    {
                        id: itemDelegate
                        objectName: "itemDelegate"
                        
                        color: itemDelegate.focus? highlightColor : backgroundColor

                        Text
                        {
                            id: itemTextField
                            objectName: "itemTextField"

                            anchors.verticalCenter: itemDelegate.verticalCenter

                            text: role
                        }

                        MouseArea
                        {
                            id: itemDelegateMouseArea
                            objectName: "itemDelegateMouseArea"
                            anchors.fill: parent
                            onClicked:
                            {
                                itemDelegate.forceActiveFocus();
                                itemSelected(model.index)
                            }
                        }
                    }
}

To copy to clipboard, switch view to plain text mode 

In fact, the role assignment does not work this way.

Can anyone help me solving my problem?

Thanks in advance!

[wysota]

Pass the role by string and have a method in your model to retrieve data by role name.

[Clever&Smart]

Dear wysota,

Thanks for your advice.

I have already tried to pass the role by string this way:

//main.qml
Rectangle
{
 
	MyListView
 
	{
 
		id: taskList
 
 
 
		model: taskModel //QStandardItemModel
 
		role: "CustomDisplayText"//<-does not work either
 
	}
 
}

//main.qml
Rectangle
{

	MyListView

	{

		id: taskList

 

		model: taskModel //QStandardItemModel

		role: "CustomDisplayText"//<-does not work either

	}

}

To copy to clipboard, switch view to plain text mode 

Furthermore, the models support the QStandardItemModel::data method with the role CustomDisplayText.

If I pass the role name by string the delegate in MyListView shows "CustomDisplayText" instead of the data assigned to the role CustomDisplayText.

Following works but MyListView is not reusable with my other models:

//MyListView.qml
MyListView
{
 
        id: myListView
 
        objectName: "myListView"
 
        property variant role
 
 
 
 
 
        delegate:   Rectangle
 
                    {
 
                        id: itemDelegate
 
                        objectName: "itemDelegate"
 
 
 
                        color: itemDelegate.focus? highlightColor : backgroundColor
 
 
 
                        Text
 
                        {
 
                            id: itemTextField
 
                            objectName: "itemTextField"
 
 
 
                            anchors.verticalCenter: itemDelegate.verticalCenter
 
 
 
                            text: CustomDisplayText//<-works but I cannot reuse MyListView with other role names
 
                        }
 
 
 
                        MouseArea
 
                        {
 
                            id: itemDelegateMouseArea
 
                            objectName: "itemDelegateMouseArea"
 
                            anchors.fill: parent
 
                            onClicked:
 
                            {
 
                                itemDelegate.forceActiveFocus();
 
                                itemSelected(model.index)
 
                            }
 
                        }
 
                    }
 
}

//MyListView.qml
MyListView
{

        id: myListView

        objectName: "myListView"

        property variant role

 

 

        delegate:   Rectangle

                    {

                        id: itemDelegate

                        objectName: "itemDelegate"

 

                        color: itemDelegate.focus? highlightColor : backgroundColor

 

                        Text

                        {

                            id: itemTextField

                            objectName: "itemTextField"

 

                            anchors.verticalCenter: itemDelegate.verticalCenter

 

                            text: CustomDisplayText//<-works but I cannot reuse MyListView with other role names

                        }

 

                        MouseArea

                        {

                            id: itemDelegateMouseArea

                            objectName: "itemDelegateMouseArea"

                            anchors.fill: parent

                            onClicked:

                            {

                                itemDelegate.forceActiveFocus();

                                itemSelected(model.index)

                            }

                        }

                    }

}

To copy to clipboard, switch view to plain text mode 

Am I doing something wrong?

[wysota]

Yes, you are not using a custom method that returns data using a role passed by string.

[Clever&Smart]

Ok, I see. I will give it a try.

The delegate has to use

text: model.customMethod(Role)

text: model.customMethod(Role)

To copy to clipboard, switch view to plain text mode 

to retrieve the data?

[wysota]

Yes. It has to also include the index of course.

[Clever&Smart]

Of course

Thanks!