对于KendoUI Grid中的每一行,在鼠标悬停上将行详细信息显示为Popup/ToopTip表单

Question

我有一个填充数据的网格,我想只显示3或2列并隐藏其余列,因为网格变得非常宽.当鼠标悬停在一行上时,我想显示该行的所有列,如弹出/工具提示形式.

请帮我解决一下这个.我搜索了很多,只发现了可编辑的弹出窗口,点按了按钮而不是悬停.

function PopulateGrid() {
    $("#recentNews").kendoGrid({

        columns: [
            { field:      'Date', title: 'Date', width: 80,
                template: '#=kendo.toString(toDate(NewsDate), "yyyy/MMM/dd") #'
            },
            { field:      'TradeTime', title: 'Time', width: 60,
                template: '#=kendo.toString(toDate(NewsTime), "hh:mm:ss") #'
            },

            { field: 'Title', title: 'Description', width: 200 },
            { field: 'Country', title: 'Country', width: 40 },
            { field: 'Economy', title: 'Economoy', width: 40 }

        ],

        dataSource: {
            transport: {
                read: {
                    url:      'Home/GetNews',
                    dataType: "json",
                    type:     "POST"
                }
            },
            schema:    {
                data:  function (data) {
                    return data.data;
                },
                total: function (data) {
                    return data.total;
                }
            },
            pageSize:  100

        },
        //            change: onChange,
        //          dataBound: onDataBound,
        dataBound:  HoverOnGrid,
        pageable:   true,
        sortable:   true,
        scrollable: true,
        height:     565,
        width:      2000
    });
}

Answer 1

关于您要实施的内容,有两个单独的问题:

1. 将鼠标悬停Grid在行上(简单).
2. 生成一个弹出/工具提示,显示其余列(简单但需要一定量的编码).

由于您似乎已经定义了一个名为HoverOnGridlet 的函数,因此将其写为:

function HoverOnGrid() {
    $("tr", "#recentNews").on("mouseover", function (ev) {
        // Invoke display tooltip / edit row
        var rowData = grid.dataItem(this);
        if (rowData) {
            showTooltip(rowData);
        }
    });
}

在哪里grid:

var grid = $("#recentNews").kendoGrid({
    ...
}).data("kendoGrid";

现在,棘手的问题,如何显示工具提示/弹出窗口...没有预定义的方法,你应该自己做.您可以获得的结果定义HoverOnGrid为:

function HoverOnGrid() {
    $("tr", "#recentNews").on("click", function (ev) {
        grid.editRow(this);
    })
}

并Grid初始化说:

 editable:   "popup",

但是这会打开一个popup但是在编辑模式下的字段(你可以在其中定义dataSource.schema.model所有字段都不可编辑的东西:

model: {
    fields: {
        Date:      { editable: false },
        TradeTime: { editable: false },
        Title:     { editable: false },
        Country:   { editable: false },
        Economy:   { editable: false }
    }
}

但它仍然显示update和cancel按钮popup.

所以,我的建议是编写一段代码来创建它tooltip.

编辑:为了隐藏tooltip你应该首先拦截mouseout事件:

$("tr", "#recentNews").on("mouseout", function (ev) {
    // Hide Tooltip
    hideTooltip();
});

这里hideTooltip可能是因为简单的东西:

var tooltipWin = $("#tooltip_window_id").data("kendoWindow");
tooltipWin.close()

假设您总是使用相同id的tooltip(在此示例中tooltip_window_id).