jqxTreegrid – json data being returned from db but not being shown in grid

[nandkumar.pansare@gmail.comParticipant]

I have different tabs(account,source-profile,notes,nis,current-access,request-history) and each tab data is populate data using different widgets. one of the tab with name 'current-access' having tree-grid to populate the data. these tabs will be populate when i click on treegrid rows from other section of the page (rowSelect event). when my page loads first time then all the tabs loads correctly including current-access tab. but when i click on one of the rows of treegrid from other section then current-access tab it coming as blank.<strong>I saw in mozilla firebug and json response data is there but data is not populated inside grid</strong>. data is not populating when current-access tab is not active. when tab is active and and if i click on one of the rows from treegrid row from other section then data is showing on page

It looks like some binding issue with treegrid when tab is not active and only treegrid showing only column names with no data.
When i replace treegrid with normal grid then i am not getting any issues but i have to use treegrid to show hierarchy.

Code :

<strong>JSP code for treegrid of current-access tab :</strong>

  <ul id="ardTab" class="nav nav-tabs">
                        <li class="active"><a href="#accounts">ACCOUNTS</a>
                        <li><a href="#source-profile">SOURCE PROFILE</a></li>
                        <li><a href="#notes">NOTES</a></li>
                        <li><a href="#nis">NIS</a></li>
                        <li><a href="#current-access">CURRENT ACCESS</a></li>
                        <li><a href="#request-history">REQUEST HISTORY</a></li>
                      

  <div class="tab-pane" id="current-access">
        <strong><div id="currentAccessGrid"></div></strong>
  </div>

<strong>js code for current access tab : </strong>

 $.ajax({
            	type: "GET",
            	url: "userCurrentAccess/"+userAddBookId,
            	async: false,
            	cache: false,
            	contentType: "application/json; charset=utf-8",
            	dataType: "json",
            	success: function(data){
            		var userCurrentAccessSrcData = data;
            		 var sourceCurrentAccess = {
                             datatype: 'json',
                             datafields: [{name: 'name', type: 'string'},
                                          {name: 'id', type: 'number'},
                                          {name: 'dateAdded', type: 'string'},
                                          {name: 'status', type: 'string'},
                                          {name: 'parentKey', type: 'string'},
                                          {name: 'childKey', type: 'string'}
                             ],
                             hierarchy:
                             {
                                 keyDataField: { name: 'childKey' },
                                 parentDataField: { name: 'parentKey' }
                             },
                             id: 'childKey',
                             localData: userCurrentAccessSrcData,
                             cache: false
          			};
          				
            		 	 var dataAdapterCurrentAccess = new $.jqx.dataAdapter(sourceCurrentAccess, {
            		 	    loadError: function(xhr, status, error)
            		 	    {
            		 	        alert("error is " + error);
            		 	    }
            		 	 });
            		 	dataAdapterCurrentAccess.dataBind();
          				 $('#currentAccessGrid').on('bindingComplete', function (event) {
                         $("#currentAccessGrid").jqxTreeGrid('focus');
                     });
                     // create Tree Grid
                     $("#currentAccessGrid").jqxTreeGrid(
                     {
                         width:750,
                         source: dataAdapterCurrentAccess,
                        // autoheight: true,
          	    		//enablebrowserselection: true,
          	    		//editable: false,
          	    		//enabletooltips: true,
          	    		//altRows: true,        			
                           ready: function () {
                      	   $("#currentAccessGrid").jqxTreeGrid('expandRow', '2');
                           },
                           
                           columns: 
                  	   		 [{text: 'Name', datafield: 'name', width: 450, editable: false},
                                {text: 'Added On', datafield: 'dateAdded', width: 150, editable: false},
                                {text: 'Status', datafield: 'status', width: 150, editable: false}
                               ]
                     });
            	},
            	error: function(message){
            		//console.log("Error Message : "+message);
            	}
            });

[HristoParticipant]

Hello nandkumar.pansare@gmail.com,

It is important to initialize TreeGrid in the ‘initTabContent’.
Please, take a look this our demos:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/javascript-tabs-map.htm?light
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_and_tabs.htm?light
Do you have any error messages in the console?
Could you provide sample code with simple data to test locally?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[nandkumar.pansare@gmail.comParticipant]

I am not using jqxTab and using a normal tab which is not related to jqxWidget so could not use initTabContent
Also i am not getting any error in the  console and getting json data in console which is i am trying to bind to jqxTreeGrid

Here is my tabs related code

   <div>
                      <ul id="ardTab">
                        <li class="active"><a href="#accounts">ACCOUNTS</a>
                        <li><a href="#source-profile">SOURCE PROFILE</a></li>
                        <li><a href="#notes">NOTES</a></li>
                        <li><a href="#nis">NIS</a></li>
                        <li><a href="#current-access">CURRENT ACCESS</a></li>
                        <li><a href="#request-history">REQUEST HISTORY</a></li>
                      
                      <div id="ardTabContent" class="tab-content">

                         first tab div
                         second tab div

                         <div class="tab-pane" id="current-access">
                         	<div id="currentAccessGrid"></div>
                        </div>

                        fourth tab div
                   </div>  

