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

External Template for column

7 Answers 420 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Shea
Top achievements
Rank 1
Shea asked on 24 Sep 2013, 10:36 PM
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?

7 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 26 Sep 2013, 09:13 AM
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!
0
Shea
Top achievements
Rank 1
answered on 26 Sep 2013, 10:43 PM
That worked, thanks.
0
Curt Rabon
Top achievements
Rank 1
Veteran
answered on 14 May 2015, 01:28 AM

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

0
Curt Rabon
Top achievements
Rank 1
Veteran
answered on 14 May 2015, 02:01 AM
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.
0
Dimiter Madjarov
Telerik team
answered on 14 May 2015, 10:53 AM

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
0
Chris
Top achievements
Rank 1
Veteran
Iron
answered on 26 Feb 2019, 03:23 AM

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

 

 

0
Alex Hajigeorgieva
Telerik team
answered on 27 Feb 2019, 04:38 PM
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
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
Grid
Asked by
Shea
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Shea
Top achievements
Rank 1
Curt Rabon
Top achievements
Rank 1
Veteran
Chris
Top achievements
Rank 1
Veteran
Iron
Alex Hajigeorgieva
Telerik team
Share this question
or