Binding ListView directly to a list of objects

[David]

I am trying to use the MVC extensions to bind directly to a list of objects.  The data is part of the model that is passed to the view.  I don't want the list view to make an extra call just to get data that is already available.  I am trying to use a combination of BindTo() and ClientTemplateId(), but the resulting list is always empty.

[Nikolay Rusev]

Hello David,

The following configuration will bind the ListView with the data set from server. This will not cause additional request initially.

<script type="text/x-kendo-tmpl" id="template">
    <div class="product">
        <img src="<%=Url.Content("~/content/web/foods/")%>${ProductID}.jpg" alt="${ProductName} image" />
        <h3>${ProductName}</h3>
        <dl>
            <dt>Price:</dt>
            <dd>${kendo.toString(UnitPrice, "c")}</dd>
        </dl>
    </div>
</script>

<%: Html.Kendo().ListView<Kendo.Mvc.Examples.Models.ProductViewModel>(Model)
    .Name("listView")
    .TagName("div")
    .BindTo( new [] { new Kendo.Mvc.Examples.Models.ProductViewModel { ProductID = 1, UnitPrice = 10 } })
    .ClientTemplateId("template")
    .DataSource(dataSource => {
        dataSource.Read(read => read.Action("Products_Read", "ListView"));
        dataSource.PageSize(12);
    })
    .Pageable()
%>

All the best,
Nikolay Rusev
the Telerik team

[mo2011ti]

Hi

this is not working.

i want to bind the list view to

IEnumerable<myClass>  myServerList
but this is not working.

i also dont understand if the ListView is bound to the server object myServerList
, why we need to add this:
dataSource.Read(read => read.Action("Products_Read", "ListView"));
i actually dont have any action/controller that support that
so i just put
dataSource.Read(read => read.Action("BBB", "AAA"));

this is not working, the Model.myServerList has 20 records, none of them is shown..

thanks for any help

moti

[Nikolay Rusev]

Hello Moti,

The ListView widget supports only ajax binding. This why you need to defined DataSource.Read method as any page attempt will result in calling the method.

You can however bind the ListView from data provided initially on server (in the initialization Html.Kendo().ListView(Model) or with BindTo(...)) as on the snippet from my previous post. That data will be serialized on client and bind the widget.

Regards,
Nikolay Rusev
the Telerik team

[Josh]

This does not work.

See the following code:

 @(Html.Kendo().ListView<Imagine.Models.NavigationItem>()
            .Name("lvForm_Navigation")
            .TagName("fieldset")
            .HtmlAttributes(new { @class = "side-nav-section" })
            .ClientTemplateId("ttNavigationItem")
            .BindTo(new Imagine.Models.NavigationItem[] { new Imagine.Models.NavigationItem { Title="test" }})        
        )

Binding the listview directly does not work either using BindTo or binding directly.

I am using v2013.1.319

[Josh]

I retract my previous post.  This does work, in my case my script reference to the kendo.aspnetmvc.js file was incorrect. Without this script the binding will silently fail.  (no errors)