kendo datagrid update event is not fired when grouped on a column

186 views Asked by At

I have a kendo data grid grouped default by a column and I want to edit the grid inline. I don't want the user to group by any other column. While the default grouping works fine, the update event is not fired and the control doesn't go the controller's inline update method. Can you please check where I'm going wrong. Below is the code:

 @(Html.Kendo().Grid(Model)
    .Name("grdTimesheets")
    .Columns(columns =>
    {
        columns.Bound(p => p.EmployeeId).Hidden(true);
        columns.Bound(p => p.FirstName);
        columns.Bound(p => p.Monday.Hour).Title("Monday")
            .EditorTemplateName("TimesheetMonday");
        columns.Command(command =>
        {
            command.Edit();
            command.Destroy();
            command.Custom("Add").Text(" ").Click("AddNewTimesheet");
        });
    })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Groupable(false)
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(p => p.EmployeeId);
            model.Field(p => p.FirstName).Editable(false);
        })
        .PageSize(20)
        .Update(update => update.Action("EditingInline_Update", "Timesheet"))
        .Destroy(destroy => destroy.Action("EditingInline_Destroy", "Timesheet"))
        .Group(d=>d.Add(f=>f.FirstName))
    )

If I comment out the last line ".Group(d=>d.Add(f=>f.FirstName))", everything works fine but the default grouping goes off.

1

There are 1 answers

0
Nvy On

I know that its a bit late for an answer but I will just leave this here in case that anybody else is having the same problem. Once you group by any column the grid will not fire ".Update(update => update.Action("EditingInline_Update", "Timesheet"))". In order to fix this you would need to add OnEditEvent for the grid and in the javascript function to attach an event to the textbox/dropdown or whatever control you have there. Sample below:

.Events(events => events.Edit("grid_edit")) this is in the view

javascript:

function grid_edit(e) {
    var grid = $('#grid').data('kendoGrid');
    var cell = e.container;
    var area = cell.find("textarea")

    area.on("blur", function() {
        // update ur entries here
        var areaVal = cell.find("textarea").val(); // this is the new value
        // call some ajax to update the value and in the success call grid.dataSource.sync(); to refresh the grid
    });}

Also you would need to remove your .Update() for the DataSource because its no longer needed.