In-place Edit Grid with Read-only Programmatic fields

[Saul]

Kendo UI Version: 2018.3.1017

Jquery: 2.2.0

Hi there,

I have managed to solve this issue but the solution was a bit of a mess. So I needed to have some columns in an in-place batch edit grid to be calculated as the user changed each column. These columns are non-editable i.e. with .Editable(false) in the Model.  

I ended up using the change event to subscribe my Javascript method as below 

 .Events(events => events.Change("calculateJSMethod"))

 

Then in that function had :

function calculateJSMethod(e) {

                e.preventDefault();

                $("#myGridID").data("kendoGrid").refresh();

      var item = e.items[0];

 

[Saul]

sorry the above posted before i could cancel and i don't see the edit.  - so the JS function is 

<p>function calculateJSMethod(e) {
   e.preventDefault();
  $("#myGridID").data("kendoGrid").refresh();
   var item = e.items[0];
   if (item.total >= 26 )
      item.output = "Result of function";
}

 

But then i found the refresh was losing the users focused field and scroll position so ended up declaring global variables and using both the Edit event and DataBound as follows :

 

   .Events(events => events.Edit("EditEventJSFunction").DataBound("dataBoundJsFunction"))

        function EditEventJSFunction(e) {

            var current = e.sender.current() || [];
            if (current.length > 0) {
                    lastEditedCellIndex = current.index();
                    lastEditedRowIndex = current.parent().index();
                    // set scrolling so its less jarring to the user as the row is sometimes shown at the bottom
                    // regardless of where it starts on the user's screen
                    lastScrollTop = $('.k-grid-content.k-auto-scrollable').scrollTop();
                    lastScrollLeft = $('.k-grid-content.k-auto-scrollable').scrollLeft();

            }

}

        function dataBoundJsFunction(e) {
            if (!isNaN(lastEditedCellIndex ) && lastEditedCellIndex != null && lastEditedRowIndex !=null) {
                e.sender.current(e.sender.tbody.children().eq(lastEditedRowIndex ).children().eq(lastEditedCellIndex ));
                $('.k-grid-content.k-auto-scrollable').scrollTop(lastScrollTop);
                $('.k-grid-content.k-auto-scrollable').scrollLeft(lastScrollLeft);
            }
        }

 

Should all this be necessary? The original issue seem to be the programmatic setting of non-editable columns within the browse but then that forces the need to refresh which then forces the need to figure out the users focus. 

Apologies if this doesn't constitute ASP.NET MVC. I thought it might though as the grid is being created in ASP.NET and all the columns (including the read-only programmatic ones) need to be sent to a controller method. 

Thanks for any help given!

Saul

 

 

[Tsvetomir]

Hi Saul,

I have investigated the provided code snippets and I assume that the Editable setting is set to false at a data source level, am I correct? If so, the grid's cell can get updated with new value but it will not be actually marked as "dirty" (edited) in the data source. 

If you would like to disable editing of a certain column, use the Editable setting for the specific column. Since it accepts a JavaScript function name, declare the function to always return false. 

columns.Bound(p => p.UnitsInStock).Editable("returnFalse");

function returnFalse() {
    return false;
}

When calling the refresh method of the grid, it gets refreshed, hence, the scroll is positioned at the starting point. However, it is recommended to reduce the use of the refresh() method and here is an example in which it will not be needed the additional events which get and set the scroll position. Also, the value will be automatically updated in the grid:

.DataSource(dataSource => dataSource
     .Events(ev=>ev.Change("calculateJSMethod"))

function calculateJSMethod(e) {
    var grid = $("#grid").getKendoGrid();
    grid.editable.options.model.set("UnitsInStock", 22222)
}

Since the grid is still in edit mode, the editable widget is initialized. Via its options access the currently edited model and update its value via the set() method.


Kind regards,
Tsvetomir
Progress Telerik

[Saul]

Hi Tsvetomir,

Yes exactly, I was setting the editable in the DataSource and had not realized you could set it in the columns and as a JS function! That was extremely helpful and as you said I was able to then remove the need to refresh when setting the value and also therefore not need to set the scroll positions. 

The only question I had is there any difference using the parameter passed to set the event instead of using the model in the getKendoGrid api you used. i.e. instead of 

grid.editable.options.model.set("UnitsInStock", 22222)

using:

function calculateJSMethod(e) {
    e.items[0].set("UnitsInStock", 22222);

This seemed to work and the updated values were sent to the controller action method - are there potential drawbacks of doing it this way or are they same? 

 

Thank you so much again this is really helpful!

[Tsvetomir]

Hi Saul,

The crucial part of this particular case would be the use of the set() method since it works with a kendo.data.Model. The way of getting reference to the model would mainly depend on your personal preferences. The way you suggest would also work since e.items[0] will correspond to a dataItem.


Best regards,
Tsvetomir
Progress Telerik