在鼠标悬停上为KendoUI Grid中的每一行显示行细节作为弹出窗口/ ToopTip窗体

我有一个填充了数据的网格和我只想显示3或2列并隐藏其余列，导致网格变得非常宽。当鼠标悬停在一行上时，我想以popup /工具提示形式显示该行的所有列。在鼠标悬停上为KendoUI Grid中的每一行显示行细节作为弹出窗口/ ToopTip窗体

请帮我这个。我搜索了很多，只发现了可编辑的弹出窗口，并且点击了按钮而没有悬停。

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

来源

2012-12-28 StarDust

您是否考虑过使用KendoUI'grid' ['detailTemplate']（http://docs.kendoui.com/api/web/grid#detailtemplate-function）而不是'hoover'？ – OnaBai

有两个独立的问题你正在努力实现的东西：

绑定悬停到Grid行（容易）。
生成一个弹出菜单/工具提示，显示其余列（简单但需要一定量的编码）。

因为它似乎您已经定义了一个名为HoverOnGrid功能可把它写成：

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

但它仍然显示中的和cancel按钮。

所以，我的建议是写一段代码，创建tooltip。

编辑：对于隐藏tooltip你应该先拦截mouseout事件：

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

其中hideTooltip可能是因为简单的东西：

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

假设你一直使用与tooltip相同的id（在本例中为tooltip_window_id）。

来源

2012-12-28 22:45:13 OnaBai

非常感谢OnaBai这是非常有用的我创建了一个div的kendo窗口，我展示了它悬停，但我仍然有一些问题a）如何关闭/隐藏它mouseleave b）如何显示这个弹出窗口当前附近hoverd row ..再次感谢您的帮助 – StarDust

关于如何关闭窗口而不是使用'hover'事件，我认为使用'mouseover'更好**编辑**，否则当您遇到一些奇怪的故障将鼠标水平移动到同一行并交叉单元格（至少在我的浏览器上）。 – OnaBai

由于OnaBai它确实工作。要设置弹出窗口的位置，我使用了e.clientX＆e.clientY...并且在弹出窗口中发送悬停的行数据，我制作了很少的模板，并将this.cell [index] .innerText的值传递给了所需的单元格。我使用innerText而不是dataItem因为我认为它更容易格式化所需的细节。 Ther虽然是一些小故障，但我想修正每行的弹出位置而不是e.cleintY，e.clientX。和有时弹出窗口有点颤抖，当任何行在鼠标指针上方悬停时，弹出窗口快速闪烁，特别是在Firefox中。 – StarDust

在鼠标悬停上为KendoUI Grid中的每一行显示行细节作为弹出窗口/ ToopTip窗体

回答

相关问题