Hello Team,
I have tried using Hierarchical Grid control in angular2 App.
here is my plunker http://plnkr.co/edit/J7tFlm?p=preview
I wanted to interfere the child grid column creation and set some dynamic header text on band-1 and band-2.
I have few questions,
1) Could any one please help me to understand HOWTO intercept the child grid Creation?
2) is that possible to completely auto generate columns and then after creation and before rendering intercept the event and set hidden property for non-required columns?
Looking forward to your suggestion.
Thanks,
Jeetendra
Hi Jeetendra,
For the data exception, you are assigning the stringified version of your data to the grid's datasource. Our Angular components are expecting the datasource to be iterable for diffing so it is throwing an exception since the Angular DefaultIterableDiffer cannot iterate over a string. If you pass in the array like below, you should be fine.
this.hgridOptions = { dataSource: this.UserInformation,
For your question about column hiding, in point 2 you mention that you have the configuration for the columns, then why do you need to have AutoGenerateColumns/Layouts? It is best to configure the grid during initialization rather than at runtime.
For reference, you can find the available events for the igHierarchicalGrid in our API documentation here.
Looking forward to hearing from you.
Hello Michael,
Thank you for your help. update scripts has fixed the Hierarchical Grid display issue but it shows some exception in Console as follows,
EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./AppComponent class AppComponent - inline template:3:26ORIGINAL EXCEPTION: Error trying to diff '[{"Username":"Jeet","EmplID":"999999","Comment":"This is a comment for Jeet","Fullname":"sdfsdfs","Acctlocked":"sdfsdfsfs","GroupInformation":[{"GroupName":[{"Field1":"field 1 val","Field2":"field 2 val"},{"Field1":"field 1 val1","Field2":"field 2 val1"}],"GroupDescription":"Testing of GroupDescription"},{"GroupName":[{"Field1":"field 1 val","Field2":"field 2 val"},{"Field1":"field 1 val1","Field2":"field 2 val1"}],"GroupDescription":"Testing of GroupDescriptionTwo"}]},{"Username":"Kumar","EmplID":"888888","Comment":"This is a comment for Kumar","Fullname":"sdfsdfs","Acctlocked":"sdfsdfsfs","GroupInformation":[{"GroupName":[{"Field1":"field 1 val","Field2":"field 2 val"},{"Field1":"field 1 val1","Field2":"field 2 val1"}],"GroupDescription":"Testing of GroupDescription"},{"GroupName":[{"Field1":"field 1 val","Field2":"field 2 val"},{"Field1":"field 1 val1","Field2":"field 2 val1"}],"GroupDescription":"Testing of GroupDescriptionTwo"}]}]'ORIGINAL STACKTRACE:Error: Error trying to diff '[{"Username":"Jeet","EmplID":"999999","Comment":"This is a comment for Jeet","Fullname":"sdfsdfs","Acctlocked":"sdfsdfsfs","GroupInformation":[{"GroupName":[{"Field1":"field 1 val","Field2":"field 2 val"},{"Field1":"field 1 val1","Field2":"field 2 val1"}],"GroupDescription":"Testing of GroupDescription"},{"GroupName":[{"Field1":"field 1 val","Field2":"field 2 val"},{"Field1":"field 1 val1","Field2":"field 2 val1"}],"GroupDescription":"Testing of GroupDescriptionTwo"}]},{"Username":"Kumar","EmplID":"888888","Comment":"This is a comment for Kumar","Fullname":"sdfsdfs","Acctlocked":"sdfsdfsfs","GroupInformation":[{"GroupName":[{"Field1":"field 1 val","Field2":"field 2 val"},{"Field1":"field 1 val1","Field2":"field 2 val1"}],"GroupDescription":"Testing of GroupDescription"},{"GroupName":[{"Field1":"field 1 val","Field2":"field 2 val"},{"Field1":"field 1 val1","Field2":"field 2 val1"}],"GroupDescription":"Testing of GroupDescriptionTwo"}]}]' at new BaseException (https://npmcdn.com/@angular/core@2.0.0-rc.4//bundles/core.umd.js:4412:27) at DefaultIterableDiffer.diff (https://npmcdn.com/@angular/core@2.0.0-rc.4//bundles/core.umd.js:6873:23) at IgHierarchicalGridComponent.ngDoCheck (https://npmcdn.com/igniteui-angular2@1.0.5/igniteui.angular2.js:511:54) at DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.template.js:71:63) at DebugAppView.AppView.detectChanges (https://npmcdn.com/@angular/core@2.0.0-rc.4//bundles/core.umd.js:12143:18) at DebugAppView.detectChanges (https://npmcdn.com/@angular/core@2.0.0-rc.4//bundles/core.umd.js:12247:48) at DebugAppView.AppView.detectViewChildrenChanges (https://npmcdn.com/@angular/core@2.0.0-rc.4//bundles/core.umd.js:12169:23) at DebugAppView.AppView.detectChangesInternal (https://npmcdn.com/@angular/core@2.0.0-rc.4//bundles/core.umd.js:12154:18) at DebugAppView.AppView.detectChanges (https://npmcdn.com/@angular/core@2.0.0-rc.4//bundles/core.umd.js:12143:18) at DebugAppView.detectChanges (https://npmcdn.com/@angular/core@2.0.0-rc.4//bundles/core.umd.js:12247:48)ERROR CONTEXT:[object Object]
As per my understanding, Data provided as data source is correct but this exception appear all the time. could you please help me to understand this error?
My 2nd Question: About hiding column scenario,
1) I would like to allow Auto Column generation from Data source for the Hierarchical Grid.
2) I have a Grid configuration which contains information regarding columns on each bands and its visibility and column header Text.
3) I would like to intercept the grid column creating event and override the column definitions with my grid configuration i.e. to apply localized header and visibility of each columns.
I have tried using childGridCreating() event in the sample code (Plunker sample) but it doesn't fire at all. It would be interesting to know the hooks for grid events to inject my own custom configuration.
Would you please guide me how to intercept Grid Creating Event()?
Regards,
Looking at the plunker, it looks like you are using a lite version of Ignite UI in index.html. Looking through these scripts I do not see the igHierarchicalGrid defined. If you change the scripts to a version with the required widgets, it should start rendering. I tested with the following:
<!-- Ignite UI Required Combined JavaScript Files --><script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.core.js" type="text/javascript"></script><script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.lob.js" type="text/javascript"></script>
Pertaining to your second question about when to call hideColumns, if the visibility of the column can be determined before calling your initGridData() method, you should set up your hgridOptions accordingly and set the hidden property of the column to true/false.
Otherwise, I am not sure what you mean by using the parent Component or the Table tag. Could you please elaborate what you mean by this?
Hi Michael,
Thank you for your response.
I have tried added ChildGridCreatingEvent into my demo under plunker but its not even rendering whole Grid. http://plnkr.co/edit/J7tFlm?p=info
Could you please have a look and help me to understand why its not rendering? It even doesn't fire the event.(ChildGridCreating)
How could we call hideColumn while working with Angular2 Component? Should we use parent Component or Table tag?
Looking forward to your response.
Hello Jeetendra,
Thank you for posting in our forums!
To answer your first question, you can handle the igHierarchicalGrid's childGridCreating event to intercept child creation. You can then use the ui.options argument to set the caption.
For your second question, you can programmatically hide columns at run time by using the hideColumn method on the widget instance of igGrid within the igHierarchicalGrid.
If you need further assistance with this, please let me know and I will be glad to help.