如何在JS中动态地将网格分组为false / true?

时间:2013-09-24 19:27:56

标签: javascript jquery kendo-ui kendo-grid kendo-asp.net-mvc

首先,我的网格定义如下:我点击搜索按钮然后网格读取数据并按类分组:

@(Html.Kendo().Grid<Student>()
    .Name("StudentGrid")
    .Scrollable()
    .Columns(columns =>
    {
        columns.Bound(o => o.Class).Groupable(true).Title("Class");          
        columns.Bound(o => o.Name).Groupable(true).Title("Name");
        columns.Bound(o => o.Point).Groupable(true).Title("Point");
    }).AutoBind(false)
    .DataSource(dataSource => dataSource
    .Ajax().Group(i => i.Add(a => a.Class))
    .Read(read => read.Action("GetStudentPoint", "StudentControl"))
    .Events(events => events.Error("error_handler"))
))

现在我想让gird groupable为false并隐藏class列。这意味着,我不想对学生数据进行分组并隐藏类列:

$("#StudentGrid").data("kendoGrid").Groupable( false );
$("#StudentGrid").data("kendoGrid").hideColumn(0);
$("#StudentGrid").data("kendoGrid").dataSource.read();

我的代码出了什么问题?

1 个答案:

答案 0 :(得分:5)

即使网格具有groupable = false,并且dataSource上仍有一个组,输出也会显示为分组。如果你只是添加

$("#StudentGrid").data("kendoGrid").dataSource.Group("");

之前的dataSource.read();这应该清理任何分组。只需将grid.groupable设置为false,就会关闭将列标题拖动到按区域分组的功能。

隐藏列应该正常工作,但您可能需要在之后调用网格上的刷新。

$("#StudentGrid").data("kendoGrid").refresh();

这是一个小样本(不使用MVC,但仍应适用)。 http://jsbin.com/iNagENo/2/edit