Use Kendo grid with knockout-kendo and Knockout External-Template-Engine

Question

I'm using kendo grid with knockout, thanks to knockout-kendo package.

I have the grid and the grid's configuration define as below:

<div id="gridResult" data-bind="kendoGrid: gridOptions"> </div>

the template:

<script id="rowTmpl" type="text/html" >
    <tr >
        <td data-bind="text: PermitNumber"></td>
        <td data-bind="text: WorkTypeDescription"></td>
        ....
    </tr>
</script>        

the code in my viewmodel:

// search result
this.SearchResult = ko.observableArray();
this.gridOptions = {
            data: self.SearchResult,
            pageable: { pageSize: 20 },
            useKOTemplates: true,
            rowTemplate: "rowTmpl"
}

I populate the datasource and all is working great.

However, I'm using Knockout.js-External-Template-Engine, which works great with various templates across the app, but doesn't work with the template used for kendo grid row.

I tried to setup it in two way:

1. name the external template in gridOptions.rowTemplate (but I have no idea how can I pass to external template engine the reference to data object, so give up on this)

2. let the gridOptions.rowTemplate point to a "pseudo-template" in the html file, and inside of it define the reference to external template, passing it $data as data context as below:

<script id="rowTmpl" type="text/html" >
    <!-- ko template: {name: 'gridRow',  data: $data}-->
    <!-- /ko -->
</script>

and the external template gridRow.tmpl.html is as below:

<tr >
        <td data-bind="text: PermitNumber"></td>
        <td data-bind="text: WorkTypeDescription"></td>
        ....
</tr>

However, it doesn't work - when checking the network requests during page load, there is no request to load kendo row template.

Any idea how to make it work?

---

EDIT I just noticed that, when I move the row template to external file, I get the following javascript error, even if it works ok by using rowTemplate inline in page.

ReferenceError: gridOptions is not defined

Answer 1

Actually I figure out how to use it. The solution is shown below:

• Configure infuser to use template path under a common location for templates, and in sub-folder matching page name without extension:

infuser.defaults.templateSuffix = ".tmpl.html";
infuser.defaults.templateUrlRoot = "/templates/modules";
infuser.defaults.templateUrl = infuser.defaults.templateUrlRoot + '/' +
    window.location.pathname.replace(/\.[^\.\/]+$/, "").substr(1);

• Set the rowTemplate in gridOptions to an ID that does not exists in page on another element

this.gridOptions = { rowTemplate = 'myTemplate' }

• Create a file in the folder where the templates are looked up for, and name it as the template name setup in rowTemplate and there just define teh actual template markup, without enclosing ... tags In my case, the template file is /template/modules/mypage1/myTemplate.tmpl.html

• VERY IMPORTANT !!! Make sure you don't have any element on page with ID ='myTemplate'. If you do, template engine will consider that element the template and will try to use it, instead of loading the actual template file

That's it.

The problem I faced initially is I had another element on page with same name as template name. That's why the template engine didn't picked up the actual template file.