Kendo UI MVC. How to update Grid and add new value in $('#Grid').data('kendoGrid').dataSource.read()

Question

I need to update Grid after I update data in the database by calling

$('#ExchangeGrid').data('kendoGrid').dataSource.read();

I need to update grid with current DateTime but grid is updating with time that are present in DateTimePicker()

How can I change the time to current?

My Grid

@(Html.Kendo().Grid<Internal.Models.ExchangeRateData>()
.Name("ExchangeGrid") 
.Columns(columns =>
{
    columns.Bound(p => p.originCurrencyFormated);
    columns.Bound(p => p.targetCurrencyFormated);
    columns.Bound(p => p.rate);
    columns.Bound(p => p.percentage) ;  
    columns.Command(commands => { commands.Edit(); }); 
    columns.Bound(p => p.adjustedRate) ;

}) 
.Editable(edit =>
{
    edit.Mode(GridEditMode.InLine); 
})
.DataSource(dataSource => dataSource
    .Ajax()
    .Batch(true)
    .ServerOperation(false)
    .Model(model =>
    {
        model.Id(item => item.targetCurrency); 
    })
    .Events(events =>
    {
        events.RequestEnd("onRequestEnd");  
    })
    .Read(read => read.Action("ExchangeRate_Read", "MyController").Data("ReadRequestData"))
    .Update(c => c.Action("Currencies_Update", "MyControllor")) 
    ) 
)

When I update Grid function "ReadRequestData" is called

.Read(read => read.Action("ExchangeRate_Read", "MyController").Data("ReadRequestData"))

In this function value of "date" is populated from DateTimePicker

function ReadRequestData() {
    return { 
        "date": $('#dateList').val()
    };
}

Code for DateTimePicker:

@(Html.Kendo().DateTimePicker()
  .Name("dateList")
  .Start(CalendarView.Month) 
  .Format("dddd MMMM dd, yyyy H:mm:ss")
  .Value(DateTime.Now) 
  .Events(e => e.Change("changeDate"))
)

Code for function onRequestEnd(e)

function onRequestEnd(e) {

    if (e.type == "update") { 
        $('#ExchangeGrid').data('kendoGrid').dataSource.read();
    }
}

I need to update several columns after InLine Edit but automatically only column that have been change is updated. I also need to update the column that are calculated from the column that are changed.

http://stackoverflow.com/questions/21863449/how-can-i-refresh-the-grid-after-i-edit-the-kendo-ui-grid — Steve Greene, May 31 '16 at 16:20

score 1 · Accepted Answer · answered May 31 '16 at 19:15

First of all, use the Sync event, not the RequestEnd event. Also, when you call the read() method of the DataSource, the ReadRequestData function is called to get a date and pass it to your ExchangeRate_Read action. But, after the data is updated you don't need that date. So, you can just clear the DateTimePicker.

.DataSource(dataSource => dataSource
    .Ajax()
    .Batch(true)
    .ServerOperation(false)
    .Model(model =>
    {
        model.Id(item => item.targetCurrency); 
    })
    .Events(events =>
    {
        events.Sync("onSync");  
    })
    .Read(read => read.Action("ExchangeRate_Read", "MyController").Data("ReadRequestData"))
    .Update(c => c.Action("Currencies_Update", "MyControllor")) 
    ) 
)      

function onSync(e) {
    $("#dateList").data("kendoDateTimePicker").value('');
    $('#ExchangeGrid').data('kendoGrid').dataSource.read();
}

Now, in your ExchangeRate_Read action you can use the current date in case the date passed from the view is null.

Thank you. I have also added code for "data" in Controller: public ActionResult ExchangeRate_Read([DataSourceRequest] DataSourceRequest request, string currencyName = "usd", string date = null) { . . . if (date == null || date == string.Empty) { DateTime dateNow = DateTime.Now; date = dateNow.ToString(); } — фымышонок, May 31 '16 at 20:23
No, you have not. You have just up-voted my answer. You need to click on the check mark to mark it as answered. — ataravati, Jun 03 '16 at 03:21

Kendo UI MVC. How to update Grid and add new value in $('#Grid').data('kendoGrid').dataSource.read()

1 Answers1