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
Your answer here led us to the correct solution and took us to the next level for our POC and possible introduction to SOA here at our little company. Thank you so much. We have the subject grid up and working in test!!
I have one more question and please tell me if this question and igTreeGrid compare question should go into different posts. I'm new and want to follow the rules. OK, here's the question:
Can we cause the igHierarchicalGrid to allow us to EDIT the data in the drill into grids?
Thanks again. We're very happy to be moving forward again.
Thanks DeyanK. More soon on your reply here.
In the meantime, can you explain the difference between the igTreeGrid and the igHierarchicalgrid? Thanks. Alex.