web-dev-qa-db-fra.com

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

J'essaie de changer la collection de colonnes de ma grille Kendo de la manière suivante.

var grid = $("#grid").data("kendoGrid");
$http.get('/api/GetGridColumns')
    .success(function (data) {
        grid.columns = data;                    
    })
    .error(function (data) {
        console.log(data);
    });

Cela modifie la collection de colonnes mais ne se reflète pas immédiatement dans ma grille. Mais lorsque j'essaie d'effectuer certaines actions dans la grille (comme le regroupement), mon nouveau jeu de colonnes apparaît.

Veuillez me faire savoir comment y parvenir.

Cordialement, Dilip Kumar

kendo-uigridkendo-grid
15
user2503696

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, vous pouvez simplement faire ceci:

var options = grid.options;

options.columns = state.columns;

où vous pouvez récupérer les colonnes dans une session ou dans une base de données

15
Edu Cielo

Cela jsfiddle - Colonnes dynamiques de la grille de l'interface utilisateur de Kendo peut vous aider - en utilisant 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
10
Paritosh

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

L'idée est d'utiliser la directive k-rebind . De la documentation:

Mise à jour du widget en cas de changement d'option

Vous pouvez mettre à jour un widget à partir du contrôleur. Utilisez l'attribut spécial k-rebind pour créer un widget qui se met à jour automatiquement lorsque certaines variables d'étendue changent. Cette option détruira le widget d'origine et le recréera en utilisant les options modifiées.

En plus de définir le tableau de colonnes dans les GridOptions comme nous le faisons normalement, nous devons y tenir une référence:

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

puis passez cette variable à la directive k-rebind:

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

Et c'est tout lorsque vous liez la grille à des données distantes (OData dans mon cas). Vous pouvez maintenant ajouter ou supprimer des éléments dans/du tableau de colonnes. La grille va interroger à nouveau les données après leur recréation.

Lors de la liaison de la grille aux données locales (tableau local d'objets), nous devons en quelque sorte reporter la liaison des données jusqu'à ce que le widget soit recréé. Ce qui a fonctionné pour moi (il existe peut-être une solution plus propre) est d'utiliser le service $ timeout:

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

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

Cela a été testé avec AngularJS v1.5.0 et Kendo UI v2016.1.226.

8
Augusto Barreto

J'utilise ce code pour changer les colonnes dynamiques:

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

3
Weddin

Rafraîchissez votre grille

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

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

Je pense qu'une solution pour ce que vous demandez est d'appeler la méthode DataSource.read () distante équivalente à l'intérieur de la fonction. C'est ce que j'ai utilisé pour changer dynamiquement le nombre de colonnes pour les données js locales.

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

var newDataSource = nouveau kendo.data.DataSource ({data: dataSource}); $ ("# grille"). data ("kendoGrid"). setDataSource (newDataSource); $ ("# grille"). data ("kendoGrid"). dataSource.read ();

0
parham parsa

Si votre grille est simple et que vous n'avez pas besoin de configurer des paramètres spécifiques aux colonnes, vous pouvez simplement omettre l'argument des colonnes , comme suggéré dans la référence de l'API.

Utiliser des colonnes générées automatiquement (c'est-à-dire ne pas définir de paramètres de colonne)

... et ....

Si ce paramètre [colonne] n'est pas spécifié, la grille créera une colonne pour chaque champ de l'élément de données.

0
The Red Pea

Rafraîchir la grille

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

Au lieu de parcourir tous les éléments. nous pouvons supprimer toutes les données de la grille en utilisant une seule instruction

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