QML Nested List view with Highlight

[haris123]

Hi,

I need to create nested list view and as shown below, and highlight the main list and sub-list with different color
I have tried with ListView highlight but there are issue like the highlight showing for child as well as parent as shown
below image.

Here is the full code

       import QtQuick 2.2
      import QtQuick.Controls 1.1
      import QtQuick 2.2
      import QtQuick.Controls 1.2
      import QtQuick.Controls.Styles 1.1

      ApplicationWindow {

id: loginWindow
//visibility: "Maximized"
visible: true
width: 720
height: 720

Item {
width: 200
height: 720

ListView {
    id: list
    anchors.fill: parent
    model: nestedModel
    delegate: categoryDelegate
    highlight: Rectangle {color: "#FF00AAFF";//"#FF59ACFF";
                          radius: 2 }
}

ListModel {
    id: nestedModel
    ListElement {
        categoryName: "Veggies"
        collapsed: true

        // A ListElement can't contain child elements, but it can contain
        // a list of elements. A list of ListElements can be used as a model
        // just like any other model type.
        subItems: [
            ListElement { itemName: "Tomato" },
            ListElement { itemName: "Cucumber" },
            ListElement { itemName: "Onion" },
            ListElement { itemName: "Brains" }
        ]
    }

    ListElement {
        categoryName: "Fruits"
        collapsed: true
        subItems: [
            ListElement { itemName: "Orange" },
            ListElement { itemName: "Apple" },
            ListElement { itemName: "Pear" },
            ListElement { itemName: "Lemon" }
        ]
    }

    ListElement {
        categoryName: "Cars"
        collapsed: true
        subItems: [
            ListElement { itemName: "Nissan" },
            ListElement { itemName: "Toyota" },
            ListElement { itemName: "Chevy" },
            ListElement { itemName: "Audi" }
        ]
    }
}

Component {
    id: categoryDelegate
    Column {
        width: 200

        Rectangle {
            id: categoryItem
            border.color: "black"
            border.width: 5
            color: "#33FF5225"
            height: 50
            width: 200

            Text {
                anchors.verticalCenter: parent.verticalCenter
                x: 15
                font.pixelSize: 24
                text: categoryName
            }

            Rectangle {
                color: "red"
                width: 30
                height: 30
                anchors.right: parent.right
                anchors.rightMargin: 15
                anchors.verticalCenter: parent.verticalCenter

                MouseArea {
                    anchors.fill: parent

                    // Toggle the 'collapsed' property
                    onClicked:{
                         list.currentIndex= index
                         nestedModel.setProperty(index, "collapsed", !collapsed)
                        }
                    }
            }
        }

        Loader {
            id: subItemLoader

            // This is a workaround for a bug/feature in the Loader element. If sourceComponent is set to null
            // the Loader element retains the same height it had when sourceComponent was set. Setting visible
            // to false makes the parent Column treat it as if it's height was 0.
            visible: !collapsed
            property variant subItemModel : subItems
            sourceComponent: collapsed ? null : subItemColumnDelegate
            onStatusChanged: if (status == Loader.Ready) item.model = subItemModel
        }
    }

}

Component {
    id: subItemColumnDelegate
    Column {
        property alias model : subItemRepeater.model
        width: 200
        Repeater {
            id: subItemRepeater
            delegate: Rectangle {
                x:10
                color: "#33FF5225"
                height: 40
                width: 190
                border.color: "black"
                border.width: 2

                Text {
                    anchors.verticalCenter: parent.verticalCenter
                    x: 30
                    font.pixelSize: 18
                    text: itemName
                }
            }
        }
    }
}
 }
 }

Image Link: http://imgur.com/qEEm4Fs

How can I overcome this issue. Basically I need to highlight Parent and child Item with different color.
Any help will be appreciated.