Set title and additional properties to kendo ui gr

Question

I am using kendo ui grid to display data. I want to set title for the grid.Is there any way to set it.

Also I want to set some additional/custom property for grid which will help to identify the grid uniquely. Any custom property I can set to grid so I can get its value when required.

So in case if there are more instances on grid this will help.

Please suggest on this.

Answer 1

Iterating through all your tables can be done using:

$.each($(".k-grid"), function (idx, grid) {
    // Do whatever you want to do with "grid"
    ...
});

If you want to add a title, might be something like:

$.each($(".k-grid"), function (idx, grid) {
    $(grid).data("kendoGrid").wrapper.prepend('<div class="k-grid-header"><table><thead><tr><th class="k-header">Title</th></tr></thead></table></div>');
});

For setting a click event to the HTML img elements, you can do:

$("tr", ".k-grid").on("click", "img:first", function () {
    // Here "this" is the "img" on which you clicked, finding the grid is:
    var grid = $(this).closest(".k-grid").data("kendoGrid");
    console.log("grid", grid);
    // If you want to access the "id"
    console.log("id", grid.element.attr("id"));
});

Once you click on the first image of each row what I do in the event handler is finding the closest HTML element with k-grid class (the grid): this is the HTML containing the grid.

If you want to get Kendo UI grid element the you need to use data("kendoGrid").

Simple and elegant.

In this JSFiddle: http://jsfiddle.net/OnaBai/2qpT3/2/, if you click on "Add Titles" button you add a title to each table and if you click on "Add Handlers" and then in an image, you will get an alert with the id of the table that the image belongs to.

EDIT: If you want to iterate on every image that is in the first column, of every KendoUI grid on your document, you should do:

$.each($("td:first > img", ".k-grid table tbody > tr"), function (idx, elem) {
    // "elem" is the image
    console.log(idx, elem);
    // associate event
    $(elem).on("click", fnHandler);
});

Answer 2

I prefer to change the title like this:

$("#grid th[data-field=Field]").html("Title");