以下の方法で剣道グリッドの列コレクションを変更しようとしています。
var grid = $("#grid").data("kendoGrid");
$http.get('/api/GetGridColumns')
.success(function (data) {
grid.columns = data;
})
.error(function (data) {
console.log(data);
});
これは列コレクションを変更していますが、グリッドにすぐには反映されません。しかし、グリッドでいくつかのアクション (グループ化など) を実行しようとすると、新しい列セットが表示されます。
どうすればこれを達成できるか教えてください。
よろしく、 ディリップ・クマール
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;
セッションまたはデータベースで列を取得できる場所
このjsfiddle - Kendo UI grid dynamic columnsは、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
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 を使用してテストされています。
私は動的な列の変更にこのコードを使用しています:
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());
}
});
ウェディン
グリッドを更新する
.success(function (data) {
grid.columns = data;
grid.refresh();
})
これが私が使用するものです
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());
グリッドが単純で、特別な列固有の設定を構成する必要がない場合は、API リファレンスで提案されているように、列引数を単純に省略できます。
自動生成された列を使用する (つまり、列設定を何も設定しない)
... と ....
この [列] 設定が指定されていない場合、グリッドはデータ項目のすべてのフィールドに対して列を作成します。
グリッドを更新する
$('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();
var newDataSource = new kendo.data.DataSource({data: dataSource}); $("#grid").data("kendoGrid").setDataSource(newDataSource); $("#grid").data("kendoGrid").dataSource.read();