Как динамически менять набор столбцов сетки кендо

Ответ 1

Вы можете сделать это, установив источник данных KendoUI, уничтожьте сетку и перестройте ее

$("#load").click(function () {
        var grid = $("#grid").data("kendoGrid");

    var dataSource = grid.dataSource;

    $.ajax({
        url: "/Home/Load",
        success: function (state) {
            state = JSON.parse(state);

            var options = grid.options;

            options.columns = state.columns;

            options.dataSource.page = state.page;
            options.dataSource.pageSize = state.pageSize;
            options.dataSource.sort = state.sort;
            options.dataSource.filter = state.filter;
            options.dataSource.group = state.group;

            grid.destroy();

            $("#grid")
               .empty()
               .kendoGrid(options);
        }
    });
});

здесь вы можете просто сделать это:

var options = grid.options;

options.columns = state.columns;

где вы можете получить столбцы в сеансе или в db

Ответ 2

Этот jsfiddle - динамические столбцы сетки Kendo UI может помочь вам - используя kendo.observable.

var columns = data;

var configuration = {
    editable: true,
    sortable: true,
    scrollable: false,
    columns: columns    //set the columns here
};

var grid = $("#grid").kendoGrid(configuration).data("kendoGrid");
kendo.bind($('#example'), viewModel);   //viewModel will be data as in jsfiddle

Ответ 3

Для тех, кто использует Kendo и Angular вместе, вот решение, которое сработало для меня:

Идея состоит в использовании директивы k-rebind. Из документов:

Обновление виджета при изменениях параметров

Вы можете обновить виджет от контроллера. Используйте специальный атрибут k-rebind для создания виджета, который автоматически обновляется при изменении переменной области видимости. Этот параметр уничтожит исходный виджет и воссоздает его с помощью измененных параметров.

Помимо установки массива столбцов в GridOptions, как мы обычно делаем, мы должны содержать ссылку на него:

        vm.gridOptions = { ... };
        vm.gridColumns = [{...}, ... ,{...}];
        vm.gridOptions.columns = vm.gridColumns;

а затем передать эту переменную в директиву k-rebind:

        <div kendo-grid="vm.grid" options="vm.gridOptions" k-rebind="vm.gridColumns">
        </div>

И это, когда вы привязываете сетку к удаленным данным (OData в моем случае). Теперь вы можете добавлять или удалять элементы в/из массива столбцов. Сетка снова будет запрашивать данные после их воссоздания.

При привязке Grid к локальным данным (локальный массив объектов) нам нужно как-то отложить привязку данных до воссоздания виджета. Что сработало для меня (может быть, есть более чистое решение для этого) заключается в использовании службы $timeout:

        vm.gridColumns.push({ ... });

        vm.$timeout(function () {
            vm.gridOptions.dataSource.data(vm.myArrayOfObjects);
        }, 0);

Это было протестировано с использованием AngularJS v1.5.0 и Kendo UI v2016.1.226.

Ответ 4

Я использую этот код для динамического изменения столбцов:

kendo.data.binders.widget.columns = kendo.data.Binder.extend({
    refresh: function () {
        var value = this.bindings["columns"].get();
        this.element.setOptions({ columns: value.toJSON });
        this.element._columns(value.toJSON());
        this.element._templates();
        this.element.thead.empty();
        this.element._thead();
        this.element._renderContent(this.element.dataSource.view());
    }
});

<я > Weddin

Ответ 5

Обновить сетку

 .success(function (data) {
        grid.columns = data;
        grid.refresh();                    
    })

Ответ 6

Вот что я использую

var columns = [];//add the columns here
var grid = $('#grid').data('kendoGrid');
        grid.setOptions({ columns: columns });
        grid._columns(columns);
        grid._templates();
        grid.thead.empty();
        grid._thead();
        grid._renderContent(grid.dataSource.view());

Ответ 7

Я думаю, что решение для того, что вы просите, это вызвать эквивалентный удаленный метод DataSource.read() внутри функции. Это то, что я использовал для динамического изменения количества столбцов для локальных js-данных.

$("#numOfValues").change(function () {
    var columnsConfig = [];
    columnsConfig.push({ field: "item", title: "Metric" });

    // Dynamically assign number of value columns
    for (var i = 1; i <= $(this).val(); i++) {
        columnsConfig.push({ field: ("value" + i), title: ("201" + i) });
    }

    columnsConfig.push({ field: "target", title: "Target" });
    columnsConfig.push({ command: "destroy", title: "" });

    $("#grid").data("kendoGrid").setOptions({
        columns: columnsConfig
    });
    columnDataSource.read(); // This is what reloads the data
});

Ответ 8

Обновить сетку

     $('#GridName').data('kendoGrid').dataSource.read();
     $('#GridName').data('kendoGrid').refresh();

Ответ 9

Вместо того, чтобы перебирать все элементы. мы можем удалить все данные в сетке, используя один оператор

$("#Grid").data('kendoGrid').dataSource.data([]);

Ответ 10

Если ваша сетка проста и вам не нужно настраивать специальные настройки для столбца, тогда вы можете просто опустить аргумент столбцов, как предложенный в ссылке API.

Использовать автогенерированные столбцы (т.е. не устанавливать значения столбцов)

... и....

Если этот параметр [столбца] не указан, сетка создаст столбец для каждого поля элемента данных.

Ответ 11

var newDataSource = new kendo.data.DataSource({data: dataSource}); $ ( "# Сетка") данных ( "kendoGrid") setDataSource (newDataSource)..; .. $ ( "# Сетка") данных ( "kendoGrid") dataSource.read();