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



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

父网格name="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属性并在子网格上应用工具提示。

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

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

如果你喜欢我的答案,那么别忘了给我投票。

您可以将一个类应用于子网格的单元格,您希望该单元格上的工具提示具有列属性:

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

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

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

最新更新