Custom editing pass row data item to javascript function and then update columns

[Tausif]

Hi,

I have a couple of columns on a grid, some are editable and others are not. I want to be able to click in cell and change its value and then tab out of the cell.
Once I have tabbed out of a cell I want to be able to get that cell row and then pass that to a controller to perform a calculation and then return and update the grid. I need to pass the data item back to the controller I do not want to use the aggregates sum, count etc as my calculations are more complicated.

I have seen the following example:

http://www.telerik.com/forums/working-with-bound-data-on-client-side

But this doesn't really work as I expected, can you explain how I can achieve the above, I'm using Telerik MVC Grid. Thanks

Below is the code I'm trying to get to work.

Would it be possible to have a sample project?


@model IEnumerable<InlineEditing.Models.ProductViewModel>

  @(Html.Kendo().Grid(Model)
    .Name("gridCustom")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductID).Width(120);
        columns.Bound(p => p.ProductName).Width(400);
        columns.Bound(p => p.UnitPrice).Width(120);
        columns.Bound(p => p.UnitsInStock).Width(120);
        columns.Bound(p => p.Total).Width(120);
    })
    //.ToolBar(toolBar =>
    //    {
    //        toolBar.Create();
    //        toolBar.Save();
    //    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Sortable()
    .Scrollable()
    .Navigatable()
    //.HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Change("Edit"))
        .Model(model =>
        {
            model.Id(p => p.ProductID);
            model.Field(p => p.ProductID).Editable(false);
            model.Field(p => p.Total).Editable(false);
        })
        .PageSize(20)
        .Read(read => read.Action("EditingCustom_Read", "Home"))
        .Create(create => create.Action("EditingCustom_Create", "Home"))
        .Update(update => update.Action("EditingCustom_Update", "Home"))
        .Destroy(destroy => destroy.Action("EditingCustom_Destroy", "Home"))
        
    )
)

[Alexander Popov]

Hello Tausif,

This could be done by subscribing to the Grid's save event, which is triggered when closing the modified cell. For example: 

function onSave(e){
  $.ajax({
    url: "/someController",
    data: e.values,
    success: function(response) {
      e.model.set(response.fieldName, response.value);
    }
  });
}

Regards,
Alexander Popov
Telerik

 

 

[Tausif]

Hi Alexander,

I don't see the save event when I create a event i.e.:

  .Events(events => events.save

or 

 .Destroy(update => update.Action("EditingInline_Destroy", "Home"))
.Save 

There is no option for save?

How do you run the save event when you tab out of a cell?

Sorry I might be missing something but its unclear to me.

Thanks

[Alexander Popov]

Hi Tausif,

The save event is part of the Grid's configuration and should not be mistaken with the DataSource's events. For example: 

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("Grid")
    .Events(e=>e.Save("onSave"))
    .DataSource(ds=>ds.Ajax()
        .Events(..)
    )

Regards,
Alexander Popov
Telerik

 

 

[Tausif]

Hi,

Got the function to run when saving but the e.values is undefined when I pass this to the controller any ideas why?

function onSave(e) {
      
        console.log(e.values);

        $.ajax({
            type: "POST",
            url: "Home/Save",
            data: e.values,
            success: function (response) {
                e.model.set(response.fieldName, response.value);
            }
        });
    }

[Alexander Popov]

Hello Tausif,

I am not exactly sure why the e.values argument is undefined, it seems to work as expected in this example. Would you please check it and let me know if I am doing something differently? 

Regards,
Alexander Popov
Telerik

 

 

[Tausif]

Hi,

The only difference I can see is with the data: {json: JSON.stringify(e.values)}.

The e.values still null looks as if its not getting passed through correctly.

My code is below, can you tell if I'm doing something incorrectly?

@model IEnumerable<InlineEditing.Models.ProductViewModel>
<div>
@(Html.Kendo().Grid(Model)
    .Name("grid")
         .Events(e => e.Save("onSave"))
         
         .Columns(columns =>
            {
                //columns.AutoGenerate(true);
                columns.Bound(p => p.ProductID);
                columns.Bound(p => p.ProductName);
                columns.Bound(p => p.UnitPrice).Width(100);
                columns.Bound(p => p.UnitsInStock).Width(100);
                columns.Bound(p => p.Total).Width(100);
                columns.Command(command => { command.Edit(); });
                columns.Command(command => { command.Edit(); command.Destroy(); }).Width(190);
            })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
    
        //.HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events.Error("error_handler"))

        //.Model(model => model.Id(p => p.ProductID))
        .Model(model =>
        {
            model.Id(p => p.ProductID);
            model.Field(p => p.Total).Editable(false);


        })
        .Create(update => update.Action("EditingInline_Create", "Home"))
        .Read(read => read.Action("EditingInline_Read", "Home"))
        .Update(update => update.Action("EditingInline_Update", "Home")).Events(events => events.RequestEnd("FinishedUpdating"))
        .Destroy(update => update.Action("EditingInline_Destroy", "Home"))


    )
)

</div>
<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function() {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

    function FinishedUpdating(e)
    {
        if (e.type === "update") {
            $('#GridPartialDiv').load('/Home/GridPartial');
        }
    }

    function onSave(e) {
      
        console.log( e.values);

        $.ajax({
            type: "POST",
            url: "Home/Save",
            data: { json: JSON.stringify(e.values) },
            success: function (response) {
                e.model.set(response.fieldName, response.value);
            }
        });
    }



</script>                   
                        

[Tausif]

the values are in e.model not e.values, I can see what i'm changing now just need to pass this to the controller.

[Alexander Popov]

Hello again Tausif,

The e.values argument is available when the Grid uses InCell editing, as suggested by the code in your first post. I've noticed that your latest configuration uses InLine edit mode, which explains why the e.values argument is undefined. 

Regards,
Alexander Popov
Telerik