External Template for column

6 posts, 1 answers
  1. Shea
    Shea avatar
    58 posts
    Member since:
    Feb 2013

    Posted 24 Sep 2013 Link to this post

    Hello,

    I would like to use an external template for a column in my grid.

    @(
        Html.Kendo().Grid<ViewModels.UserSummary>()
            .Name("EmployeeGrid")
            .Columns( columns => {
                columns.Bound(c => c.FirstName);
                columns.Bound(c => c.LastName);
                columns.Bound(c => c.Email);
                columns.Bound(c => c.LastLogin).Format("{0:dd-MMM-yyyy}");
                columns.Bound(c => c.Active).Title("Active").ClientTemplate("myTemplate");
            })
            .DataSource(ds => ds.Ajax()
                .PageSize(24)
                .Read(r => r.Action("GetEmployees", "Employee"))
            )
            .Pageable()
            .Sortable()
    )

    <script id="myTemplate" type="text/x-kendo-template">
        <input type='checkbox' value='testing'
            #= Active ? 'checked' : '' #
            disabled
        ></input>
    </script>
    Of course this doesn't work, as it just prints 'myTemplate' on each row of that column. I know I can inline the template but I would like to keep things tidy by having the template external. Is this possible with the kendo mvc extensions?
  2. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 26 Sep 2013 Link to this post

    Hello Shea,


    To achieve this you should first initialize the template and then pass it as a client template to the column. Here is a sample approach.
    E.g.
    <script id="columnTemplate" type="text/x-kendo-template">
        //template content
    </script>
      
    <script>
        var myTemplate = kendo.template($('#columnTemplate').html());
    </script>

    columns.Bound(p => p.Active).ClientTemplate("#=myTemplate(data)#");

    Have a great day!
     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Shea
    Shea avatar
    58 posts
    Member since:
    Feb 2013

    Posted 26 Sep 2013 Link to this post

    That worked, thanks.
  5. Curt Rabon
    Curt Rabon avatar
    45 posts
    Member since:
    Dec 2008

    Posted 13 May 2015 in reply to Dimiter Madjarov Link to this post

    @Dimiter,

    I also needed this and your example works fine.  However, I defined the 2 <script>'s further down in the view, below the Kendo MVC Grid configuration, and yet it still worked.  I would think since the kendo.template() is run after the Kendo MVC grid setup that it would not work.  Does the Kendo MVC Grid get run after <script>'s, or is this a timing thing and I got lucky?

    Should the <script> that runs kendo.template() be executed before the Kendo MVC grid or does it matter?  Thanks.

  6. Curt Rabon
    Curt Rabon avatar
    45 posts
    Member since:
    Dec 2008

    Posted 13 May 2015 in reply to Curt Rabon Link to this post

    My grid happens to be .AutoBind(false), so maybe that's why it worked.  For now I put the template and the kendo.template() call ABOVE the MVC grid to be safe.
  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 14 May 2015 Link to this post

    Hello Curt,

    In this case the data is bound via ajax, so the client template will only be evaluated after the items are requested. This is why there should no be timing issues depending on the placement of the external script block.

    Regards,
    Dimiter Madjarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready