Refresh Grid

[FreakParticipant]

Hello team,

I am binding a grid using JSON data and after updating the data in the grid, I want to refresh the grid. Is their any method like updatebounddata to refresh grid? And one more thing, when the grid is loading their is no ‘loading’ spinner displayed. How can I fix this?

Thanks,
Freak

[DimitarParticipant]

Hello Freak,

There is a method called updatebounddata in jqxGrid’s API which updates the bound data and refreshes the grid.

As for the “loading” element, if your data is not very large, the grid may be loading too quickly for it to display. You may programmatically call showloadelement to display it if you wish.

Best Regards,
Dimitar

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

[FreakParticipant]

Hi,

I am calling updatebounddata as $scope.settings.apply(‘updatebounddata’) but the grid data is not updated. Can you provide API reference for angualr js?

Thanks,
Freak

[DimitarParticipant]

Hi Freak,

You are correctly calling the grid method in the Angular environment. For more options, please refer to the help topic jQWidgets Integration with AngularJS, section Invoking Methods.

Please make sure that you actually need the updatebounddata method – it is useful when the data source has been updated and you wish the grid to reflect those changes. Is this what you require?

Best Regards,
Dimitar

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

[bobmazzoParticipant]

I have the same situation as Freak. Specifically in my case, the init grid rendering is fine because it’s first binding hard-coded json data. No problem here.
Then, I present a modal window for the user to make some data parameter selections, after which I submit to the server. The server returns the required data, and I parse it accordingly prior to binding it back to the treegrid’s datasource.
ex/ after data comes back from server…

`var myModel = $rootScope.reptGrid.modelDef;
myModel[“localData”] = $rootScope.reptGrid.aggrResults;
var dataAdapter = new $.jqx.dataAdapter(myModel);

$scope.result.dataModel.treeGridOptions.source = dataAdapter;
$scope.result.dataModel.treeGridOptions.columns = colDefs;

$modalInstance.close($scope.result);`

Once I return to the main directive, I make an attempt to call the jqw apply() method :

`modalInstance.result.then(
function (result) {
widget.dataModel.widgetScope.treeGridOptions.apply();
//widget.dataModel.widgetScope.treeGridOptions.source.dataBind(); // ALSO TRIED THIS, BUT IT DOES NOT WORK
}
);`

I’ve combed through your docs but I still can’t get it to work.

I’ve even tried to download 3.7 from your download page, but the jqx treegrid crashes angular left and right !

Your advice is greatly appreciated guys….

regards,
Bob

[Peter StoevKeymaster]

Hi Bob,

You can send us jsfiddle.net sample if you experience issues. treeGrid.source.dataBind will not work because the source does not have method called dataBind. widget.dataModel.widgetScope.treeGridOptions.apply() – there is also no such thing. “apply” if options are defined expects method name and method parameters. No issue with TreeGrid in AngularJS – http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/treegrid.htm?arctic

Best Regards,
Peter Stoev

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

[bobmazzoParticipant]

Hi Peter,
I’m experiencing an issue only trying to rebind an updated data source to the treegrid. In other words, the initial rendering if fine; however, after making a round trip to the server for new data, I would like to re-render the treegrid with the updated data. Can you provide specific advice ?

further details:

If I set a breakpoint in the front end, I can view the “source” object which contains the dataAdapter :

widget.dataModel.widgetScope.treeGridOptions.source
i.jqx.dataAdapter {_source: Object, _options: Object, records: Array[0], _downloadComplete: Array[0], _bindingUpdate: Array[0]…}_

So I was looking for a way to “rebind” the data to the treegrid, and I do in fact see a “databind” object. However, it does nothing.

Your own documentation says that the settings object is extended with refresh and apply methods (see http://www.jqwidgets.com/jquery-widgets-documentation/documentation/angularjs/angularjs.htm); however I now see that it does need specific parameters.

So on my treegrid I have:

<div id=”treeGrid” jqx-tree-grid jqx-instance=”treegrid” jqx-settings=”treeGridOptions”></div>

then in my controller I assign the dataAdapter and the column definitions like this :

$scope.result.dataModel.treeGridOptions.source = dataAdapter;
$scope.result.dataModel.treeGridOptions.columns = colDefs;

so I was expecting to have access to the refresh method (i.e. `$scope.result.dataModel.treeGridOptions.refresh([‘width’, ‘height’])’ )

Am I using in the wrong way?

I was following your jqx-combo-box example at the link I posted :

$scope.comboBoxSettings.refresh([‘width’, ‘height’]);

[bobmazzoParticipant]

I’ve set up a jsfiddle based on your demo, but having trouble getting it running.

http://jsfiddle.net/robertmazzo/41meqkeg/

Your help is appreciated.

[Peter StoevKeymaster]

Hi bobmazzo,

How is this sample different from our online and working one: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/treegrid.htm?arctic
I wrote you about “apply” and “dataBind”. I did not wrote you about “refresh”. “refresh” refreshes property values, not the widget itself. jqxTreeGrid has “updateBoundData” method – it’s used for re-binding it using the same data source. If you want to set new source, you should set its “source” property to a new data source.

Best Regards,
Peter Stoev

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

[bobmazzoParticipant]

Hi Peter,
I would like to know if you have your demos in a jsfiddle state ready to go. I’ve tried to copy your demo code into a new jsfiddle, but can’t get it working.

And with regards to refresh(), I thought that it would re-render the widget based on this statement in your docs. Please excuse me if I misunderstand certain things in the docs :

The purpose of the "refresh" method is to refresh the widget manually after you changed values in the settings object. Invoking "refresh" without arguments will update all widget settings...

I’ll try the updateBoundData method instead.

thanks,
Bob

[bobmazzoParticipant]

Hi Peter,
I found this jsfiddle by way of the api page:

I’d like to now implement this in the angular version: $("#treeGrid").jqxTreeGrid('updateBoundData'); but it just returns undefined in my own code.

Can you help me with that ? Any online angular based samples you can point me to ?

thx,
Bob

[Peter StoevKeymaster]

Hi Bob,

We have many online AngularJS Examples – http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/index.htm

Best Regards,
Peter Stoev

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

[bobmazzoParticipant]

Hi Freak,
How did it go with that refresh ? Did the apply method work for you ?

[Author]

Posts