ListView inside a client template

7 posts, 1 answers
  1. Nikita
    Nikita avatar
    24 posts
    Member since:
    Apr 2013

    Posted 04 Mar Link to this post

    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()
     
    )
  2. Nikita
    Nikita avatar
    24 posts
    Member since:
    Apr 2013

    Posted 04 Mar in reply to Nikita Link to this post

    list item template:

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

  3. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    773 posts

    Posted 06 Mar Link to this post

    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.
  4. Nikita
    Nikita avatar
    24 posts
    Member since:
    Apr 2013

    Posted 06 Mar in reply to Alex Hajigeorgieva Link to this post

    Thank you Alex, although I ended up using a different solution, this was helpful.
  5. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    773 posts

    Posted 08 Mar Link to this post

    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.
  6. Nikita
    Nikita avatar
    24 posts
    Member since:
    Apr 2013

    Posted 11 Mar in reply to Alex Hajigeorgieva Link to this post

    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>

  7. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    773 posts

    Posted 12 Mar Link to this post

    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.
Back to Top