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

时间:2014-09-01 10:39:25

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

我有2级的层次结构kendo网格。由于子网格每次无法获取选定的行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属性并在子网格上应用工具提示。

2 个答案:

答案 0 :(得分:0)

您可以尝试以下代码来获取子网格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();
}           

如果您喜欢我的回答,请不要忘记投票给我..

答案 1 :(得分:0)

您可以使用列属性将类应用于您希望工具提示的子网格单元格:

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

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

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