This example demonstrates the DataGrid UI component communicating with a Web API service and allows to add columns dynamically.
- Create a CustomStore
- Make a call to API controller
- Process the controller response
- Add columns dynamically in "onLoaded"
var dataGrid;
var responseData;
var col = new Array();
let customDataSource = new DevExpress.data.CustomStore({
key: "ID",
load: function (loadOptions) {
var deferred = $.Deferred();
$.ajax({
url: "/DataWorkbench/GetClientModel",
method: "GET"
})
.done(function (response) {
responseData = response;
deferred.resolve(JSON.parse(response.data), {
totalCount: response.totalCount
})
})
.fail(function (e) {
deferred.reject("Insertion failed");
});
return deferred.promise();
},
onLoaded: function (result) {
for (let i = 0; i < responseData.columns.length; i++) {
dataGrid.addColumn(responseData.columns[i]);
}
}
});
$(function () {
$("#gridContainer").dxDataGrid({
dataSource: customDataSource,
remoteOperations: true,
showBorders: true,
editing: {
mode: 'cell',
allowUpdating: true,
allowAdding: true,
allowDeleting: true,
},
customizeColumns: function (columns) {
columns[0].visible = false;
},
columns:[]
})
dataGrid = $("#gridContainer").dxDataGrid("instance");
});
