Comment changer dynamiquement l'ensemble des colonnes de la grille de kendo

vous pouvez le faire en définissant la source de données KendoUI, détruire la grille, et la reconstruire

$("#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);
        }
    });
});

ici il vous suffit de faire ceci :

var options = grid.options;

options.columns = state.columns;

où vous pouvez récupérer les colonnes dans une session ou dans une db

jsfiddle - Kendo UI grille de colonnes dynamiques peut vous aider-en utilisant le 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

pour ceux qui utilisent Kendo et Angulaire ensemble, voici une solution qui a fonctionné pour moi:

L'idée est d'utiliser le directive K-rebind. À partir de la documentation:

Widget de mise à Jour sur les Changements d'Option

vous pouvez mettre à jour un widget depuis controller. Utilisez l'attribut spécial K-rebind pour créer un widget qui se met automatiquement à jour lorsque certaines variables de portée changent. Cette option détruira le widget original et va le recréer en utilisant les options modifiées.

en plus de définir le tableau des colonnes dans les GridOptions comme nous le faisons normalement, nous devons tenir une référence à celui-ci:

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

et ensuite passer cette variable à la directive K-rebind:

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

Et c'est quand vous êtes de liaison de la grille à distance de données OData (dans mon cas). Vous pouvez maintenant ajouter ou supprimer des éléments à/du tableau des colonnes. La grille va interroger les données de nouveau après il est recréé.

lors de la liaison de la grille aux données locales (tableau local d'objets), nous devons d'une manière ou d'une autre reporter la liaison des données jusqu'à ce que le widget soit recréé. Ce qui a fonctionné pour moi (peut-être qu'il y a une solution plus propre à cela) est d'utiliser le service $timeout:

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

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

ceci a été testé en utilisant AngularJS v1.5.0 et Kendo UI v2016.1.226.

j'utilise ce code pour modifier la dynamique des colonnes:

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

Rafraîchissez votre grille

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

Voici ce que j'utilise

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());

je pense qu'une solution pour ce que vous demandez est d'appeler la source de données distante équivalente.lire () méthode à l'intérieur de la fonction. C'est ce que j'ai utilisé pour changer le nombre de colonnes dynamiquement pour les données locales 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
});

rafraîchir la grille

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

au lieu de passer à travers tous les éléments. nous pouvons supprimer toutes les données dans la grille à l'aide d'une seule instruction

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

si votre grille est simple et que vous n'avez pas besoin de configurer des paramètres spécifiques à la colonne, alors vous pouvez tout simplement omettre l'argument des colonnes