How to update custom model data from C++ side or QML side ?

[Mohamad Ayrot]

i have simple to do list Application, using custom model made in C++ by inheriting QAbstractListModel.

i want to update each item Color or Text.
i tried editing items from the View delegate (QML side) using color dialog, when i choose color from color dialog i want the item to be changed.
i open color dialog using long press on the item.

here is QML code for ToDoList

what i need to do to update items color using color dialog ?

    property int item_index: 0

    ToDoModel{
        id: myModel
        getToDoList: todolist

    }

    Frame{
        Layout.fillWidth: true
        Layout.fillHeight: true

        ListView{
            id: toDoListView
            signal longPress(int index, string itemValue)
            clip: true
            implicitWidth: 250
            implicitHeight: 250
            anchors.fill: parent
            model: myModel
            spacing: 10
            delegate: Rectangle{
                id: myDelegate
                width: parent.width; height: 75
                border {width: 2; color: 'lightblue'}
                radius: 10
                color:  ITEM_COLOR
                CheckDelegate{
                    id: itemCheck
                    anchors.fill: parent
                    Text {
                        id: itemText
                        y: 29
                        text: model.ITEM_TEXT
                        anchors{left: parent.left; leftMargin: 23 }
                        font{
                            bold: model.ITEM_CHECKED ? true : false
                            strikeout: model.ITEM_CHECKED ? true : false
                        }
                    }
                    indicator: Rectangle{
                        implicitWidth: 26
                        implicitHeight: 26
                        anchors.right: parent.right
                        anchors.rightMargin: 25
                        x: itemCheck.leftPadding
                        y: parent.height / 2 - height / 2
                        radius: 3
                        border.color: model.ITEM_CHECKED ? "#FF0080" : "lightblue"

                        Rectangle {
                            width: 14
                            height: 14
                            x: 6
                            y: 6
                            radius: 2
                            color: itemCheck.down ? "#FF0080" : "#FF0080"
                            visible: model.ITEM_CHECKED
                        }
                    }
                    onCheckedChanged: {
                        model.ITEM_CHECKED = checked
                    }
                    onPressAndHold: {
                        item_index = index
                        chooseColorDialog.open()
                        print(index)
                        header.visible = true
                    }

                }
            }

        }
    }

    ColorDialog{
        // TODO: change Color of item
        id: chooseColorDialog
        onAccepted: {
      
            header.visible = false
        }
        onRejected: {
            header.visible = false
        }
    }

[J.Hilk]

@Mohamad-Ayrot said in How to update custom model data from C++ side or QML side ?:

what i need to do to update items color using color dialog

very simple, implement now the setData function of your model
https://doc.qt.io/qt-5/qabstractitemmodel.html#setData
https://doc.qt.io/qt-6/qabstractitemmodel.html#setData

and you're basically done :D

[Mohamad Ayrot]

Thank you for fast reply.
i implemented setData function in QML as follows
in ColorDialog
but didn't work , is there something wrong with the function ?

           ColorDialog{
                  // TODO: change Color of item
                  id: chooseColorDialog
                  onAccepted: {
                      myModel.setData(myModel.index(myIndex, 0), chooseColorDialog.color.toString(), ToDoModel.ColorRole)
                      header.visible = false
                  }

[J.Hilk]

@Mohamad-Ayrot some basic questions
do you emit dataChanged signal in your setData function ?
also a delegate should be able to call setData implicitly for its index via model.roleName = value

[Mohamad Ayrot]

this is setData function

bool ToDoModel::setData(const QModelIndex &index, const QVariant &value, int role)
{
//        if (data(index, role) != value) {
//            // FIXME: Implement me!
//            emit dataChanged(index, index, {role});
//            return true;
//        }
//        return false;
    if(!m_todolist)
        return false;
    Item item = m_todolist->getItems().at(index.row());
    switch(role){
    case ColorRole:
        item.itemColor() = value.toString();
        break;
    case TextRole:
        item.itemText() = value.toString();
        break;
    case CheckedRole:
        if(item.itemChecked() != value.toBool()){
            item.setChecked(value.toBool());
        }
        break;
    }
    if (m_todolist->setItemAt(index.row(), item)) {
        emit dataChanged(index, index, QVector<int>() << role);
        return true;
    }
    return false;

}

[oria66]

You should add dataChanged(...) before break sentence.

[JoeCFD]

define item color inside myModel and assign it to delegate. Simply update the color with index in myModel with signal longPress. That will do it.

[Mohamad Ayrot]

@JoeCFD can you write it as a code please ?