Refresh Data

• Jan 26, 2021

Use the JavaScript API to refresh server-side controls’ data. Any data-bound control has the getDataSource() method. It returns the control’s DataSource instance. Call its reload() method to refresh the control’s data, as shown in the following DataGrid example:

Razor C#

@(Html.DevExtreme().DataGrid()
    .ID("targetDataGrid")
    .DataSource(ds => ds.Mvc()
        .Controller("GridData")
        .Key("OrderID")
        .LoadAction("Get")
        .InsertAction("Insert")
        .UpdateAction("Update")
        .DeleteAction("Delete")
    )
)

@(Html.DevExtreme().Button()
    .Text("Refresh Grid")
    .OnClick("reloadData")
)

<script type="text/javascript">
    function reloadData() {
        $("#targetDataGrid").dxDataGrid("getDataSource").reload();
    }
</script>

Razor VB

@(Html.DevExtreme().DataGrid() _
    .ID("targetDataGrid") _
    .DataSource(Function(ds) ds.Mvc() _
        .Controller("GridData") _
        .Key("OrderID") _
        .LoadAction("Get") _
        .InsertAction("Insert") _
        .UpdateAction("Update") _
        .DeleteAction("Delete")
    )
)

@(Html.DevExtreme().Button() _
    .Text("Refresh Grid") _
    .OnClick("reloadData")
)

<script type="text/javascript">
    function reloadData() {
        $("#targetDataGrid").dxDataGrid("getDataSource").reload();
    }
</script>