Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to create List view inside another list view
Forum Updated to NodeBB v4.3 + New Features

How to create List view inside another list view

Scheduled Pinned Locked Moved QML and Qt Quick
1 Posts 1 Posters 569 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • H Offline
    H Offline
    haris123
    wrote on last edited by
    #1

    For my project I need to create a parent list view and a child list view, and it seems work. But the problem is I can't update the model for each child list with different value, I know why this happening because I am using same model for every child list view, and when I update it, it gets update on every child list. How can I use different ListModel for different child as my both list views updated dynamically .

    Here is my QML

    @import QtQuick 2.0
    import QtQuick.Window 2.1 // needed for the Window component
    //import com.main_window 1.0
    import QtQuick 2.2
    import QtQuick.Controls 1.1
    import com.httprequest 1.0
    import QtQuick 2.2
    import QtQuick.Controls 1.2
    import QtQuick.Controls.Styles 1.1
    import com.login 1.0

    Rectangle
    {

         id: list_location_id
         width: 400
         height: parent.height
         y:45
         color:"transparent"
    
     Login{id: login} //login task class
     Component{
    
      id : camera_list_delegate
    
    
         Rectangle {
             id: camera_list_element_bg
             height: 30
             width: parent.width;
             radius : 5
             gradient: Gradient {
                  GradientStop { position: 0.0; color: "blue" }
                  GradientStop { position: 0.9; color: "black" }
                   }
    
             Text { text: camera
                color: "white"
                font.pointSize: 11;
                font.bold: Font.Bold;
                anchors.left:  parent.left;
                anchors.top: parent.top;
                anchors.topMargin: 3;
                anchors.leftMargin: 5;
    
              }
    
    
     }
    
    
    
     }
    
    
    
     Component{
    
      id : location_list_delegate
    
    
         Rectangle {
             id: single_list_element_bg
             height: 150
             width: parent.width;
            // radius : 10
            gradient: Gradient {
                  GradientStop { position: 0.0; color: "#99000000" }
                  GradientStop { position: 0.9; color: "#99000000" }
                   }
    
             Text {
                text: location
                color: "yellow"
                font.pointSize: 12;
                font.bold: Font.Bold;
                anchors.left:  parent.left;
                anchors.top: parent.top;
                anchors.topMargin: 3;
                anchors.leftMargin: 15;
    
              }
    
             ListView {
             id: child_list_view
             anchors.horizontalCenter: parent.horizontalCenter
    
    
             width: parent.width-150;
             height: parent.height;
             model: camera_list_model
    
             delegate: camera_list_delegate
             Component.onCompleted: load_camera_data(index);
         }
    
    
    
     }
    
    
    
     }
    
    
         ListView {
         id: paernet_list_view
         width: parent.width;
         height: parent.height;
         model: location_list_model
         delegate: location_list_delegate
         //focus : false;
    
         Component.onCompleted: load_location_data();
     }
    
    
    
    
    
    
    
     ListModel {
         id: location_list_model
    
     }
    
    
     ListModel {
                id: camera_list_model
                //ListElement { camera: "device" }
               }
    
    
     //This function will create list model for remote location
     function load_location_data()
     {
         location_list_model.clear();
         var loc = login.getLocationName();
         for(var i =0;i<loc.length;i++){
             location_list_model.append({location: loc[i]})
         }
     }
    
      //This function will create list model for remote camera
     function load_camera_data(index)
      {
             camera_list_model.clear();
             var cam = login.getCameras(index);
             for(var i =0;i<cam.length;i++){
                 camera_list_model.append({camera: cam[i]})
            }
    
       }
    

    }

    @

    And see the screen shot below, here each child list contains same value, I need it different using javascript.

    !http://i.imgur.com/5toGQrh.png(Screen Shot)!

    1 Reply Last reply
    0

    • Login

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved