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.

TreeView Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

110707 Aug 21,2013 06:55 PM Sep 2,2013 05:26 AM JavaScript 7
loading
Tags: ejTreeView
Thomas Kiehl
Asked On August 21, 2013 06:55 PM

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

Yogeshwaran [Syncfusion]
Replied On August 22, 2013 08:47 AM

 

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


Thomas Kiehl
Replied On August 22, 2013 10:15 AM

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?

Yogeshwaran [Syncfusion]
Replied On August 23, 2013 06:56 AM

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


Thomas Kiehl
Replied On August 23, 2013 03:58 PM

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?

Yogeshwaran [Syncfusion]
Replied On August 26, 2013 02:40 AM

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


Thomas Kiehl
Replied On August 30, 2013 12:13 PM

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?

Yogeshwaran [Syncfusion]
Replied On September 2, 2013 05:26 AM

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


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.

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.

;