Kendo Grid Extension “Tutorial”


I’ve been working to extend a Kendo Grid to achieve some fairly custom behavior, I would like to share what I’ve come up with in the hopes that it will save you some time.

O.k. it’s not much of a tutorial, but since all you really want is the code and you’ll try it out in jsFiddle…  here it is…

The Simplest Extension

(function ($) {
    var MyGrid = kendo.ui.Grid.extend({
        init: function (element, options) {
            kendo.ui.Grid.fn.init.call(this, element, options);
        },
        options: {
            name: "BasicExtendedGrid",
            autobind: true,
            templet: null
        },
    });
    kendo.ui.plugin(MyGrid);
})(jQuery);

$("#basicExtendedGridElement").kendoBasicExtendedGrid({
    datasource: [
        { "rank": 5, "rating": 8.9, "year": 1994,  "title""Pulp Fiction"},
        { "rank": 9, "rating": 8.8,"year": 2010, "title""Inception"}, 
        { "rank": 10,"rating": 8.8,"year": 2008,"title""The Dark Knight"}
    ],
    columns: [
        {title: "UniqueID", field: "rank" }, 
        { title: "Year", field: "year" },
        { title: "Title" field: "title" }, 
{ title: "Rating", field: "rating"
}]
}).data("kendoBasicExtendedGrid");

The key to Kendo grid extensions is to make sure your naming conventions are correct. please note the difference between: kendoBasicExtendedGrid, basicExtendedGridElement and BasicExtendedGrid. in order to get kendo to work with your extension you MUST name it  yourName, and then initialize it as:

$(‘#elem’).kendoYourName(..blah..) .data(“kendoYourName”) .

Obviously you can change the name (as above) but this is key if you want everything to work together.

And here are a number of helpful links to get you going along the right path:

My 2 ₵

I personally am very fond of the templating approaches, with those there is literally nothing you cannot do. use a template for your cells, edit, display, error.. at that level you have the final say on how that cell is modified and you can do fun things like making an editable column read-only by determining if the data should be editable and if not just close the cell, (the user will not even notice that Kendo tried to make the editable cell display, but you stopped it. you can also use this approach to make the display template “look” like an editable cell, by taking the html from the editable version and “faking” it with a div which looks like it is an input!!!

Also if your interested in using jsFiddles in your posts (the version of WordPress I’m using doesn’t allow this right now) you can see how to do it in this jsFiddle.

Advertisements

About Larry Louisiana

I'm a Microsoft Partner Consultant.
This entry was posted in Tutorial, Uncategorized and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s