This is a migrated thread and some comments may be shown as answers.

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

8 Answers 646 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tausif
Top achievements
Rank 1
Tausif asked on 26 Nov 2014, 03:02 PM
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"))
        
    )
)



8 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 28 Nov 2014, 10:51 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Tausif
Top achievements
Rank 1
answered on 28 Nov 2014, 11:01 AM
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










0
Alexander Popov
Telerik team
answered on 28 Nov 2014, 11:57 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Tausif
Top achievements
Rank 1
answered on 28 Nov 2014, 12:24 PM
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);
            }
        });
    }
0
Alexander Popov
Telerik team
answered on 02 Dec 2014, 11:29 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Tausif
Top achievements
Rank 1
answered on 02 Dec 2014, 11:56 AM
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>                   
                        
0
Tausif
Top achievements
Rank 1
answered on 02 Dec 2014, 12:34 PM
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.
0
Accepted
Alexander Popov
Telerik team
answered on 04 Dec 2014, 09:14 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Tausif
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Tausif
Top achievements
Rank 1
Share this question
or