Editable Grid Cell - OnChange

[Joey]

Hi, I'm instantiating an editable grid via the MVC wrappers (example code below).  What I want to do is respond to a change in the Amount (or other fields) with some custom client-side logic that will update the total (Amount * Unit Price = Total).

What's the best way to set this up?  Do I need an editor template or something?  Can someone point me to an example?

@(Html.Kendo().Grid<MaterialEstimateQuantityApplicationModel>()
                  .Name("MaaterialEstimateQuantityApplicationGrid")
                  .Columns(columns =>
                      {
                          columns.Bound(p => p.Amount);
                          columns.Bound(p => p.QuantityAmount);
                          columns.Bound(p => p.MaterialMarkup);
                          columns.Bound(p => p.UnitPrice);
                          columns.Bound(p => p.Total);
                          columns.Bound(p => p.MaterialEstimationId).Visible(false);
                          columns.Bound(p => p.ItemQuantityId).Visible(false);
                      })
                  .Editable(editable => editable.Mode(GridEditMode.InCell))
                    //.Pageable()
                  .Navigatable()
                    //.Sortable()
                  .Scrollable()
                  .DataSource(dataSource => dataSource
                                                .Ajax()
                                                .Batch(true)
                                                .PageSize(20)
                                                .ServerOperation(false)
                                                .Events(events => events.Error("error_handler"))
                                                .Model(model => model.Id(p => p.Id))
                                                .Read("EditingLaborItemsCreate_Read", "Estimate", new { estimateId = Model.EstimateId })
                                                .Update("EditingLaborItemsCreate_Update", "Estimate")
                                                .Create("EditingLaborItemsCreate_Create", "Estimate")

                  ).

[Dimiter Madjarov]

Hello Joey,


To achieve this you could use the save event of the Grid, which is fired when a data item is saved. When InCell edit mode is used, as in the current case, it receives a values object as event argument parameter, which contains the new values entered by the user. You could use them to update the total property. Here is a JS Bin example, which demonstrates this.

I wish you a great day!

Regards,
Dimiter Madjarov
Telerik

[Joey]

This seems to be close.  I've updated my code and the function is firing but not updating the total column.

I think the reason is you have this:

field: "Total",
        editor: function(cont, options) {
            $("<span>" + options.model.Total + "</span>").appendTo(cont);
        }}]


How can I do this via the MVC wrappers.  I see an EditorTemplate but I don't think they are the same.

Thanks.

-Joe

[Dimiter Madjarov]

Hi Joey,


Regarding the editor template question, you could take a look at the following documentation page, which describes how to define a custom one in the MVC Grid. Nevertheless I am not sure that this is the reason for the current issue. The property in the model should still be updated, regardless of it's editor. If you are still experiencing the issue, please send me a sample project, where it is reproducing, so I could assist you further.

Regards,
Dimiter Madjarov
Telerik

[Joey]

The problem was that it was marked with [Editable(false)] in my model class.  When removing that attribute, everything works but the cell is editable, which I don't want as it's display only.

With the Editable attribute removed I then implemented a custom editor that wraps the value in a span as your javascript function did.  

Works great, however whenever the cell has focus it reverts to it's original value....

My editor looks like this :

@model object

<span>@Model.ToString()</span>

so it's pretty obvious why when clicking on or tabbing to that cell that it flips to this to show the original value.  How can I fix this?

[Dimiter Madjarov]

Hello Joey,


You are correct that this approach won't work in the current case, since it will just display the value from the server. In Ajax binding the editor template is serialized once with the models default values and is reused on the client. As a solution, I would suggest you to use MVVM binding, since it is used internally by the Grid.
E.g.

<span data-bind="text:Total"></span>

Regards,
Dimiter Madjarov
Telerik

[Veena]

Hi Dimiter,

 

I have inline grid. Can you please give me the list and order events that are triggered from when user clicks edit to clicks update on an inline grid. That would be a great help.

Thanks,

veena

[Boyan Dimitrov]

Hello Veena,

 

Indeed we can provide a a list with the events: 

 

   1. The edit event is fired when user clicks on the edit button. 

   2. When user changes a value of the model and the editor element (input for example) losses its focus the change event of the Kendo UI DataSource is fired with action "itemchange". 

 

   3. When the update is clicked the save event of the Kendo UI Grid will be fired. 

 

After that the Kendo UI DataSource will make a request to the server. 

 

Regards,
Boyan Dimitrov
Telerik