External Template for column

[Shea]

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?

[Dimiter Madjarov]

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

[Shea]

That worked, thanks.

[Curt Rabon]

@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.

[Curt Rabon]

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.

[Dimiter Madjarov]

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

[Chris]

HI

I have test the ClientTemplate() with kendo external template works perfect,
but Is there have any way to pass the custom arguments into kendo template script ?

EX.

<script id="columnTemplate" type="text/x-kendo-template">
    //template content

  #= myArg1 #
  #= myArg2 #

</script>
   

columns.Bound(p => p.Active).ClientTemplate("#=myTemplate(data, 'myValue1', 'myValue2')#");

*myArg1 = 'myValue1'.


Best regards

Chris

 

 

[Alex Hajigeorgieva]

Hello, Chris,

It is possible to pass other arguments in the ClientTemplate in this way, however, I am not sure I understand the reasoning behind it since the arguments will be identical for each row in that column. In other words, they could simply be included in the JavaScript function instead.

Nonetheless, the arguments are passed on:

columns.Bound(p => p.Active).ClientTemplate("#=myTemplate(data, 'myValue1', 'myValue2')#");

<script>
    function myTemplate(data) {
        console.log(arguments);
    }
</script>

If this is not the desired result, please provide some more details about the desired outcome, so we can look into possible approaches to accomplish it.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik