N Level ListView Design Pattern

[Ezra]

I want to create some what of a product catalog using listviews. Basically the page will start with a listview of high level categories. When a person selects a category, I will perform a jsonp query and they will see a new listview with the subcategories of that category. I don't know ahead of time how deep the categories can be nested but it seems that there should be a simple design pattern so this can be done with a single page that can be reused over and over at each level and that each (different page/category query) could be cached to avoid making the same jsonp request.

Would appreciate if someone can point me in the right direction.

Thanks,
EE

[Nikolay Rusev]

Hello Ezra,

I am not quite sure that Kendo ListView is the widget that you need for this task. It seems that you don't need all that functionality which the ListView widget offers, but only the template rendering.

You can use Kendo templates in order to implement such functionality. For example:
/html/

<div id="container"></div>

<script id="tmpl1" type="x/template">
    <div>${text}</div>
</script>

<script id="tmpl2" type="x/template">
    <div>${field}</div>
</script>
​

/javascript/

var data1 = [{ text: "foo" }, { text: "bar" }];
var data2 = [{ field: "another foo" }, { field: "another bar"}];

var template1 = kendo.template($("#tmpl1").html());
var template2 = kendo.template($("#tmpl2").html());

$("#container").html(kendo.render(template1,data1))
    .delegate("div", "click", function(e) {
        var data = data2[$(e.target).index()];

        $("#container").html(kendo.render(template2,[data]));
    });​

Regards,
Nikolay Rusev
the Telerik team

[Ezra]

Thanks for your help

[Psmontte]

I want to do something similar to your example but with parent-child listviews. 

Here is the code for Parent ListView. Guide me on filter child ListView (setup as a separate "view")
$("#categoryListview").kendoMobileListView({
dataSource: kendo.data.DataSource.create({
data: parentData
}),
template: $("#customCatalogListViewTemplate").html(),
//click event
click: function (e) {
//Todo:
//Navigate to Child ListView manually, filter childData based on Parent Selection
//

}
})