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

using 'template' property with grid with typescript

1 Answer 106 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Stacey asked on 20 Jan 2014, 11:22 PM
Using the official Kendo UI typescript definitions, trying to use the "grid" in the following manner refuses to compile; The error points to the toolbar property. This code works fine in normal javascript, and has never given me any trouble until I tried to use TypeScript.

this.elements.grid = $('#grid').kendoGrid({
        dataSource: {
            transport: {
                read: {
                    url: "/administrator/data/items",
                    dataType: "json",
                    type: 'GET',
                    cache: false
            schema: {
                total: "total",
                data: "data"
            page: 0,
            pageSize: 15,
            take: 15,
            serverPaging: true,
            serverFiltering: true,
            type: "aspnetmvc-ajax"
        toolbar: kendo.template($("#search-byName").html()),
        pageable: {
            refresh: true,
            pageSizes: true
        selectable: "row",
        columns: [
                field: "Id",
                width: 25,
                title: "Identity"
                field: "Name",
                width: 40,
                title: "Name",
                template: "<div class='#: Quality.CSS #'>#: Name #</div><div>#: (Origin.Label != null) ? Origin.Label : '' #</div>"
        change: function (e) {
            // get the selected row from the grid
            var selected =;
            // get the data from the selected row
            var data = this.dataItem(selected);
            // update the model
            // perform binding as needed
            // set the mode to editing, since we have
            // selected an existing item
            viewModel.set("Editing", true);

1 Answer, 1 is accepted

Sort by
Atanas Korchev
Telerik team
answered on 21 Jan 2014, 12:01 PM
Hi Stacey,

Try the following:

toolbar: [
 { template: kendo.template($(
"#search-byName").html()) } ]

The toolbar TypeScript option is declared as GridToolbarItem[].

Atanas Korchev
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Share this question