Editing Detail Grid using JSON data returned from Controller Action

[Rick Thompson]

I have three grids on my form where grid A is the master table, grid B contains data related to A, and grid C contains data related to B. (I'm using generic names here, obviously.)

My goal is to select a record in grid A, which then shows related records in B. When I select a record in B related records are shown in C. It is grid C that I need to perform CRUD operations.

I have everything working except editing grid C. Grid B is updated by handling the RowSelected event from grid A and similarly Grid C is updated by handling the RowSelected event from grid B. 

For grid A the datasource and the RowSelected event hook looks like:

@(Html.EJ().Grid<.Models.AView>("AGrid")

...

.Datasource((IEnumerable<object>)ViewBag.AData)

.ClientSideEvents(eve => { eve.RowSelected("ARowSelected"); })

...

For grid B the datasource and the RowSelected event hook looks like:

@(Html.EJ().Grid<.Models.BView>("BGrid")

...

.Datasource((IEnumerable<object>)ViewBag.BData)

.ClientSideEvents(eve => { eve.RowSelected("BRowSelected"); })

...

For grid C the datasource looks like:

@(Html.EJ().Grid<.Models.CView>("CGrid")

...

.Datasource((IEnumerable<object>)ViewBag.CData)

...

For grid C I also have .EditOption ... and .ToolBar... so I can do editing either by double click or from the toolbar.

The event for handling a Row B selection is as follows (A is similar):

  $(function () {

    window.BRowSelected = function (args) {

      // This is the primary key for the record selected in B

      var bID = args.currentData.ID;

      // Controller action to get data for C

      var url = '@Url.Action("GetCData", "Home")';

      // Use getJSON to get C data passing as a parameter the ID from B, which

      // is the parent for related C records

      $.getJSON(url, { parentID: bID })

      .success(function (data) {

        var gridObj = $("#CGrid").ejGrid("instance");

        gridObj.model.dataSource = ej.DataManager(data);

        $("#CGrid").ejGrid("refreshGridContent");

      })

      .fail(function (d, textStatus, error) {

        alert("getJSON failed, status: " + textStatus + ", error: " + error)

      });

    }

  });

My controller action GetCData returns type JsonResult.

As I said all is working except for editing. I can get into edit mode without an issue, but when I save I get the following error:

Unhandled exception at line 10, column 832937 in http://localhost:49339/Scripts/ej.web.all.min.js

0x800a138f - JavaScript runtime error: Unable to get property 'promise' of undefined or null reference

I believe the problem is related to changing the way data is entered into the grid because I can edit grid A (as a test) without a problem, but with grid A I never load/reload it using a getJSON call like I do with B and C.

[Ragavee U S]

Hi Rick

 

Thanks for using Syncfusion Products.

 

We have analyzed your issue and suspect that the cause of the issue is, the obtained JSON data in the success event is passed to the ej.DataManager and assigned to the grid model datasource. Instead of that, pass the JSON to the method dataSource and in this method itself the refreshGridContent method is executed.

 

Please refer the below code snippet:

<script type="text/javascript">

window.rowBSelected = function (args) {

            var shipcountry = args.currentData.ShipCountry;

            var url = '@Url.Action("GetCData", "Home")';

            $.getJSON(url, { ID: shipcountry })

  .success(function (data) {     

      var gridObj = $("#ChildGrid").ejGrid("instance");

      gridObj.dataSource(data);

  })

  .fail(function (d, textStatus, error) {

      alert("getJSON failed, status: " + textStatus + ", error: " + error)

  });

        }

</script>

 

For your convenience, we have created a simple sample and the same can be downloaded from the attachment.

 

Please let us know if you need any further assistance.

 

Regards

Ragavee U S

Attachment: Sampl116429_7cb820be.zip

[Rick Thompson]

Hi Rick

 

Thanks for using Syncfusion Products.

 

We have analyzed your issue and suspect that the cause of the issue is, the obtained JSON data in the success event is passed to the ej.DataManager and assigned to the grid model datasource. Instead of that, pass the JSON to the method dataSource and in this method itself the refreshGridContent method is executed.

 

Please refer the below code snippet:

<script type="text/javascript">

window.rowBSelected = function (args) {

            var shipcountry = args.currentData.ShipCountry;

            var url = '@Url.Action("GetCData", "Home")';

            $.getJSON(url, { ID: shipcountry })

  .success(function (data) {     

      var gridObj = $("#ChildGrid").ejGrid("instance");

      gridObj.dataSource(data);

  })

  .fail(function (d, textStatus, error) {

      alert("getJSON failed, status: " + textStatus + ", error: " + error)

  });

        }

</script>

 

For your convenience, we have created a simple sample and the same can be downloaded from the attachment.

 

Please let us know if you need any further assistance.

 

Regards

Ragavee U S

Attachment: Sampl116429_7cb820be.zip

The recommended change works great, thanks!

I thought I had posted a reply prior to this, I must not have hit submit. In my response I asked about a way to get data posted back. I see that I can subscribe to the ActionComplete and look for requestType "save" to know if a row has been edited and thus I have the information necessary to post back to the server. In the event I simply call a controller action (getJSON / post) and pass the information as JSON.

Thanks,

Rick

[Ragavee U S]

Hi Rick

 

Thanks for your update.

 

If you have any issues in the future, please get back to us. We will be happy to assist you.

 

Regards

Ragavee U S