listview data in the parent-child relation format

[Vadivel]

We have a scenario, where we have to show the listview data in the parent-child relation format. In the Parent row there should be a plus (+) symbol and on click of the plus symbol the child data should be opened. It’s basically group the data under the parent and show the child data on click of the plus symbol.

Kindly suggest us the approach or the code to accomplish our requirement.

Below sample code of my template for the listview without the parent-child relation and will have to modify the code to accommodate the new requirement.


<script type="text/x-kendo-tmpl" id="template">
        <div class="left-body-container">
            <table id="doc-list" class="doc-list" width="100%">
                <tbody>                   
                    # if (FolderName==null) { #
                    <tr id="tblRowFileItems" objectid="#:ObjectId#">
                        <td>
                            <listleft>
                                <img src="#:ImagePath#" />

                                <file-folder-names>
                                    <a data-role="button" href="GetDocumentContent?objId=#:ObjectId#" target="_blank" id="testa">#:DocumentName#</a>
                                </file-folder-names>
                                <br />

                                <span class="details">
                                    #:DocumentSize# <span class="paddingLR10">|</span> #:DocumentCreatedDate# :
                                    # if (!(DocumentCreatedby==null)) { # <a href=""> #:DocumentCreatedby# </a> # } #
                                </span>

                            </listleft>
                        </td>
                    </tr>
                    # } #
                </tbody>
            </table>
        </div>
    </script>

@(Html.Kendo().ListView<IndexModels>(Model)
                        .Name("listView")
                        .TagName("div")
                        .ClientTemplateId("template")
                        .DataSource(dataSource =>
                        {
                            dataSource.Read(read => read.Action("ReadDataonPaging", "Home").Data("additionalInfo").Type(HttpVerbs.Post));
                            dataSource.ServerOperation(true);
                            dataSource.PageSize(10);


                        })

                .Pageable(pager => pager

                                 .PreviousNext(true)
                         )
                )

[Alexander Valchev]

Hi Vadivel,

At present Web ListView widget does not support grouping or hierarchy. Do you think that using grouped grid or grid with detail templates would fit in your scenario?

Regards,
Alexander Valchev
Telerik