QML Update TableView ItemDelegate.



  • Hey!

    So I've got a table with a model. When the model is updated I need the ItemDelegate to be updated as well. What I want to happen is that the text that is similar to another text in another table is going to be green. So I just need to update the text color of every row in the table based on my programming. The logic is correct, but I cant seem to get the tableview to update. The data updates correctly, but the style (color) wont update.

    Help please?


  • Moderators

    Hi,

    Can you post a complete minimal working example which shows the problem ?



  • I dont know how I can do that? But do you understand my problem?



  • Not really. As long as you use bindings directly to the modelData, the delegates will be updated when the model data changes dynamically. To help you we would at the very least have to see the basic code for your delegates.


  • Moderators

    This is what i understood:
    You have an ItemDelegate which probably has a Rectangle which contains a Text Element and this item delegate is set for both the TableViews and when you update the Model in one of the TableView you search for the same text in the other TableView, if matched you want to change the color of the row which is a Rectangle.

    Edit: The problem is we don't know how you have coded and would just keep on guessing. Hence the need for an example.
    Try to create a simple example according to your existing code that replicates the problem.



  • So this is my master table. I want the itemDelegate to update when my worktable updates. The work table is similiar to the masterTable

    @
    TableView{
    id: masterTable;
    height: parent.height;
    width: parent.width;
    TableViewColumn{role: "Master file"; title: "Text"; width:masterWindow.width;}
    model: masterResource.englishList;
    itemDelegate: masterTableItemDelegate;

                            flickableItem.onContentYChanged: {
                                workTable.flickableItem.contentY = flickableItem.contentY;
                                keyTable.flickableItem.contentY = flickableItem.contentY;
                            }
                            flickableItem.onContentXChanged: {
                                workTable.flickableItem.contentX = flickableItem.contentX;
                                keyTable.flickableItem.contentX = flickableItem.contentX;
                            }
    
                            onFocusChanged: {
                                if(focus && madeList){
                                    workTableFocus = false;
                                    masterTableFocus = true;
                                    keyTableFocus = false;
                                    setCurrentRow();
                                    workTable.selection.select(currentRow);
                                    keyTable.selection.select(currentRow);
                                }
    
                            }
    
                            onClicked: {
                                if(madeList){
                                    selectable = true;
                                    workTableFocus = false;
                                    masterTableFocus = true;
                                    keyTableFocus = false;
                                    setCurrentRow();
                                    workTable.selection.select(currentRow);
                                    keyTable.selection.select(currentRow);
                                }
                            }
    

    // onDataChanged: {
    // masterTable.itemDelegate = masterTableItemDelegate;
    // workTable.itemDelegate = workTableItemDelegate;
    // keyTable.itemDelegate = keyTableItemDelegate;
    // }

                            onCurrentRowChanged:{
                                app.rowChanged();
                                englishTxt.text = masterResource.masterText(currentRow);
                                workTable.selection.clear();
                                keyTable.selection.clear();
                                setCurrentRow();
    
                                if(selectable){
                                    workTable.selection.select(currentRow);
                                    keyTable.selection.select(currentRow);
                                }
    
                               if(masterResource.getComment(currentRow)){
                                   englishTxt.textColor = "grey";
                                   langInput.readOnly = true;
    
    
                               }
                               else{
                                   englishTxt.textColor = "black";
                                   langInput.readOnly = false;
                               }
                           }
                        }
                    }
                }
    

    @

    @
    Component {
    id: masterTableItemDelegate
    Text {
    color: if(masterResource.getGreenText(styleData.row)){
    color: "green";
    }
    else if(masterResource.getYellowText(styleData.row)){
    color: "yellow";

                   }
    
                   else{
                       color: "black";
                   }
    
            elide:styleData.elideMode
            text:styleData.value
            font.bold: styleData.selected
        }
    }
    

    @


  • Moderators

    Are you sure the conditions for color in the Text element gets satisfied properly as per the need ?

    Depending up on your example i created a small example which first loads some data and on click of a rectangle clears the initial data and loads new one and as per condition the color gets changed properly.
    Just click on the Red rectangle on the bottom right to load new data,

    @
    import QtQuick 2.0
    import QtQuick.Controls 1.2

    Rectangle {
    id: masterWindow
    width: 300
    height: 300

    ListModel {
        id: masterResource
        ListElement{ title: "Book1"}
        ListElement{ title: "Book2"}
        ListElement{ title: "Book3"}
    }
    
    TableView{
        id: masterTable;
        height: parent.height;
        width: parent.width;
    
        TableViewColumn{role: "title"; title: "Text"; width:masterWindow.width;}
        model: masterResource;
        itemDelegate: masterTableItemDelegate;
    }
    
    Component {
        id: masterTableItemDelegate
        Text {
            color: if(styleData.value==="Book6" || styleData.value==="Book1") color: "green"; else color: "red"
            elide:styleData.elideMode
            text:styleData.value
            font.bold: styleData.selected
        }
    }
    
    Rectangle {
        x: 250
        y: 250
        z:999
        width: 50
        height: 50
        color: "red"
        MouseArea {
            anchors.fill: parent
            onClicked: {
                masterResource.clear()
                masterResource.append({"title": "Book4"});
                masterResource.append({"title": "Book5"});
                masterResource.append({"title": "Book6"});
            }
        }
    }
    

    }
    @

    You can see in initial set of data Book1 is marked green and then Book6 is green.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.