CODEWITHSUNDEEP
asp.net-mvctemplateskendo-uikendo-grid
Mahmood Dehghan
Mahmood Dehghan

Reputation: 8265

using kendo.template (external template) in KendoUI MVC Grid ClientTemplate (column)

I want to use an external template in a column's ClientTemplate like this:

@(Html.Kendo().Grid<Project>().Name("Projects")
    .Columns(cols =>
    {
        cols.Bound(m => m.LetterNumber);
        cols.Bound(m => m.CityName);
        cols.Bound(m => m.OrganName);
        cols.Bound(m => m.DateString);
        cols.Bound(m => m.EngineersCount);
        cols.Bound(m => m.ExpertTypeString);
        cols.Bound(m => m.ProjectId)
            .Title("")
            .ClientTemplate("#buttonsTemplate(data)#");
    })
    .DataSource(ds => ds.Ajax().Read("GetList", "Projects"))
)

<script type="kendo/x-template" id="buttonsTempate">
    #switch(State){
    case 0:#
        <a href="@Url.Action("SelectEngineers")?pid=#=ProjectId#">انتخاب مهندسین</a>
    #break;
    case 1:#
        <a href="@Url.Action("Print")?pid=#=ProjectId#">چاپ نامه</a>
        <a href="@Url.Action("SelectEngineers")?pid=#=ProjectId#">انتخاب مهندسین</a>
    #break;
    }#
</script>

<script>
    var buttonsTemplate = kendo.template($("#buttonsTempate").html());
</script>

But I get an empty column.

If I use internal (inline) template, it works fine:

@(Html.Kendo().Grid<Project>().Name("Projects")
    .Columns(cols =>
    {
        cols.Bound(m => m.LetterNumber);
        cols.Bound(m => m.CityName);
        cols.Bound(m => m.OrganName);
        cols.Bound(m => m.DateString);
        cols.Bound(m => m.EngineersCount);
        cols.Bound(m => m.ExpertTypeString);
        cols.Bound(m => m.ProjectId)
            .Title("")
            .ClientTemplate(
                "#switch(State){case 0:#"
                 + "<a href='" + @Url.Action("SelectEngineers") + "?pid=#=ProjectId#'>انتخاب مهندسین</a>"
                 + "#break;case 1:#"
                 + "<a href='" + @Url.Action("Print") + "?pid=#=ProjectId#'>چاپ نامه</a>"
                 + "<a href='" + @Url.Action("SelectEngineers") + "?pid=#=ProjectId#'>انتخاب مهندسین</a>"
                 + "#break;}#");
    })
    .DataSource(ds => ds.Ajax().Read("GetList", "Projects"))
    .DoConfig()
)

But I prefer external template for such a long template. Any idea what is the problem?

Upvotes: 1

Views: 1526

Answers (1)

mrmashal
mrmashal

Reputation: 1883

The external templates created by kendo.template(), are in fact functions with a data input parameter. So in your template you should prepend all your columns with a data. e.g.:

<a href="@Url.Action("SelectEngineers")?pid=#=data.ProjectId#">

Also, in the grid options, you should use the #= syntax in order to see the output:

.ClientTemplate("#=buttonsTemplate(data)#")

Upvotes: 2

Related Questions