将标题和其他属性设置为kendo ui网格 [英] Set title and additional properties to kendo ui grid

问题描述

我正在使用kendo ui网格显示数据.我想为网格设置标题.有什么方法可以设置它.

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

我还要为网格设置一些其他/自定义属性，这将有助于唯一地标识网格.我可以将任何自定义属性设置为grid，以便在需要时获取其值.

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.

请对此提出建议.

推荐答案

可以使用以下方法遍历所有表:

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>');
});

要为HTML img元素设置点击事件，您可以执行以下操作:

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"));
});

单击每行的第一张图像后，我在事件处理程序中执行的操作将找到具有k-grid类(网格)的最接近的HTML元素:这是包含网格的HTML.

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.

如果要获取Kendo UI grid元素，则需要使用data("kendoGrid").

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

简单而优雅.

在此JSFiddle中: http://jsfiddle.net/OnaBai/2qpT3/2/，如果单击添加标题"按钮，则会为每个表添加一个标题，如果单击添加处理程序"，然后在图像中，您将收到图像所属的表的id警报

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.

编辑:如果要遍历文档中每个KendoUI网格的第一列中的每个图像，则应该执行以下操作:

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);
});

这篇关于将标题和其他属性设置为kendo ui网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！