This is a migrated thread and some comments may be shown as answers.

N Level ListView Design Pattern

3 Answers 48 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Ezra
Top achievements
Rank 1
Ezra asked on 26 Jun 2012, 12:41 AM
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

3 Answers, 1 is accepted

Sort by
0
Accepted
Nikolay Rusev
Telerik team
answered on 28 Jun 2012, 03:47 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ezra
Top achievements
Rank 1
answered on 30 Jun 2012, 02:42 AM
Thanks for your help
0
Psmontte
Top achievements
Rank 1
answered on 23 Jul 2012, 03:26 PM
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
//

}
})
Tags
ListView
Asked by
Ezra
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Ezra
Top achievements
Rank 1
Psmontte
Top achievements
Rank 1
Share this question
or