kendo-ui - 如何制作“隐藏此列”按钮

Question

我的剑道 ui 中有一个网格。我也有一个标题上下文菜单。现在我想能够做什么。当我右键单击标题并选择隐藏此列时，我希望该列（在其上单击右键）隐藏。

菜单：

<ul class ="Menu" id="contextmenu" style=" display:none; position: absolute; background-color:white; border-style:solid; border-width:1px;" >
<li id="hideCol">Hide This Column</li>
<li>show hidden columns</li>

菜单和隐藏此列功能：

 $(document).ready(function() {

        $("table tr").bind('contextmenu', function(event) {
            $("#contextmenu").css({ "top": event.pageY + "px", "left": event.pageX + "px" }).kendoMenu({ orientation: "vertical" }).show();
            event.preventDefault();
        });

        $(document).bind('click', function() {
            $("#contextmenu").hide();
        });
    });

    $("#hideCol").click(function () {
        // Get reference to the Grid
        var grid = $("#Grid").data("kendoGrid");
        // Get th cell index
        var idx = $("table tr").index();
        // Hide column
        grid.hideColumn(idx);
        //$("#Grid").data("kendoGrid").hideColumn();

    });

Answer 1

假设您的网格 id 是grid，您需要做的是找到列的索引并调用hideColumn。

假设这是您右键单击elem的表头 ( ) 元素：th

// Get reference to the Grid
var grid = $("#grid").data("kendoGrid");
// Get th cell index
var idx = $(elem).index();
// Hide column
grid.hideColumn(idx);

要查看它的实际效果，请右键单击以下示例的标题：http: //jsfiddle.net/OnaBai/9x3H9/