Kendo Grid：在下拉列表中列出所有列标题，无需水平滚动即可立即查看答案

【问题标题】：Kendo Grid: list all colum headers in a dropdown to see it instantly without scrolling horizontallyKendo Grid：在下拉列表中列出所有列标题，无需水平滚动即可立即查看
【发布时间】：2016-05-04 20:24:11
【问题描述】：

我有剑道网格，并且有很多列来查找特定列应该将我滚动到该列，或者我们可以在我的剑道网格上方的下拉列表中列出所有列（名称），以便通过选择我可以看到该列突出显示或选中。我试着找了很多，但找不到，我买了剑道网格。帮帮我。！！谢谢！！

【问题讨论】：

标签： javascript jquery kendo-ui kendo-grid

【解决方案1】：

试试这个代码：

$("#grid").kendoGrid({
   ...
});

// Generate column list
var gridColumns = $("#grid").data("kendoGrid").options.columns,
    htmlOptions = "";

for (var i = 0; i < gridColumns.length; i++) {
    htmlOptions+= "<option value='" + i + "'>" + gridColumns[i].title + "</option>";
}

$("#column-list")
    .append(htmlOptions)
    .on("change", function() {
        // get the grid
        var grid = $("#grid").data("kendoGrid");

        // Find the TH element inside the grid's THEAD based on chosen index
        var chosenColumn = $(grid.element).find("thead th:eq(" + $(this).val() + ")");

        // Scroll to the column by its offsetLeft property
        scroll(chosenColumn[0].offsetLeft);
    });

// Scroll function
var scroll = function(pos) {
    $(".k-grid-content")[0].scrollLeft = pos;
}

HTML：

<select id="column-list"></select>

Demo。 sn-p 在它自己的 cmets 中是自我解释的。如果它们不足以让您理解，请告诉我。

参考：

scrollLeft

【讨论】：