I'm working on an application that will use the Grid to display data and allow a user to modify the data using CRUD methods within the grid. It is connected to a DataSource that sends the data to a MVC4 controller method to perform some calculations.
My grid has InCell editing mode and contains code that will call an AJAX function as soon as the updated cell loses focus. There is no update button. The AJAX function calls an MVC4 controller method.
When i click on a cell in the first row and update it's value, the AJAX function calls the controller method. the calculations take place correctly. the grid looks fine.
but when i click on a cell in any row except the first row and update it's value, the AJAX function calls the controller method. the calculations take place correctly. but the updated row is replaced by the first row. This happens for any row number. no exceptions.
But when I click on the grid "refresh" button, The grid values are readjusted and all the rows look good again with correct values.
I use the "datasource.Sync" event for my gridcell lost focus editing.
I thought that the Sync event will automatically perform the Read operation for grid. is it not so?
My code is as follows: @(Html.MyGrid<ViewModels.ReportCalc>("AddNewPayrollGrid", AddBtnAccess, "Add Payroll Details", EditBtnAccess, GridEditMode.InCell)
.Columns(columns =>
{
columns.Bound(p => p.PayrollClassSuffixid).Hidden();
columns.Bound(p => p.PayrollCode).Title("Class Code").Width(60);
columns.Bound(p => p.Description).Title("Description").Width(250);
columns.Bound(p => p.PayrollPeriodDate).Title("Payroll Period").Width(100);
columns.Bound(p => p.NumberofFulltimeEmployees).ClientTemplate("<div style= 'text-align:right;'>#=NumberofFulltimeEmployees#</div>").Title("Number Of<Br>Full time<Br>Employees").Width(60);
columns.Bound(p => p.NumberofParttimeEmployees).ClientTemplate("<div style= 'text-align:right;'>#=NumberofParttimeEmployees#</div>").Title("Number Of<Br>Part time <Br>Employees").Width(60);
columns.Bound(p => p.NumberOfEvents).ClientTemplate("<div style= 'text-align:right;'>#=NumberOfEvents#</div>").Title("Number of<Br> Events").Width(60);
columns.Bound(p => p.Payrollamount).Format("{0:C}").ClientTemplate("<div style= 'text-align:right;'>#=Payrollamount#</div>").Title("Payroll($)").Width(60);
columns.Bound(p => p.CoverageDays).ClientTemplate("<div style= 'text-align:right;'>#=CoverageDays#</div>").Title("Coverage<Br>Days").Width(60);
columns.Bound(p => p.Premium).ClientTemplate("<div style= 'text-align:right;'>#=Premium#</div>").Title("Premium($)").Width(100);
})
.Pageable()
.Sortable()
.Navigatable()
.TableHtmlAttributes(new { @class = "KendogridTable" })
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.PageSize(5)
.Batch(true)
.Model(model =>
{
model.Id(p => p.PayrollClassSuffixid);
model.Field(payr => payr.PayrollCode).Editable(false);
model.Field(payr => payr.Description).Editable(false);
model.Field(payr => payr.PayrollPeriodDate).Editable(false);
model.Field(payr => payr.InterimRate).Editable(false);
model.Field(payr => payr.Premium).Editable(false);
})
.Read(read => read.Action("Payroll_Read", "MyController", new { PN= some value}))
.Create(create => create.Action("Payroll_Create", "MyController").Data("PN"))
.Update(update => update.Action("Payroll_Update", "MyController", new {PolicyNumber = Model.PolicyNumber}))
)
.Events(ev => ev.Save(@"function(e){
setTimeout(function(){
$('#AddNewPayrollGrid').data('kendoGrid').dataSource.sync()
}
)}"))
.Events(e => e.DataBound("onDataBinding"))
)
can anyone tell me what I am doing wrong here.
Also, I tried adding the RequestEnd event to the grid as follows:
.Events(e => e.RequestEnd("onRequestEndForGrid"))
but the view fails to recognise the RequestEnd event. I get a message saying "GridEventBuilder does not contain a definition for RequestEnd". Can you tell me if I am missing anything here.
My grid has InCell editing mode and contains code that will call an AJAX function as soon as the updated cell loses focus. There is no update button. The AJAX function calls an MVC4 controller method.
When i click on a cell in the first row and update it's value, the AJAX function calls the controller method. the calculations take place correctly. the grid looks fine.
but when i click on a cell in any row except the first row and update it's value, the AJAX function calls the controller method. the calculations take place correctly. but the updated row is replaced by the first row. This happens for any row number. no exceptions.
But when I click on the grid "refresh" button, The grid values are readjusted and all the rows look good again with correct values.
I use the "datasource.Sync" event for my gridcell lost focus editing.
I thought that the Sync event will automatically perform the Read operation for grid. is it not so?
My code is as follows: @(Html.MyGrid<ViewModels.ReportCalc>("AddNewPayrollGrid", AddBtnAccess, "Add Payroll Details", EditBtnAccess, GridEditMode.InCell)
.Columns(columns =>
{
columns.Bound(p => p.PayrollClassSuffixid).Hidden();
columns.Bound(p => p.PayrollCode).Title("Class Code").Width(60);
columns.Bound(p => p.Description).Title("Description").Width(250);
columns.Bound(p => p.PayrollPeriodDate).Title("Payroll Period").Width(100);
columns.Bound(p => p.NumberofFulltimeEmployees).ClientTemplate("<div style= 'text-align:right;'>#=NumberofFulltimeEmployees#</div>").Title("Number Of<Br>Full time<Br>Employees").Width(60);
columns.Bound(p => p.NumberofParttimeEmployees).ClientTemplate("<div style= 'text-align:right;'>#=NumberofParttimeEmployees#</div>").Title("Number Of<Br>Part time <Br>Employees").Width(60);
columns.Bound(p => p.NumberOfEvents).ClientTemplate("<div style= 'text-align:right;'>#=NumberOfEvents#</div>").Title("Number of<Br> Events").Width(60);
columns.Bound(p => p.Payrollamount).Format("{0:C}").ClientTemplate("<div style= 'text-align:right;'>#=Payrollamount#</div>").Title("Payroll($)").Width(60);
columns.Bound(p => p.CoverageDays).ClientTemplate("<div style= 'text-align:right;'>#=CoverageDays#</div>").Title("Coverage<Br>Days").Width(60);
columns.Bound(p => p.Premium).ClientTemplate("<div style= 'text-align:right;'>#=Premium#</div>").Title("Premium($)").Width(100);
})
.Pageable()
.Sortable()
.Navigatable()
.TableHtmlAttributes(new { @class = "KendogridTable" })
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.PageSize(5)
.Batch(true)
.Model(model =>
{
model.Id(p => p.PayrollClassSuffixid);
model.Field(payr => payr.PayrollCode).Editable(false);
model.Field(payr => payr.Description).Editable(false);
model.Field(payr => payr.PayrollPeriodDate).Editable(false);
model.Field(payr => payr.InterimRate).Editable(false);
model.Field(payr => payr.Premium).Editable(false);
})
.Read(read => read.Action("Payroll_Read", "MyController", new { PN= some value}))
.Create(create => create.Action("Payroll_Create", "MyController").Data("PN"))
.Update(update => update.Action("Payroll_Update", "MyController", new {PolicyNumber = Model.PolicyNumber}))
)
.Events(ev => ev.Save(@"function(e){
setTimeout(function(){
$('#AddNewPayrollGrid').data('kendoGrid').dataSource.sync()
}
)}"))
.Events(e => e.DataBound("onDataBinding"))
)
can anyone tell me what I am doing wrong here.
Also, I tried adding the RequestEnd event to the grid as follows:
.Events(e => e.RequestEnd("onRequestEndForGrid"))
but the view fails to recognise the RequestEnd event. I get a message saying "GridEventBuilder does not contain a definition for RequestEnd". Can you tell me if I am missing anything here.