Angular JS TreeGrid Settings with Ajax call

[srinath4everParticipant]

Hi,

I’m using Grid and TreeGrid tables for showing data in Flat and Hierarchy. These two components are used in Angular JS way where I have settings object for each table on $scope. For TreeGrid, we wanted to have parent/child lazy loading which is why I have enabled ‘Virtual Mode with Ajax’ feature.

I have two individual methods to create Grid and TreeGrids, inside where I will create settings objects and assign respective sources. In UI, I have a toggle button which toggles between Flat and Hierarchy(by calling respective methods on Controller).

Now let’s come to the problem. For the first time when I call method to create TreeGrid, it is creating properly by making a Ajax call and rendering the table with all parent rows. But when I switch to Grid and again comes back to TreeGrid then the table shows old data only i.e TreeGrid doesn’t make a new Ajax call and get new parent rows even though I call same method to create TreeGrid again. I would like to load the table whenever I switch the views.

Can anybody please look in to below code snippets and help me. Thanks in advance!

UI:
<jqx-tree-grid jqx-instance='hierarchyGrid' jqx-create="createHierarchyGrid" jqx-settings="hierarchyDataGridSettings"></jqx-tree-grid>

Controller:

var hierarchySource = {
				dataType: "json",
		                dataFields: gridDataFields,
		                hierarchy:
		                {
		                    keyDataField: { name: 'id' },
		                    parentDataField: { name: 'parentID' }
		                },
		                id: 'id',
		                url: "application/employees/list",
		                type: 'POST',
				data : {'view':'hierarchy', 'expandedEmployeeId':''}
			};

			this.createMonitorHierarchyGrid = function() {
			    	var tableSettings = {
					virtualModeCreateRecords: function (expandedRecord, done) {
			                    var dataAdapter = new $.jqx.dataAdapter(hierarchySource,
			                        {
			                        	processData : function(data){
			                        		processedData = data;
			                        	},
			                            formatData: function (data) {
			                            	if(expandedRecord){
			                            		data.expandedEmployeeId = expandedRecord.id;
			                            	}
			                                return data;
			                            },
			                            loadComplete: function() {
							done(dataAdapter.records);
			                            },
			                            loadError: function (xhr, status, error) {
			                                done(false);
			                                throw new Error("application/employees/list : " + error.toString());
			                            },
			                            contentType : 'application/json; charset=utf-8',
			                            beforeSend : function (jqXHR, settings) {
			                            },
			                            downloadComplete : function (edata, textStatus, jqXHR) {
			                            	edata = edata._object.employeesList;
			                            	return edata;
			                            }
			                        }
			                    );
			                    dataAdapter.dataBind();
			                },
			                virtualModeRecordCreating: function (record) {
			                    // record is creating.
			                },
			           	sortable : true,
					columnsResize : true,
			                columns: gridColumns
			    		};

				    	$scope.hierarchyDataGridSettings = tableSettings;
					$scope.createHierarchyGrid = true;
			    	};

this.createEmployeeFlatGrid = function() {
// logic to construct flat grid
};

[Peter StoevKeymaster]

Hi srinath4ever,

Your TreeGrid loads data on demand. This means that you can’t dynamically change it”s data source because it does not have data source. You supply the data within virtualModeCreateRecords and you cannot change the data after you load it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[srinath4everParticipant]

Thanks Peter

[Author]

Posts