Hello,
I'm currently converting a windows forms application to the web. The screen I have a problem with contains a hierarchical grid. Each level contains the same columns (14 total) with most columns hidden by default. I want the column chooser functionalitity, column moving and column resizing functionality to synchronize between each level/band.
In WinForms grid I solved it by subscribing to the "AfterColPosChanged" event.
private void grdTimeInfos_AfterColPosChanged(object sender, AfterColPosChangedEventArgs e){ //create and get the Grids Event manager. GridEventManager gridEventManager = grdTimeInfos.Base.EventManager; //We need to turn off the AfterColPosChanged event so it wont be called over and over agin when we //change the position of the bands in the subsequent bands. gridEventManager.SetEnabled(GridEventIds.AfterColPosChanged, false); //call the Synchronize method SynchronizeColumns(e.ColumnHeaders, e.PosChanged); //Turn the event back on so it will work next time gridEventManager.SetEnabled(GridEventIds.AfterColPosChanged, true);}
private void grdTimeInfos_AfterColPosChanged(object sender, AfterColPosChangedEventArgs e){ //create and get the Grids Event manager. GridEventManager gridEventManager = grdTimeInfos.Base.EventManager;
//We need to turn off the AfterColPosChanged event so it wont be called over and over agin when we //change the position of the bands in the subsequent bands. gridEventManager.SetEnabled(GridEventIds.AfterColPosChanged, false);
//call the Synchronize method SynchronizeColumns(e.ColumnHeaders, e.PosChanged);
//Turn the event back on so it will work next time gridEventManager.SetEnabled(GridEventIds.AfterColPosChanged, true);}
The synchronizecolumns method handles the 3 possible change events: move, swap and visibliltiy change.
private void SynchronizeColumns(ColumnHeader[] columHeaders, PosChanged positionChanged){ switch (positionChanged) { case PosChanged.Moved: //iterate through the Bands Collection foreach (UltraGridBand band in grdTimeInfos.Base.DisplayLayout.Bands) { //make sure that we don't move the same band column that we moved if (band.Key != columHeaders[0].Band.Key) { //for moving, we only need to worry about visiblePostions. So, all we do is //set the visible position of the grid column in the next band which //has the same key as ColumnHeader[0] band.Columns[columHeaders[0].Column.Key].Header.VisiblePosition = columHeaders[0].VisiblePosition; } } break; case PosChanged.Swapped: //iterate throug the Bands Collection foreach (UltraGridBand band in grdTimeInfos.Base.DisplayLayout.Bands) { //make sure that we don't swap the same band columns that we just swapped if (band.Key != columHeaders[0].Band.Key) { //use the swap method on the colum to swap the two columns that we get from the //olumnHeader array. band.Columns[columHeaders[1].Column.Key].Swap(band.Columns[columHeaders[0].Column.Key]); } } break; case PosChanged.HiddenStateChanged: //iterate throug the Bands Collection foreach (UltraGridBand band in grdTimeInfos.Base.DisplayLayout.Bands) { if (band.Key != columHeaders[0].Band.Key) { band.Columns[columHeaders[0].Column.Key].Hidden = columHeaders[0].Column.Hidden; } } break; }}
private void SynchronizeColumns(ColumnHeader[] columHeaders, PosChanged positionChanged){ switch (positionChanged) { case PosChanged.Moved: //iterate through the Bands Collection
foreach (UltraGridBand band in grdTimeInfos.Base.DisplayLayout.Bands) { //make sure that we don't move the same band column that we moved if (band.Key != columHeaders[0].Band.Key) { //for moving, we only need to worry about visiblePostions. So, all we do is //set the visible position of the grid column in the next band which //has the same key as ColumnHeader[0] band.Columns[columHeaders[0].Column.Key].Header.VisiblePosition = columHeaders[0].VisiblePosition; } }
break; case PosChanged.Swapped: //iterate throug the Bands Collection
foreach (UltraGridBand band in grdTimeInfos.Base.DisplayLayout.Bands) { //make sure that we don't swap the same band columns that we just swapped
if (band.Key != columHeaders[0].Band.Key) { //use the swap method on the colum to swap the two columns that we get from the //olumnHeader array. band.Columns[columHeaders[1].Column.Key].Swap(band.Columns[columHeaders[0].Column.Key]); } }
break; case PosChanged.HiddenStateChanged: //iterate throug the Bands Collection
foreach (UltraGridBand band in grdTimeInfos.Base.DisplayLayout.Bands) { if (band.Key != columHeaders[0].Band.Key) { band.Columns[columHeaders[0].Column.Key].Hidden = columHeaders[0].Column.Hidden; } }
break; }}
Now I want to implement the same functionality in the web interface.Has something like this be done already, or can you point me to the correct event(s) I need to use to accomplish this?
A challenge!
Kind regards,
Michael
Hi Michael,
Thank you for posting in our forums!
Each of the Column Hiding, Moving and Resizing features have events that you could use to know when you will need to synchronize the other bands.
You can find a list of the events and methods to use for each feature below:
Column Moving:
http://help.infragistics.com/jQuery/2014.1/ui.iggridcolumnmoving_hg#events:columnMoved
http://help.infragistics.com/jQuery/2014.1/ui.iggridcolumnmoving#methods:moveColumn
Column Hiding/Chooser:
http://help.infragistics.com/jQuery/2014.1/ui.iggridhiding_hg#events:columnHidden
http://help.infragistics.com/jQuery/2014.1/ui.iggridhiding#methods:hideColumn
Column Resizing:
http://help.infragistics.com/jQuery/2014.1/ui.iggridresizing_hg#events:columnResized
http://help.infragistics.com/jQuery/2014.1/ui.iggridresizing#methods:resize
You may also need to handle calling the methods when a new child grid is populated as the feature options may not carry over when a new row is expanded. To do this, you could use the following event off of the grid:
http://help.infragistics.com/jQuery/2014.1/ui.ighierarchicalgrid#events:childrenPopulated
If you have any further questions or concerns with this, please let me know and I will be glad to help.
Hello Michael,
Please let me know if you need further assistance with this issue.
Thanks a lot for the supplied information. I will try it out as soon as possible.
I have a similar problem I am trying to run the igTreeGrid example code but modify it to have resizeable columns, and moveable columns. I can get it to work if I don't include the treegrid script at the top but that doesn't seem like a very good idea to me. I tried pasting that children populated script, that you mentioned above, into the example code but that also didn't work(I'm thinking I may have to change some variable names but I am new to JavaScript so I'm not sure what to change.) Let me know if you can help.
Thanks,
Please let me know if you need further assistance with this issue and I will be glad to help.
Thanks for the update. I'm looking forward to hearing from you.