When ı clicked button, not working refresh.If the purpose is to add to the database buton button press to e to the screen. But is not updating. I created a datagrid with ajax. I also wrote the refresh function in ViewModel.What may be the reason for not renewing. My data is json.

$.ajax({
        type: "GET",
        url: ""
        success: function (msg, result, status, xhr) {
        var obj = jQuery.parseJSON(msg);
        $("#gridContainer").dxDataGrid({
        dataSource: obj,
        filterRow: {
        visible: true}});}});
        var viewModel = {
        refresh: function () {        
        var dataGrid = $('#gridContainer').dxDataGrid('instance');
        dataGrid.refresh();}};
return viewModel;

<div data-options="dxView : { name: 'dd',disableCache: true } " >
   <div data-bind="dxCommand: { icon: 'refresh', id: 'save', onExecute: refresh }"></div>
     <div  data-options="dxContent : { targetPlaceholder: 'content' } " >
       
         <div  id="gridContainer"></div> 
        
            </div>
</div>

When ı clicked button, not working refresh.If the purpose is to add to the database buton button press to e to the screen. But is not updating. I created a datagrid with ajax. I also wrote the refresh function in ViewModel.What may be the reason for not renewing. My data is json.

$.ajax({
        type: "GET",
        url: "https://js.devexpress./Demos/WidgetsGallery/data/orderItems"
        success: function (msg, result, status, xhr) {
        var obj = jQuery.parseJSON(msg);
        $("#gridContainer").dxDataGrid({
        dataSource: obj,
        filterRow: {
        visible: true}});}});
        var viewModel = {
        refresh: function () {        
        var dataGrid = $('#gridContainer').dxDataGrid('instance');
        dataGrid.refresh();}};
return viewModel;

<div data-options="dxView : { name: 'dd',disableCache: true } " >
   <div data-bind="dxCommand: { icon: 'refresh', id: 'save', onExecute: refresh }"></div>
     <div  data-options="dxContent : { targetPlaceholder: 'content' } " >
       
         <div  id="gridContainer"></div> 
        
            </div>
</div>

• javascript
• jquery
• devextreme

• 1 What's the purpose of calling the refresh method for the data grid instance? Do you change a dynamically changed data source ? What do you expect from calling the refresh method? If you initialize the grid in your ajax call just once, it does not make any sense to refresh the grid. – Alex Skorkin Commented Feb 10, 2017 at 11:07
• @AlexSkorkin Can I ask you a question? – Girl_engineer Commented Feb 23, 2017 at 5:36

1 Answer 1

As Alex mentioned, your ajax happens only one. So, it's better to use the DataSource configuration object to load data:

var dataSource = {
    load: function() {
        var items = $.Deferred();
        $.ajax({
            type: "GET",
            url: "https://js.devexpress./Demos/WidgetsGallery/data/orderItems",
            success: function(result) {
                items.resolve(result.items);
            }
        });

        return items.promise();
    }
};

$("#gridContainer").dxDataGrid({
    dataSource: dataSource,
    //...
});

Then, if you call the refresh() method of dxDataGrid, data source will be reloaded.

Demo

Pay attention, the refresh method is useful if your data source is changing dynamically.