How to create List view inside another list view
-
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.0Rectangle
{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)!