Kendo UI MVC。如何更新网格并在 $('#Grid').data('kendoGrid').dataSource.read() 中添加新值

Question

我需要通过调用

更新数据库中的数据后更新网格

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

我需要使用当前 DateTime 更新网格，但网格正在使用 DateTimePicker() 中存在的时间进行更新

如何将时间更改为当前时间？

我的网格

@(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")) 
    ) 
)

当我更新 Grid 函数时 "ReadRequestData" 被调用

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

在此函数中 "date" 的值是从 DateTimePicker

填充的

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

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"))
)

函数 onRequestEnd(e) 的代码

function onRequestEnd(e) {

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

我需要在内联编辑后更新多个列，但自动仅更新已更改的列。我还需要更新根据更改的列计算的列。

Answer 1

首先，使用Sync事件，而不是RequestEnd事件。此外，当您调用 DataSource 的 read() 方法时，会调用 ReadRequestData 函数来获取日期并将其传递给您的 ExchangeRate_Read 操作。但是，在数据更新后，您不需要该日期。因此，您可以清除 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();
}

现在，在您的 ExchangeRate_Read 操作中，您可以使用当前日期，以防从视图传递的日期为空。

Kendo UI MVC。如何更新网格并在 $('#Grid').data('kendoGrid').dataSource.read() 中添加新值

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

kendo-ui

kendo-grid

kendo-asp.net-mvc