ListView inside a client template

[Nikita]

I have a Grid with Ajax binding. One of the columns uses a client template with a ListView. Looks like that list view does not get initialized and bound, the grid cell where the ListView should be is rendered empty. The code for ListView is there it just does not get executed apparently. It does work with server-bound grid.

@(
    Html.Kendo().Grid<CollegeAnnouncement>().Name("ItemsList2")
        .Columns(col =>
        {
            col.Bound(i => i).ClientTemplate("<input type='checkbox' #if(Active){#checked='checked'#}# />").Title("Active?");
            col.Bound(i => i.Heading).Encoded(false);
            col.Bound(i => i.StartDate).Format("{0:MM/dd/yyyy}");
            col.Bound(i => i.EndDate).Format("{0:MM/dd/yyyy}");
            col.Bound(i => i).ClientTemplate(Html.Kendo().ListView<string>()
                .Name("ItemRoles#=CollegeAnnouncementID#")
                .TagName("div")
                .HtmlAttributes(new { @class = "itemRolesList" })
                .DataSource(ds => ds.Read(read => read.Action("ItemRolesGet", "CollegeAnnouncements")
                .Data("{itemID: #=CollegeAnnouncementID#}"))).ClientTemplateId("roleItemTemplate")
                .ToClientTemplate().ToHtmlString());
            col.Bound(i => i).ClientTemplate("<a href='" + Url.Action("ItemDelete", new { itemID = "#=CollegeAnnouncementID#" }) + "'>Delete</a>");
        })
    .DataSource(ds => ds.Ajax().Read(read => read.Action("CollegeAnnouncementsList", "CollegeAnnouncements")).Model(m => m.Id("CollegeAnnouncementID")))
    .Pageable()

)

[Nikita]

list item template:

<script id="roleItemTemplate" type="text/x-kendo-template">
    <span>#=data#</span>
</script>

[Alex Hajigeorgieva]

Hi, Nikita,

The script tags in the Kendo UI Grid column templates should be evaluated programmatically so that the Kendo UI ListView can be initialized. This should be done in a DataBound event handler as demonstrated in this documentation section:

https://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-to-use-kendo-ui-widgets-inside-grid-client-column-templates

- Add a class to the column, for example, "listview"

col.Bound(i => i).HtmlAttributes(new { @class = "listview" }).ClientTemplate(Html.Kendo().ListView<string>()
     .Name("ItemRoles#=CollegeAnnouncementID#")
     .TagName("div")
     .HtmlAttributes(new { @class = "itemRolesList" })
     .DataSource(ds => ds.Read(read => read.Action("ItemRolesGet", "CollegeAnnouncements")
     .Data("{itemID: #=CollegeAnnouncementID#}"))).ClientTemplateId("roleItemTemplate")
     .ToClientTemplate().ToHtmlString());

- Add a DataBound() handler and initilize the widgets:

.Events(e=>e.DataBound("onDataBound"))
<script>
    function onDataBound(e) {
        var listViewElements = e.sender.tbody.find(".listview");
        $.each(listViewElements, function () {
            eval($(this).children("script").last().html());
        });
    }
</script>

Finally, it would a good idea to take a look at the Grid performance article, as rendering widgets in columns should be used carefully:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/performance#excessive-use-of-editors-or-widgets-in-cells

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Nikita]

Thank you Alex, although I ended up using a different solution, this was helpful.

[Alex Hajigeorgieva]

Hi, Nikita,

I am sure the community would like to see the other solution, too.

So if you have a moment and feel that it may be useful to others, please share it here.

Thank you very much in advance.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Nikita]

I simply updated the Grid data source to include collection bound to ListView in the original example and used a simple kendo template instead of ListView.

 

{

…

col.Bound(i => i).HtmlAttributes(new { @class = "itemRolesList" }).ClientTemplate("#=renderList(data)#").Title("Target Roles");

…

}

<script type='text/javascript>

     function renderList(item) {


        var template = kendo.template('<span>#=getDescription(data)#</span>');
        return kendo.render(template, item.Roles);
    }

</script>

[Alex Hajigeorgieva]

Hello, Nikita,

I think this is a better approach and one which would lead to better performance due to the lack of multiple widgets being initialized for every row.

Thank you for sharing.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik