How to Obtain Edited Grid Cell Value In Javascript

[Jeffrey Stone]

I am using a grid in batch edit mode (that supports filtering and grouping) and I am trying to access the value of a boolean column in javascript. If the user modifies the value I still only see the original value.

Here is a portion of the grid:

@(Html.EJ().Grid("Grid")
.Datasource(ds => ds.URL(@Url.Action("BatchDataSource","Reallocate")).BatchURL(@Url.Action("BatchUpdate","Reallocate")).Adaptor(AdaptorType.UrlAdaptor))
.EditSettings(edit => { edit.AllowEditing().EditMode(EditMode.Batch); })
.AllowFiltering()
.AllowGrouping(true)
.ShowColumnChooser()
.Columns(col =>
{
col.Field(r => r.IncludeInReallocation).TextAlign(TextAlign.Center).EditType(EditingType.Boolean).Add();
}))

Here is how I am trying to access the "IncludeInReallocation" field:

var gridInstance = $("#Grid").ejGrid("instance");
var data = $("#Grid").ejGrid("getCurrentViewData");
for (var i = 0; i < data.length; i++) {
   // this next line appears to be returning the original value - and not the value as modified by the user
   if (data[i].IncludeInReallocation) {
     // do stuff
   }
}

What I am trying to do is to allow the user to apply an operation to selected/checked rows in the grid. There is logic in the controller which is pre-selecting rows that need to be acted on (on the web page - the user can still check/uncheck rows as desired).

Regards, Jeff

[Gowthami V]

Hi Jeffrey,

Thanks for using Syncfusion products.

From your query and code example, we can understood that you want to access the edited data before saving the corresponding data.

The currentViewData gets updated once the data saved. To access the edited data when “Batch” editing, then we can use the method “getBatchChanges”. 

Refer to the below screenshot,



Refer to the below code example,

@(Html.EJ().Grid("Grid")

.Datasource(ds => ds.URL(@Url.Action("BatchDataSource", "Reallocate")).BatchURL(@Url.Action("BatchUpdate", "Reallocate")).Adaptor(AdaptorType.UrlAdaptor))

.EditSettings(edit => { edit.AllowEditing().EditMode(EditMode.Batch); })

.AllowFiltering()

.AllowGrouping(true)

.ShowColumnChooser()

.Columns(col =>

{

    col.Field(r => r.IncludeInReallocation).TextAlign(TextAlign.Center).EditType(EditingType.Boolean).Add();

}))

<script type="text/javascript">

    var gridInstance = $("#Grid").ejGrid("instance");

    var data = $("#Grid").ejGrid("getBatchChanges")["changed"];

    for (var i = 0; i < data.length; i++) {

                if (data[i].IncludeInReallocation) {

            // do stuff

        }

    }
    </script>

Refer to the Help document for more clarification about getBatchChanges method,

http://help.syncfusion.com/js/api/ejgrid#methods:getbatchchanges

If we misunderstood your requirement, please provide below details,

1.       Share the controller code where you have preselected the rows.

2.       In which scenario/event you are using the above code example.

3.       Code example if you are using any AJAX post for calling the controller method.

4.       Full code example used for rendering Grid.

Provided details will help to analyze and provide a solution as early as possible.

Regards,

Gowthami V.

[Jeffrey Stone]

Thanks for the quick response. You all do a great job!

Your solution didn't quite get to what I was looking for.  I was able to accomplish this by using: gridInstance._bulkEditCellDetails._data;  This appears to give me access to the filtered rows and to the data that either was returned from the server or, if the user has entered data then it provides the data entered by the user.

var gridInstance = $("#Grid").ejGrid("instance");

// the following line appears to provide access to the data that has & has not been edited by the user

var data = gridInstance._bulkEditCellDetails._data;

var totalAmount = 0;

var count = 0;

for (var i = 0; i < data.length; i++) {

if (data[i].IncludeInReallocation) {

totalAmount += data[i].EquityAmount;

count++;

}

}

if (count > 0) {

var averageAmount = Math.trunc(totalAmount / count);

for (var i = 0; i < data.length; i++) {

if (data[i].IncludeInReallocation) {

gridInstance.setCellValue(i, "DesiredEquityAmount", averageAmount);

}

}

}

Does this look like a good way to get at the data I am looking for?

Regards, Jeff

[Gowthami V]

Hi Jeffrey,

From the query “access to the filtered rows”, we suspect that you need to access the filtered data with bulk edited details. As per your code example, we can access the filtered data in current page but can’t get the data from the other pages.

If the above scenario is your requirement, then the mentioned code example can be used.

Else please let us know, if the requirement is to access all the filtered data at a time.

Provide above details which will help to analyze the requirement and provide a solution response as early as possible.

Regards,
Gowthami V.