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. Image for the cookie policy date

TreeView Grid

Hello,

I am trying to build a tree view type grid using the Syncfusion grid control. The dataset I am working with contains both the parent and child objects. The parent data displays fine, but I am having trouble referencing the child object through the grids detailData property. Below is a sample of the data I am working with. There can be many lines for any given case. 
 {
  "caseId": "500M0000003A9IPIA0",
  "caseNumber": "00296645",
  "caseStatus": "In Process",
  "contactName": "Thomas Kiehl",
  "contactEmail": "thomas.kiehl@itron.com",
  "reasonForReturn": "TEST",
  "productName": "CENTRON-POLY",
  "caseCreatedDate": "2013-06-20T15:37:12Z",
  "RMALines": [
   {
    "lineId": "a11M0000000jCmQIAU",
    "lineName": "Line-248733",
    "lineProductModel": "CENTRON-POLY",
    "lineProductLine": "Meters",
    "lineStatus": "In Transit",
    "lineSerialNumber": null,
    "lineProblemStatement": "TEST",
    "lineRepairDescription": null,
    "lineCreatedDate": "2013-06-20T15:37:47Z",
    "lineReceivedDate": "0001-01-01T00:00:00",
    "lineShippedDate": "0001-01-01T00:00:00"
   }
  ]
 }

Here is my grid control
$("#Grid").ejGrid({
            allowPaging: true,
            pageSettings: { pageSize: 10 },
            dataSource: dataManger,
            toolBar: { allowToolBar: true, toolBarItems: [ej.Grid.toolBarItems.Search] },
            columns: [
                        { field: "caseNumber", headerText: "Return #", key: true, isIdentity: true, textAlign: ej.textAlign.Left, width: 75 },
                        { field: "caseStatus", headerText: "Status", width: 95 },
                        { field: "productName", headerText: "Product", width: 125 },
                        { field: "reasonForReturn", headerText: "Reason For Return", textAlign: ej.textAlign.Center, width: 325 },
                        { field: "contactName", headerText: "Contact" },
                        { field: "caseCreatedDate", headerText: "Created Date", format: "{0:dd-MMM-yyyy}" },
                        { field: "RMALines" }
            ],
            detailTemplate: "#returnLineContents",
            detailData: "returnLineData",
            detailExpand: "detailEvent",
            detailCollapse: "detailEvent",
            load: "onLoad",
            create: "onComplete"
        });

 function returnLineData(e) {
        var data = ej.DataManager(e.model.columns[6]());
        e.templateDetail.find("#detailGrid").ejGrid({
            dataSource: data,
            allowSelection: false,
            columns: [
                { field: "lineName", key: true, headerTest: "Line" },
                { field: "lineStatus", headerText: "Status" },
                { field: "lineSerialNumber", headerText: "Serial Number" },
                { field: "lineProblemStatement", headerText: "Problem Statement" },
                { field: "lineReceivedDate", headerText: "Received Date", format: "{0:dd-MMM-yyyy}" },
                { field: "lineShippedDate", headerText: "Shipped Date", format: "{0:dd-MMM-yyyy}" }
            ]
        });
    }

Any help would be greatly appreciated.

Thanks,
Thomas

7 Replies

YO Yogeshwaran Syncfusion Team August 22, 2013 12:47 PM UTC

 

Hi Thomas,

 

Thanks for using Syncfusion products.

 

We have analysed the provided code snippet and found that data for child grid is not properly bound with grid. Please refer the below code snippet to retrieve data for child grid.

 

