web-dev-qa-db-ja.com

剣道グリッドの列セットを動的に変更する方法

私は私の剣道グリッドの列コレクションを以下の方法で変更しようとしています。

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

これは列コレクションを変更していますが、グリッドにすぐには反映されません。しかし、グリッドでいくつかのアクション（グループ化など）を実行しようとすると、新しい列セットが表示されます。

これを達成する方法を教えてください。

よろしく、ディリップ・クマール

kendo-uigridkendo-grid
15
user2503696

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;

セッションまたはデータベース内の列を取得できる場所

15
Edu Cielo

この 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
10
Paritosh

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）にバインドしているときはこれで終わりです。これで、列の配列に要素を追加したり、列の配列から要素を削除したりできます。グリッドは、データが再作成された後、再度データを照会します。

グリッドをローカルデータ（オブジェクトのローカル配列）にバインドする場合、ウィジェットが再作成されるまでデータのバインドを何らかの方法で延期する必要があります。私のために働いたのは（おそらくこれに対するよりきれいな解決策があるでしょう）$ timeoutサービスを使用することです：

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

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

これは、AngularJS v1.5.0およびKendo UI v2016.1.226を使用してテストされています。

8
Augusto Barreto

列を動的に変更するためにこのコードを使用しています：

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

グリッドを更新する

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

ここに私が使用するものがあります

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

あなたが求めていることに対する解決策は、関数内で同等のリモート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
});
1
ehance

var newDataSource = new kendo.data.DataSource（{data：dataSource}）; $（ "＃grid"）。data（ "kendoGrid"）。setDataSource（newDataSource）; $（ "＃grid"）。data（ "kendoGrid"）。dataSource.read（）;

0
parham parsa

グリッドがシンプルで、特別な列固有の設定を構成する必要がない場合は、 APIリファレンスで提案 のように、単純に columns引数を省略 できます。

自動生成された列を使用します（つまり、列設定を設定しません）

...および....

この[列]設定が指定されていない場合、グリッドはデータ項目のすべてのフィールドに列を作成します。

0
The Red Pea

グリッドを更新する

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

すべての要素をループする代わりに。単一のステートメントを使用して、グリッド内のすべてのデータを削除できます

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