We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Editing Detail Grid using JSON data returned from Controller Action

Thread ID:

Created:

Updated:

Platform:

Replies:

116429 May 23,2014 03:03 PM UTC May 28,2014 06:24 AM UTC ASP.NET MVC 3
loading
Tags: Grid
Rick Thompson
Asked On May 23, 2014 03:03 PM UTC

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 [Syncfusion]
Replied On May 26, 2014 12:42 PM UTC

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
Replied On May 27, 2014 08:47 PM UTC

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 [Syncfusion]
Replied On May 28, 2014 06:24 AM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;