window.returnLineData=  function(e) {

     var data = ej.DataManager(this.getCurrentViewData()[e.templateDetail.index() - 1].RMALines);

     e.templateDetail.find("#detailGrid").ejGrid({

     . . . .

 }

For your convenience , we have created sample for your requirement with your provide code snippet.

 

childGrid.zip

 

Please let us know if you have any concerns.

 

Regards,

Yogesh R



TK Thomas Kiehl August 22, 2013 02:15 PM UTC

Thank you,Yogesh, this is exactly what I was looking for. I have a follow up question. Is it possible to have controls for the parent grid include the child grid, namely the Search toolBar property. It is currently only searching parent data. Is it possible to also have it search the child records from the same control?


YO Yogeshwaran Syncfusion Team August 23, 2013 10:56 AM UTC

Hi Thomas,

As per your requirement, we have provided work around to search parent and child grid data using parent toolbar can achieved by extending our original search operation. Please refer below code of extended search operation.

   [ javascript]

       $.extend(ej.JsonAdaptor.prototype, {

               onSearch: function (ds, query, e) {

                   if (!ds || !ds.length) return ds;

 

                   if (e.fieldNames.length === 0) {

                       ej.pvt.getFieldList(ds[0], e.fieldNames);

                   }

 

                   return ds.filter(function (obj) {

                       for (var j = 0; j < e.fieldNames.length; j++) {

                           if (e.fieldNames[j] == "RMALines") {

                               var childds = ej.pvt.getObject(e.fieldNames[j], obj);

                               for (key in childds[0]) {

                                   if (e.comparer.call(childds[0],childds[0][key], e.searchKey, e.ignoreCase))

                                       return true;

                               }

                           } // added for workaround

                           if (e.comparer.call(obj, ej.pvt.getObject(e.fieldNames[j], obj), e.searchKey, e.ignoreCase))

                               return true;

                       }

                       return false;

                   });

               }

        });

 

Also please modify the data retrieval for child grid like below . this is for accurate processing of current row data.

window.returnLineData = function (e) {

    var data = this.getCurrentViewData()[$(this.getGridRows()).not(".detailrow").index(e.templateDetail.prev())].RMALines;

For your convenience, we have created below sample.

childGrid.zip

Please let us know if you have any concerns.

Regards,

Yogesh R



TK Thomas Kiehl August 23, 2013 07:58 PM UTC

Thank you again for your help. I am having trouble with the solution you provided. When I try to debug, I get the following message:

JavaScript critical error at line 1, column 1 in http://cdn.syncfusion.com/js/ej.widgets.all-latest.min.js

SCRIPT1014: Invalid character

I tried implementing this into my project and it doesn't seem to be including line level data in the search as well. Any ideas?


YO Yogeshwaran Syncfusion Team August 26, 2013 06:40 AM UTC

Hi Thomas,

 

Sorry for the inconvenience caused . we are unable to reproduce the reported script issue but reported issue seems to be problem with your browser security mode. please load your needed script from local sample like below.

 

<script src="scripts/jquery-1.10.1.min.js"></script>

<script src="scripts/jsrender.min.js"></script>

<script src="scripts/jquery.globalize.min.js"></script>

<script src="scripts/ej.widgets.all.min.js"></script>

<link rel='nofollow' href="http://cdn.syncfusion.com/11.2/js/flat-azure/ej.widgets.all.min.css" rel="stylesheet" />

 

For your convenience, we have created sample with local scripts.  

 

childGrid.zip

 

note: if your issue is not resolved from above solution then please check the below link.

 

http://stackoverflow.com/questions/14834261/getting-script1014-invalid-character-in-ie-from-local-js-file

 

http://stackoverflow.com/questions/6261256/script1014-invalid-character

 

please let us know if you have any concerns.

 

Regards,

Yogesh R



TK Thomas Kiehl August 30, 2013 04:13 PM UTC

Thank you for the reply. I have been able to get the code working. However, after several consecutive searches, I get the following exception in ej.widgets.all.min.js:

Unhandled exception at line 10, column 695036 in http://localhost:59334/scripts/ej.widgets.all.min.js

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

Here is the code that is highlighted
this._searchCount=this._searchString.length?h.count:null

It doesn't happen all the time, but seems to happen more frequently when I use my entire dataset versus the sample I provided above. But, it does happen in both cases. Any ideas?


YO Yogeshwaran Syncfusion Team September 2, 2013 09:26 AM UTC

Hi Thomas, 

please remove below code at grid initialize . this is the cause of the exception.

$("#Grid").ejGrid({

               allowPaging: true,

               pageSettings: { pageSize: 10 },

               dataSource: data,

               allowSearching: true,

               toolBar: { allowToolBar: true, toolBarItems: ["search"] },

               columns: [

                           { field: "caseNumber", headerText: "Return #", key: true, isIdentity: true, textAlign: ej.textAlign.Left, width: 75 },

                           { field: "caseStatus", headerText: "Status", width: 95 },

                           { field: "productName", headerText: "Product", width: 125 },

                           { field: "reasonForReturn", headerText: "Reason For Return", textAlign: ej.textAlign.Center, width: 325 },

                           { field: "contactName", headerText: "Contact" },

                           { field: "caseCreatedDate", headerText: "Created Date", format: "{0:dd-MMM-yyyy}" },

                           { field: "RMALines" }

               ],

               detailTemplate: "#Gridtemplate",

               detailData: "returnLineData",

               actionBegin: function (args) {

                   if (!ej.isNullOrUndefined(args.keyValue))

                       this.element.find(".e-grid").ejGrid("sendSearchRequest", args.keyValue);

               }

 

           });

 

For your convenience, we have attached sample.

childGrid.zip 

please let us know if you have any concerns.

Regards,

Yogesh R


Loader.
Live Chat Icon For mobile
Up arrow icon