I'm new to programming and my mentor is asking these question regarding the above mentioned Ignite grid (igHierarchicalGrid). We're testing your Ignite UI products with our JSON web services:
Looks to us like the referenced Grid only allows for two levels of drilling, is that true?
Here's a second more in depth question regarding the Hierarchical Grid and any answer/comments or suggestions for other ways to skin this cat would be greatly appreciated. Thanks!!
How do you implement an "On row select" event, when using the IgniteUI library with AngularJS?
IgniteUI
AngularJS
Even the IgniteUI-AngularJS GitHub page, which contains a demo, doesn't show how to do this.
Here's the jQuery method of doing it (from this webpage)
$("#grid").on("iggridselectionactiverowchanged", function (evt, ui) { var message = "iggridselectionactiverowchanged"; apiViewer.log(message); });
...but I want to know how to capture this event from my AngularJS controller (and keeping the amount of jQuery to a minimum).
Is it possible ?
I also tried the standard way of adding a ng-model attribute to this control, and trying to put a watchon this variable, but even ng-model seems to be ignored by this control.
ng-model
watch
Hi Alex Grape,
Thank you for posting into the Infragistics community.
igHierarchicalGrid allows more two levels of hierarchy. There are two choices to configure it:
Both of them can be configured with the angular directives.
For your second question, directive for that event is looking like this:
<features> <feature name="Selection" event-active-row-changed="activeRowChangedHandler"></feature></features>
And activeRowChangedHandler should be defined in the scope. It has to be similar to this code snippet:
$scope.activeRowChangedHandler = function(evt, ui) { alert("activeRowChanged fired");}
If you have more questions on this matter please don't hesitate to ask.
Hi Deyan,
This was really useful information.
But, I'm sorry, I'm still not convinced that "Auto generate column layout" works on the igHierarchicalGrid though.
I have a JSON web service, returning "3 levels" of data (three nested arrays, basically).
What I would like to do is have an Angular controller, load the JSON data, set it to some variable (eg $scope.myData) and for igHierarchicalGrid to magically display all the data.
What I actually have to do is:
1. Load the JSON data in my Angular controller:
$http.get('http://localhost:15021/Service1.svc/getAllClientsAndTreatments') .success(function (data) {
$scope.ListOfClientsAndTreatments = data; UpdateGrid(data);
});
2. Get my Angular controller to call an "UpdateGrid()" JavaScript function in my webpage to set a local JavaScript variable with the JSON data:
function UpdateGrid(JSONdata) { // 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... //ListOfClients = JSONdata;
$("#hierarchicalGridAngular").igHierarchicalGrid({ dataSource: ListOfClients, autoGenerateLayouts: true }); }
3. In my HTML, I tried having just this:
<ig-hierarchical-grid id="hierarchicalGridAngular" width="100%" data-source="ListOfClients " auto-generate-layout="true"> </ig-hierarchical-grid>
...but it just doesn't work.
I found that I must define each of the columns I want to display within that <ig-hierarchical-grid> control.
With a regular <ig-grid>, no problem, "auto-generate-layout" will generate the columns for me.
But with <ig-hierarchical-grid>, nope, it doesn't display any data, any column headings, etc.
Honestly, I'm pretty disappointed with IgniteUI.I really thought I'd be able to bind directly from my Angular controller to your controls, but it seems very "hit and miss".
And there's barely any Angular examples on the website, showing how to do basic functionality.
Even your "Ignite UI + AngularJS: Now in Preview" webpage has chunks of code missing.
http://es.infragistics.com/community/blogs/craig_shoemaker/archive/2014/05/01/ignite-ui-angularjs-now-in-preview.aspx
"For instance, in order to use the igGrid you can use the following syntax to declare a very bare-bones grid on the page:
(Blank space)
...where northwind is an object array that exists on the controller's $scope and could be a result of an async request, but in our samples its just local data for now. "
northwind
$scope
Can I suggest you have a look at your own Angular sample, remove the <columns> section, change auto-generate-layouts to true... and see what happens...?
https://github.com/IgniteUI/igniteui-angular/blob/master/samples/igHierarchicalGrid.html
Btw, for the directive for handling row selections, "event-active-row-changed"... where would I find this in your documentation ?
Even if I Google this command, I get zero results.
I wish there was a more thorough example of using Angular with IgniteIT.
Best regards,
Mike
Hi Michael,
Thank you for the detailed post and the wealth of feedback provided.
Indeed, in the present version of the component, there is no option to supply automatic generation of columns when working with Angular.
This behavior, however, makes a very nice feature suggestion, which I have already forwarded to our developers. While I do understand your motivation for making such a request, I want to assure you that our team has always worked hard to constantly improve each component, based on customer and community feedback, demand and technological changes. The improved support for Angular will be no exception. This attention to community feedback is what is driving the product offering expansion in IgniteUI and is what differentiates the Suite from any free product. While I cannot commit to a definite timeframe for the discussed changes, I will be delighted to receive additional feedback from you regarding future versions of the component, specific use cases on your end and any possible challenges that you have faced.
> But, I'm sorry, I'm still not convinced that "Auto generate column layout" works on the igHierarchicalGrid though.
One last comment (after lots of investigation).
I was wrong, <ig-hierarchical-grid> does allow you to use "auto-generate-layouts = 'true'" but only if you cheat, and have the binded data ready to go, when the webpage first loads.
This is why Infragistic's demo works, as it binds to some hardcoded Northwind JSON data.
If you have a real world app, where an Angular controller contains a variable which is initially null, and then async'ly loads some JSON data from a web service, then this functionality won't work.
Your Angular variable will be set to the web service's JSON data, but as <ig-hierarchical-grid> doesn't support 1 or 2 way binding, the control will ignore it, and nothing will change on your webpage. It certainly won't attempt to generate any columns.
My (reluctant) solution was to write my own Angular directive to detect changes in the binded data, and recreate the <ig-hierarchical-grid> control from scratch when the data changes.
Once again, given its price tag (and the various free third-party solutions which are available), I'm pretty disappointed with IgniteUI.
This Angular integration is really pretty miserable.