I've been asked to evaluate IgniteUI, and so far, each way I turn, nothing quite works correctly.
(And this is for a library our company would have to pay for, rather than tried'n'tested third party libraries which do just work..)
So, so far, it hasn't gone well.
And, I'm sorry, but your documentation is scarce. Can you direct me to a real working Angular example, which doesn't bind directly to some pre-loaded hardcoded Northwind JSON data ?
My first task, let's try binding a <ig-hierarchical-grid> control to some Angular data.
What I've found is that if you have an Angular controller, which (at some point, very soon) is going to load data from some web service, but, when the page first loads, then its set to null..
$scope.ListOfClients = null;
then the <ig-hierarchical-grid> will not work with auto-generate-layout="true" attribute.
It'll just display a blank grid, and even once you've set a value to this $scope variable, nothing you can say, do or data-bind to it will change this.
However... (sigh)... if you have a controller, and you set some initial value for that $scope variable, then the <ig-hierarchical-grid> control will work with auto-generate-layout="true"
So, in my Angular controller, if I set the default value to:
$scope.ListOfClients = JSON.parse('[{"DOB":"2015-08-24","First Name":"Mike","LastName":"Gledhill","ID":1234, "Children" : [{"Name":"Jade", "Age":7}, {"Name":"Naomi", "Age":5}]}]');
...and have the grid defined like this...
<ig-hierarchical-grid id="hierarchicalGridAngular"data-source="ListOfClients"defaultchildrendataproperty="Children"autogeneratecolumns="true"auto-generate-layout="true"></ig-hierarchical-grid>
... then... well... it will generate the column headers for the first level of data.
But then it'll ignore any further levels of data.
More importantly, if I then load some real data from a web service, and update this "$scope.ListOfClients" variable... well, it'll do absolutely nothing.
Even if my AngularJS controller calls some JavaScript code to do this...
function UpdateGrid() {
// This gets called from the AngularJS controller, when the web service has loaded the hierarchical data. // This is as close to "binding" the AngularJS $scope data to a <ig-hierarchical-grid> as I could get...
$("#hierarchicalGridAngular").igHierarchicalGrid("dataBind");
}
... then absolutely nothing changes in the grid.
So, if my webpage contains this...
{{ ListOfClients }}
... I can see the updated data (loaded from the web service), but nothing I can do will update what's shown in the igHierarchicalGrid.
Seriously guys, you need some decent examples.
Hello Alex,
Let me know if you need further assistance regarding your question.
Best regards,Martin PavlovInfragistics, Inc.
To start with the igHierarchicalGrid doesn't support one/two-way data binding in Angular (for reference see: https://github.com/IgniteUI/igniteui-angular and http://www.igniteui.com/help/using-ignite-ui-with-angularjs). This means that binding it to a scope variable will not make it synchronize automatically which is probably what you want.
Talking about the samples… this sample: http://igniteui.github.io/igniteui-angular/samples/igHierarchicalGrid.html basically sums up the igHierarchicalGrid data binding functionality in AngularJS. If you want to bind to a remote service you'll have to use $("#hierarchicalGridAngular").igHierarchicalGrid("option", "dataSource", $scope.ListOfClients); at runtime, but keep in mind that you need to manually declare columns and layouts (automatic generation of columns and layouts happens at grid creation). I'm attaching a working sample demonstrating the possible data binding scenarios of igHierarchicalGrid in AngularJS app.
Looking at your code snippet I see that there are some misspelled options. That's the reason that you don't see data for the second layout. The correct code should look like this:
<ig-hierarchical-grid id="hierarchicalGridAngular"
data-source="ListOfClients"
default-children-data-property="Children"
auto-generate-columns="true"
auto-generate-layouts="true">
</ig-hierarchical-grid>
Hope this helps, Martin Pavlov Infragistics, Inc.