Column.ClientTemplate iterate over collection?

4 posts, 0 answers
  1. Matt
    Matt avatar
    5 posts
    Member since:
    Nov 2017

    Posted 15 Jan 2018 Link to this post

    I have found a couple solutions online if you want to use a detail view under a row in the grid control, but that is not exactly what I am looking for. I have a ASP.NET Core 2 solution and I want to be able to display "tags" that can be links in the column itself without having to do a detail drill-in. Nothing I have done to this point has worked. 

    The ArtcleViewModel has a List property of Tags. Is this impossible or am I missing something? Any help to create links per tag is appreciated without the use of a drill in detail view that the user would need to click to see.

    @(Html.Kendo().Grid<MBIntranet.Web.ViewModel.ArticleViewModel>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(c => c.Title).Title("Title");
                    columns.Bound(c => c.User.DisplayName).Title("Author");
                    columns.Bound(c => c)
                        .ClientTemplate("#= data.Tags[0].Name #")
                        .Title("Tags");
  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 18 Jan 2018 Link to this post

    Hi, Matt,

    To iterate over a collection in the Kendo UI Grid column client template, it would be most convenient to declare a JavaScript function, for example:

    columns.Bound(c => c)
     .ClientTemplate("#= tagsTemplate(data) #")
     
    <script>
    function tagsTemplate(item) {
      var template = "<ul>";
      for(var i=0; i< item.Tags.length; i++){    
         var tag = item.Tags[i];  
         template += kendo.format("<li>{0}</li>", tag.Name);
       }
       template += "</ul>";
       return template;
    }
    </script>

    Here is a runnable example showing this approach in action:

    https://dojo.telerik.com/@bubblemaster/UJaFET

    Let me know if you need further help.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Chris
    Chris avatar
    4 posts
    Member since:
    Jun 2018

    Posted 21 May 2020 in reply to Alex Hajigeorgieva Link to this post

    Is there a way to mark this post as helpful?
  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 26 May 2020 Link to this post

    Hello, Chris,

    I am glad to hear that you found my post helpful. Currently, only the poster can mark it as an answer but the idea to enable SO style of grading posts has been around for a long time and it would be fantastic when we get to its implementation.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top