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

ListView inside a client template

6 Answers 835 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Nikita
Top achievements
Rank 2
Iron
Nikita asked on 04 Mar 2019, 05:11 PM
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()
 
)

6 Answers, 1 is accepted

Sort by
0
Nikita
Top achievements
Rank 2
Iron
answered on 04 Mar 2019, 05:13 PM

list item template:

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

0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 06 Mar 2019, 03:21 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Nikita
Top achievements
Rank 2
Iron
answered on 07 Mar 2019, 01:23 AM
Thank you Alex, although I ended up using a different solution, this was helpful.
0
Alex Hajigeorgieva
Telerik team
answered on 08 Mar 2019, 02:47 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Nikita
Top achievements
Rank 2
Iron
answered on 11 Mar 2019, 11:57 PM

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>

0
Alex Hajigeorgieva
Telerik team
answered on 12 Mar 2019, 12:56 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ListView
Asked by
Nikita
Top achievements
Rank 2
Iron
Answers by
Nikita
Top achievements
Rank 2
Iron
Alex Hajigeorgieva
Telerik team
Share this question
or