I have two sections in page .. First section have treegrid populated rows and section section is detailed  section once i click on the any row from first section then the information will be populate in different tabs in second section .. this is happening correctly when my page loads but when i click on any row after that then current-access tab in second section is coming as blank which is having treeGrid

Here is the sample data which i received in console for current-access tab

[{"status":"Active","childKey":"Cap_31","id":31,"name":"Capability: ASESF"},{"parentKey":"Cap_31","childKey"
:"App_453","id":453,"name":"Database: ard"},{"status":"","dateAdded":"2013-12-04","requestId":183558
,"parentKey":"App_453","childKey":"Role_7609","id":7609,"name":"Role: public"},{"parentKey":"Cap_31"
,"childKey":"App_454","id":454,"name":"Database: ard2"},{"status":"","dateAdded":"2013-12-04","requestId"
:183558,"parentKey":"App_454","childKey":"Role_7610","id":7610,"name":"Role: public"},{"parentKey":"Cap_31"
,"childKey":"App_466","id":466,"name":"Database: code_approval"},{"status":"","dateAdded":"2013-12-04"
,"requestId":183558,"parentKey":"App_466","childKey":"Role_7622","id":7622,"name":"Role: public"},{"parentKey"
:"Cap_31","childKey":"App_502","id":502,"name":"Database: pir"},{"status":"","dateAdded":"2013-12-04"
,"requestId":183558,"parentKey":"App_502","childKey":"Role_7658","id":7658,"name":"Role: public"},{"status"
:"Active","childKey":"Cap_74","id":74,"name":"Capability: Event Engine: engineE1"},{"parentKey":"Cap_74"
,"childKey":"App_1538","id":1538,"name":"Application: Engine"},{"status":"","dateAdded":"2013-11-20"
,"requestId":182783,"parentKey":"App_1538","childKey":"Role_12340","id":12340,"name":"Role: Basic Access"
},{"status":"Active","childKey":"Cap_75","id":75,"name":"Capability: Event Engine: engineE2"},{"parentKey"
:"Cap_75","childKey":"App_1540","id":1540,"name":"Application: Engine"},{"status":"","dateAdded":"2013-11-20"
,"requestId":182784,"parentKey":"App_1540","childKey":"Role_12358","id":12358,"name":"Role: Basic Access"
},{"status":"\u003cspan style\u003d\"color:red\"\u003eExpired\u003c/span\u003e","childKey":"Cap_3","id"
:3,"name":"Capability: IDN Data Warehouse"},{"parentKey":"Cap_3","childKey":"App_35","id":35,"name":"Server
: IQA0"},{"status":"","dateAdded":"2015-07-21","requestId":18830,"parentKey":"App_35","childKey":"Role_274"
,"id":274,"name":"Group: cbo_user"},{"status":"Active","childKey":"Cap_8","id":8,"name":"Capability:
 IDN Portal"},{"parentKey":"Cap_8","childKey":"App_1","id":1,"name":"Application: ARD"},{"status":""
,"dateAdded":"2013-11-20","requestId":182861,"parentKey":"App_1","childKey":"Role_197","id":197,"name"
:"Role: ARD User"},{"parentKey":"Cap_8","childKey":"App_65","id":65,"name":"Application: Basic Access"
},{"status":"","dateAdded":"2013-11-19","requestId":182707,"parentKey":"App_65","childKey":"Role_448"
,"id":448,"name":"Role: Basic Access"},{"parentKey":"Cap_8","childKey":"App_90","id":90,"name":"Application
: Code Approval"},{"status":"","dateAdded":"2013-11-19","requestId":182707,"parentKey":"App_90","childKey"
:"Role_708","id":708,"name":"Role: Basic Access"},{"parentKey":"Cap_8","childKey":"App_84","id":84,"name"
:"Application: Production Install Requests"},{"status":"","dateAdded":"2013-11-19","requestId":182707
,"parentKey":"App_84","childKey":"Role_9123","id":9123,"name":"Role: BEC Team"},{"status":"Active","childKey"
:"Cap_15","id":15,"name":"Capability: IDN Wiki"},{"parentKey":"Cap_15","childKey":"App_162","id":162
,"name":"Application: IDN Wiki"},{"status":"","dateAdded":"2013-11-25","requestId":182996,"parentKey"
:"App_162","childKey":"Role_1284","id":1284,"name":"Role: Basic Access"},{"status":"\u003cspan style
\u003d\"color:red\"\u003e\u003c/span\u003e","childKey":"Cap_18","id":18,"name":"Capability: IDN-Wide
 Access"},{"status":"Active","childKey":"Cap_34","id":34,"name":"Capability: SPDMA544"},{"parentKey"
:"Cap_34","childKey":"App_785","id":785,"name":"Unix: Unix"},{"status":"Default Group","dateAdded":"2013-12-09"
,"requestId":183449,"parentKey":"App_785","childKey":"Role_8353","id":8353,"name":"Groups: idn"}]

[HristoParticipant]

Hello nandkumar.pansare@gmail.com,

We recommend to use our widgets and could give you answers about them.
Please, provide simple example but with whole code that demonstrate this issue. (better in https://www.jseditor.io/)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts