CODEWITHSUNDEEP
kendo-uitypescriptkendo-grid
Ciel
Ciel

Reputation: 4440

Kendo UI, Grid "Toolbar" with Typescript

I am using Kendo UI's Grid system for a data grid, and am migrating my code to Typescript. I am loving it so far, but have hit a few snags; One of which is that the declaration for the grid seems to be a bit incomplete, even with Telerik's official Typescript definitions.

For example, this code works in javascript. However if I run this exact same code in Typescript, I am told that the toolbar property is invalid, because it is expecting a type of GridToolbarItem. I have traced GridToolbarItem down and, while I do find the interface for it, I cannot seem to actually declare or create it, thus I am not being allowed to create a toolbar for my grid!

        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) {
                // do some stuff when an item is selected
            },
        }).data("kendoGrid");

Upvotes: 0

Views: 1506

Answers (1)

Jeffery Grajkowski
Jeffery Grajkowski

Reputation: 4061

TypeScript's type system is different from that of Java or C# in that it's the shape of the type that matters, not the names in the class hierarchy. I like to think of it as a contract. The contract says you have to have certain things and it doesn't matter why you have them or if you have more.

Here's a lame example I cooked up:

interface BagOfStuff {
    anum: number;
    astring: string;
    anany: any;
}

function processBag(bag: BagOfStuff): void { }

var aBag = {
    anum: 5,
    astring: "foo",
    anany: {},
    bonusThing: "bar"
};
processBag(aBag);   // works

aBag never said it was of type BagOfStuff, but it satisfies all the requirements of one so I can pass it into processBag and that will work.

Upvotes: 1

Related Questions