javascripthtmlkendo-asp.net-mvckendo-listviewkendo-panelbar

How to put a Kendo ListView into the content of a Kendo PanelBar?


I have to put a dynamically filled ListView into a dynamically created Panel. The listview is in a div with the id listView

I tried the following:

index.js:

panelbar.append({   
            text: "Group1",
            encoded: false,
            content: $("\#listView")          //puts [object Object]
            //OR
            content: '<object type="text/html" data="#listView" ></object>' //puts the whole html-page into panel, very interesting behaviour
 })

Is it possible to put a div into a panel or do I have to use partial views/ a long string where the listview is built and how.


I also tried to put the ListView as template of the PanelBar:

index.html:

<script id="panelbar-template" type="text/kendo-ui-template">
    <script>
        $("\#listView").kendoListView()
    </script>
</script>

<div id="panelBar" style="margin:0 auto; width: 90%">
     @(Html.Kendo().PanelBar()
        .Name("Panelbar")
        .TemplateId("panelbar-template")
        ..

Solution

  • For one panel, I put my ListView into a 'MyPartialView.cshtml' and wrote the following in my 'index.cshtml':

    @(Html.Kendo().PanelBar()
        .Name("panelbar")
        .ExpandMode(PanelBarExpandMode.Multiple)
        .Items(panelbar =>
        {
        panelbar.Add().Text("Group1")
             .Expanded(true)
             .Content(@<text> <div> abc @Html.Partial("MyPartialView")</div></text>); //THIS DID IT
        //;
        })
    )
    

    for dynamic contents, I worked with Partial Views