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

Updating a grid...

Thread ID:

Created:

Updated:

Platform:

Replies:

126186 Sep 29,2016 10:34 AM UTC Oct 3,2016 04:06 AM UTC JavaScript 3
loading
Tags: ejGrid
Michael Baas
Asked On September 29, 2016 10:34 AM UTC

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 [Syncfusion]
Replied On September 30, 2016 10:48 AM UTC

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 snippet of 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
Replied On October 1, 2016 05:00 PM UTC

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 [Syncfusion]
Replied On October 3, 2016 04:06 AM UTC

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 


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

;