Qml, update gridview inside listview item

Question

I have a listview in which, each item has gridview inside it:

ListView{
           id:list_roi
           anchors.fill: parent

           delegate: roi_item_view
           model: roi_item_model

           spacing: 5
           clip: true
           focus: true
           ScrollBar.vertical: ScrollBar {}

           onCurrentIndexChanged: {
                valueUpdater.selected_roi_changed(list_roi.currentIndex)
           }
           highlight: Rectangle {
               color: 'lightgray'
           }

       }

ListModel{
           id:roi_item_model
           ListElement {roi_rows: 2, roi_cols: 2, roi_subregion_model : [{_text:"555.3"},{_text:"555.3"},{_text:"555.3"}]}
       }

Component{
           id:roi_item_view
           MouseArea {
               anchors.fill: parent
               onClicked: list_roi.currentIndex = index
           }
           GridLayout{
               id:layout_wrapper
               anchors.fill: parent
               rows: 3
               columns: 5

               GridView {
                   id:grid_sub_region
                   Layout.row: 2
                   Layout.column: 0
                   Layout.columnSpan:5
                   Layout.alignment: Qt.AlignHCenter
                   width: roi_cols * 30; height: roi_rows * 30
                   cellWidth: 30; cellHeight: 30
                   visible : true

                   model: roi_subregion_model
                   delegate: contactsDelegate
                   focus: true

               }

               Component {
                   id: contactsDelegate
                   CellBox{
                       id: wrapper
                       width: 30
                       height: 30
                       Text {
                           anchors.verticalCenter: parent.verticalCenter
                           anchors.horizontalCenter: parent.horizontalCenter
                           id: contactInfo
                           text: _text
                       }
                   }
               }

           }
       }

as you can see, inside model i have 3 property (roi_rows, roi_cols, roi_subregion_model) which are supposed to change the view of Gridview's rows, columns and data inside each cell, when i change them.

but when i change these values, number of cells inside Gridview does not changes. when i initialize roi_rows and toi_cols to 2 i will have 2x2 gridview after listview item is created. but after initialization i cannot change it. it seems i have to do something to refresh the UI of specific item inside Listview so that the Gridview inside that item will be redrawn.

Update
based on comments: width and height of the GridView will be set based on roi_rows, roi_cols which are part of Listview Model. and because the CellWidth and CellHeight are constant then number of cells (rows and columns of the Gridview) will be changed.

Answer 1

OK i found the answer. in Model,View,Delegate structure when we create a Delegate and want to bind it with a key inside Model, in some cases like 'text' for 'Label' it will be automatically bound automatically. in this example:

ListModel{
       id:roi_item_model
       ListElement {label_text:"Hello" ,roi_rows: 2, roi_cols: 2, roi_subregion_model : [{_text:"555.3"},{_text:"555.3"},{_text:"555.3"}]}
   }


Component{
       id:roi_item_view
       MouseArea {
           anchors.fill: parent
           onClicked: list_roi.currentIndex = index
       }
       GridLayout{
           id:layout_wrapper
           anchors.fill: parent
           rows: 3
           columns: 5
           
           Label{ text:label_text }

           GridView {
               id:grid_sub_region
               Layout.row: 2
               Layout.column: 0
               Layout.columnSpan:5
               Layout.alignment: Qt.AlignHCenter
               width: roi_cols * 30; height: roi_rows * 30
               cellWidth: 30; cellHeight: 30
               visible : true

               model: roi_subregion_model
               delegate: contactsDelegate
               focus: true

           }

           Component {
               id: contactsDelegate
               CellBox{
                   id: wrapper
                   width: 30
                   height: 30
                   Text {
                       anchors.verticalCenter: parent.verticalCenter
                       anchors.horizontalCenter: parent.horizontalCenter
                       id: contactInfo
                       text: _text
                   }
               }
           }

       }
   }

label_text inside Model will be bound to text property of Label automatically which means if i change label_text the content of Label will be changed automatically. but for some property we should do this binding manually. in out example add this to delegate of ListView:

 Binding {
      target: grid_sub_region
      property: 'height'
      value: roi_rows * 30
 }

 Binding {
      target: grid_sub_region
      property: 'width'
      value: roi_cols * 30
 }