Updating a grid...

[Michael Baas]

First: I aplogize for the ugly code-formatting, but I didn't see how to get a "code-layout" on the forum...

I have two grids in an app: the first shows various "master"-records, the second grid is supposed to have details for the selected master. The 2nd grid is initialised w/o data with this call:

$(function(){$("#portfoliogrid").ejGrid({

allowSorting:true,

columns:[{field:"ID",headerText:"ID"},{field:"Name",headerText:"Name"},{field:"PurchaseDate",headerText:"Purchase Date"},{field:"Shares",headerText:"Shares"},{field:"Price",headerText:"Price"},{field:"Value",headerText:"Value"}],dataSource:portfoliogrid_data,editSettings:{allowEditing: true, allowAdding: true, allowDeleting: true},toolbarSettings:{ showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel]}});});

When the user then selects a record in 1st grid, I'm capturing the rowSelected-Event and in my response, I do this to fill the 2nd grid:

var gobj = $("#portfoliogrid").data("ejGrid");gobj.dataSource([["JNJ","Johnson & Johnson","29-Apr-2016",2000,"     $110.75"," $221,500.00"],["V","Visa"," 1-Apr-2016",400,"      $76.69","  $30,676.00"],["MCD","McDonald's","10-Aug-2016",1400,"     $109.23"," $152,922.00"],["XOM","ExxonMobil"," 5-Apr-2016",1700,"      $71.68"," $121,856.00"],["NKE","Nike","25-Apr-2016",1000,"      $47.74","  $47,740.00"],["WMT","Wal-Mart","13-Jun-2016",1000,"      $69.66","  $69,660.00"],["MMM","3M"," 9-Mar-2016",800,"     $183.11"," $146,488.00"],["UNH","UnitedHealth Group","23-Mar-2016",600,"     $120.84","  $72,504.00"],["GS","Goldman Sachs","12-Feb-2016",800,"     $163.28"," $130,624.00"],["AXP","American Express"," 8-Sep-2016",1500,"      $57.27","  $85,905.00"],["MSFT","Microsoft","30-May-2016",1000,"      $63.05","  $63,050.00"],["GE","General Electric"," 8-Dec-2015",1000,"      $34.62","  $34,620.00"]]);gobj.refreshContent(true);

The 2nd grid is then resized to the correct number of rows - but there's no data in it, all cells remain blank. What am I missing here?

[Prasanna Kumar Viswanathan]

Hi Michael,

Thanks for contacting Syncfusion support.

We created a sample in javascript and in this sample we have two syncfusion grid as Master/Detail relationship. In Master Grid we bind the rowSelected event of ejGrid and this event will be triggered after the row is selected. In this event we able to get row data in the arguments and using ej.DataManager we able to filter data according to the employeeID field. The filtered data has been bound to the detail grid using dataSource method.

We did not face any issue at our end while updating the dataSource for the Detail Grid.

Find the code example and sample:

$("#MasterGrid").ejGrid({

// the datasource "window.employeeData" is referred from templatelocaldata.js

dataSource: ej.DataManager(window.employeeData).executeLocal(ej.Query().take(5)),

columns: [

-------------------------------

],

rowSelected: function (args) {

var employeeID = args.data.EmployeeID;

var detaildata = ej.DataManager(window.gridData).executeLocal(ej.Query().where("EmployeeID", ej.FilterOperators.equal, employeeID, false).take(10));

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

gridObj.dataSource(ej.DataManager(detaildata.slice(0, 5)));

},

});

$("#DetailGrid").ejGrid({

dataSource: null,

// the datasource "window.gridData" is referred from jsondata.min.js

dataSource: ej.DataManager(window.gridData).executeLocal(ej.Query().take(10)),

allowPaging: false,

columns: [

--------------------------

]

});

Sample: http://www.syncfusion.com/downloads/support/forum/126186/ze/Html_Encode_Feature1778306732

In the provided code example, we found that you have bound the array of string array to the Detail Grid.

gobj.dataSource([["JNJ","Johnson & Johnson","29-Apr-2016",2000," $110.75"," $221,500.00"],["V","Visa"," 1-Apr

--------------------------"]])

For the Grid we have to bound the array of JSON object.

"[{"OrderID":10258,"CustomerID":"ERNSH",ShipRegion":null,"ShipPostalCode":"8010",07-31T18:30:00.000Z -------}]"

So, we suspect that it may be the root cause of the issue that the detail grid is filled with empty data.

We also found that you have used refreshContent method to refresh the grid content.The dataSource method of ejGrid is used to refresh the grid with new dataSource. So, the refreshContent method is not required to refresh the grid.

If you still face any issues, please share the following details

1. Did you face any console error in the sample? If yes, provide the stackrace of an issue.

2. Provide the complete code snippetof master and detail grid rendering

3. If possible, replicate the issue in the attached sample.

4. Essential Studio Version details.

Regards,

Prasanna Kumar N.S.V

[Michael Baas]

Thanks very much. I realize I made a few faults and was able to fix'em all with the excellent help from your post! :-)

[Prasanna Kumar Viswanathan]

Hi Michael, 

We are happy to hear that your issue has been resolved. 

Please let us know if you need any further assistance. 

Regards, 

Prasanna Kumar N.S.V