在鼠標懸停上爲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窗體

回答

相關問題