在层次结构剑道网格中的子网格上应用工具提示答案

【问题标题】：apply tooltip on child grid in hierarchy kendo grid在层次结构剑道网格中的子网格上应用工具提示
【发布时间】：2014-09-01 10:39:24
【问题描述】：

我有 2 个层次的剑道网格。由于每次我无法获取选定的行 ID 并且无法在子网格的更改事件上应用工具提示时，子网格都有唯一的名称。

父网格名称=“AccountStatusgrid”

            <script type="text/kendo" id="LocationsTemplate">
              @(Html.Kendo().Grid<NOC.Entities.Location>()
                    .Name("AccountStatusgrid_#=AccountId#")
                   .Columns(column =>
                   {
                       column.Bound(c => c.LocationName).Title("Location Name").HeaderHtmlAttributes("style=align:center;").Width(100);

                       column.Template(@<text> </text>).ClientTemplate("<html><span>Device</span></html>").HeaderHtmlAttributes("style=align:center;").Title("Devices").Width(100);

                       for (int i = 0; i < Model.MockServiceHeaders.Count(); i++)
                       {
                           column.Bound(c => c.LocationStatus).Title(Model.MockServiceHeaders.ToList()[i].ServiceName.ToString()).Width(20).HtmlAttributes(new { title = " " });

                       }
                   })
                                 .Selectable(selectable => selectable

                                  .Mode(GridSelectionMode.Single)

                                  .Type(GridSelectionType.Cell))
                                  .AutoBind(true)
                                      .DataSource(source => source.Ajax()
                                          .Model(model =>
                                          {
                                              model.Id(o => o.LocationId);

                                          })
                                          .ServerOperation(true)
                                          .Events(events => events.Error("error_handler"))
                                          .Read(read => read.Action("GetLocationData", "Account", new { AccountId = "#=AccountId#" }))
                                        )
                                      .Events(events => events.DataBound("Grid_onRowDataBound").Change("Grid_onCellChange_Locations"))
                                      .ClientDetailTemplateId("DeviceTemplate")
                                      .ToClientTemplate()

                                  )

            </script>

             function Grid_onCellChange_Locations() {

                    var grid = $("AccountStatusgrid_#=AccountId#").data("kendoGrid");

                    var dataItem = grid.dataItem(grid.select().closest("tr"));

                    var Sel_accountId = dataItem.AccountId;
                    var Sel_loactionId = dataItem.LocationId;
                    var Sel_deviceId = dataItem.DeviceId;

                    var selected = $.map(this.select(), function (item) {

                        var index = $(item).index();
                        if (grid.columns[index - grid.dataSource._group.length] != undefined) {

                            ServiceName = grid.columns[index - grid.dataSource._group.length].title;

                        }
                        else
                            ServiceName = "";

                        Selectedservicestatus = $(item).text()
                    });

                    $("AccountStatusgrid_#=AccountId#").kendoTooltip({
                        filter: 'td[title]',
                        showOn: "click",
                        content: {
                            url: '@Url.Action("Tooltip", "Account")',
                            data: { accountId: Sel_accountId, locationId: Sel_loactionId, deviceId: Sel_deviceId, serviceName: ServiceName }
                        },
                        width: 290,
                        height: 360,
                        position: "right"

                    });

                }

目前 $("AccountStatusgrid_#=AccountId#") 不可访问。请让我知道如何获取子网格的 dataitem 属性并在子网格上应用工具提示。

【问题讨论】：

标签： javascript kendo-ui kendo-grid kendo-tooltip

【解决方案1】：

您可以尝试下面的代码来获取子网格数据项..

$("#grid").delegate(".details-button", "click", function(e) {
var row = $(this).closest("tr"),
  grid = $(this).parents("[data-role=grid]").data("kendoGrid"); //gets child grid

var model = grid.dataItem(row);
console.log(model); //model contains the id

}

或使用此代码可能会对您有所帮助。

function expand(e) {
var dataItem = this.dataItem(e.node);
if (dataItem.hasChildren) {
    var childItems = dataItem.children.data();
}

如果你喜欢我的回答，别忘了给我投票。

【讨论】：

【解决方案2】：

您可以将一个类应用于您希望工具提示的子网格单元格，并带有列属性：

{ field: "MyColumn", title: "Ref #", attributes: { "class": "tooltip2" } },

然后在类名上使用过滤器定义您的工具提示：

mySubGrid.element.kendoTooltip({
filter: ".tooltip2", 
position: "right",
content: "My tooltip."}).data("kendoTooltip");

【讨论】：