Data Grid - Refresh할 때 Parameter 넘기는 방법

Data Grid를 사용하다 보면 수동으로 Refresh를 해야 되는 경우가 발생한다.

Parameter 없는 경우에는 간단하게 아래 명령어를 사용하여 LoadAction을 수행할 수 있다.

 

Refresh 명령어(둘 중에 하나를 사용)

$("#targetDataGrid").dxDataGrid("refresh");
$("#targetDataGrid").dxDataGrid("instance").refresh();

 

만약 LoadAction을 수행 시 Parameter가 필요한 경우라면 LoadParams에 JavaScript의 함수 호출을 설정하면 된다.

@(Html.DevExtreme().DataGrid()
    .ID("targetDataGrid")
    .DataSource(ds => ds.Mvc()
        .Controller("Orders")
        .LoadAction("GetOrdersByDate")
        .LoadParams(new { orderDate = new JS("getDateBoxValue") })
    )
    .Columns(cols => {
        cols.Add().DataField("OrderId");
        cols.Add().DataField("OrderDate");
        // ...
    })
)

<script type="text/javascript">
    function getDateBoxValue() {
        return $("#orderDate").dxDateBox("option", "text");
    }

    function refreshGrid() {
        $("#targetDataGrid").dxDataGrid("refresh");
    }
</script>

위와 같이 하게 되면 LoadAction을 수행 시 JavaScript의 getDataBoxValue 함수를 실행시켜 Return 값을 Parameter 값으로 사용할 수 있다.

 

refresh 행위에 대한 성공, 실패에 대한 처리가 필요하다면 아래 코드를 사용한다.

var dataGrid = $("#dataGridContainer").dxDataGrid("instance");
dataGrid.refresh()
    .done(function() {
        // ...
    })
    .fail(function(error) {
        // ...
    });

 

[참고 사이트]

https://docs.devexpress.com/AspNetCore/401020/devextreme-based-controls/concepts/bind-controls-to-data/api-controllers

API Controllers | ASP.NET Core Controls | DevExpress Documentation

Documentation: DevExtreme - JavaScript Data Grid Methods (devexpress.com)

Documentation: DevExtreme - JavaScript Data Grid Methods