{"id":2394,"date":"2014-09-28T09:46:59","date_gmt":"2014-09-28T09:46:59","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=2394"},"modified":"2016-08-05T10:42:30","modified_gmt":"2016-08-05T10:42:30","slug":"synchronizing-the-columns-in-hierarchical-in-a-xamdatagrid","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/synchronizing-the-columns-in-hierarchical-in-a-xamdatagrid\/","title":{"rendered":"Synchronizing the columns in hierarchical in a XamDataGrid"},"content":{"rendered":"

Before I start this post, let me just say I\u2019m using an old version of the Infragistics XamDataGrid for this post, version 10.3. Hence this may have been changed in subsequent releases, but as I have a legacy application to support, that\u2019s the version they\u2019re using.<\/em><\/p>\n

If you followed my previous post on using hierarchical data in a XamDataGrid, you’ll have noticed that the final image was hardly impressive, in that columns were not all in sync and if you resize a column, not all columns resize.<\/p>\n

For now, let’s remove the second FieldLayout’s hidden field, so our XAML looks like the following (I’ve commented out the offending line)<\/p>\n

\r\n<igDP:XamDataGrid GroupByAreaLocation="None" DataSource="{Binding}" Name="Grid">\r\n   <igDP:XamDataGrid.FieldLayoutSettings>\r\n      <igDP:FieldLayoutSettings ExpansionIndicatorDisplayMode="CheckOnDisplay"\r\n                                          AutoGenerateFields="False"\/>\r\n   <\/igDP:XamDataGrid.FieldLayoutSettings>\r\n   <igDP:XamDataGrid.FieldLayouts>\r\n      <igDP:FieldLayout>\r\n         <igDP:FieldLayout.Fields>\r\n            <igDP:Field Name="Name" \/>\r\n            <igDP:Field Name="Manages" Visibility="Hidden" \/>\r\n         <\/igDP:FieldLayout.Fields>\r\n      <\/igDP:FieldLayout>\r\n\r\n      <igDP:FieldLayout>\r\n         <igDP:FieldLayout.Settings>\r\n            <igDP:FieldLayoutSettings LabelLocation="Hidden" \/>\r\n         <\/igDP:FieldLayout.Settings>\r\n         <igDP:FieldLayout.Fields>\r\n            <igDP:Field Name="Name" \/>\r\n            <!-- remove this line for now\r\n            <igDP:Field Name="DepartmentManages" Visibility="Hidden" \/>\r\n            -->\r\n         <\/igDP:FieldLayout.Fields>\r\n      <\/igDP:FieldLayout>\r\n\r\n   <\/igDP:XamDataGrid.FieldLayouts>\r\n<\/igDP:XamDataGrid>\r\n<\/pre>\n
This will produce the following <\/p>\n
\"Columns<\/p>\n
However, this is an illusion that. All is still not quite as we want – if we resize the parent then you’ll see that child columns do not remain in sync with the parent. To handle this, let’s go back to the XAML and add the following to the XamDataGrid<\/p>\n
Note: I gave the XamDataGrid the name “Grid” as we’re going to need to write some code for the following changes in functionality.<\/em><\/p>\n
\r\n<igDP:XamDataGrid.Resources>\r\n   <Style TargetType="{x:Type igDP:LabelPresenter}">\r\n      <EventSetter Event="SizeChanged" Handler="EventSetter_OnHandler"\/>\r\n   <\/Style>\r\n<\/igDP:XamDataGrid.Resources>\r\n<\/pre>\n
The EventSetter_OnHandler code looks like this<\/p>\n
\r\nprivate void EventSetter_OnHandler(object sender, SizeChangedEventArgs e)\r\n{\r\n   var lp = sender as LabelPresenter;\r\n   if (lp != null)\r\n   {\r\n      if (Grid.FieldLayouts[0].Fields.Contains(lp.Field))\r\n      {\r\n         var f = Grid.FieldLayouts[1].Fields[lp.Field.Index];\r\n         f.Width = new FieldLength(lp.Field.CellWidthResolved);\r\n      }\r\n\r\n      if (Grid.FieldLayouts[1].Fields.Contains(lp.Field))\r\n      {\r\n         var f = Grid.FieldLayouts[0].Fields[lp.Field.Index];\r\n         f.Width = new FieldLength(lp.Field.CellWidthResolved);\r\n      }\r\n   }\r\n}\r\n<\/pre>\n
Now when you resize the columns all will remain in sync, however as you can see from the code this is all a little nasty in that it’s very much dependent upon the number of FieldLayouts you have etc.<\/p>\n
Let’s not worry too much about that at the moment. As there’s something a little more pressing, if you happend to expose multiple columns, for example, suppose I added an age column to the parent and child view models and added the fields to the XAML. When moving a column around you’ll notice the child will not reorganise it’s columns, so you’d end up with, for example – the parent columns Age followed by Name whereas the child would be Name followed by Age.<\/p>\n
To fix this add the following FieldPositionChanged event intot he XamDataGrid<\/p>\n
\r\n<igDP:XamDataGrid GroupByAreaLocation="None" \r\n    DataSource="{Binding}" \r\n    Name="Grid" \r\n    FieldPositionChanged="Grid_OnFieldPositionChanged"> <!-- our new addition -->\r\n<\/pre>\n
In the source code we’d now need to add the following<\/p>\n
\r\nprivate void Grid_OnFieldPositionChanged(object sender, FieldPositionChangedEventArgs e)\r\n{\r\n   if (Grid.FieldLayouts[0].Fields.Contains(e.Field))\r\n   {\r\n      foreach (var field in Grid.FieldLayouts[0].Fields)\r\n      {\r\n         if (field.Index < Grid.FieldLayouts[1].Fields.Count)\r\n         {\r\n            var field2 = Grid.FieldLayouts[1].Fields[field.Index];\r\n            field2.ActualPosition = new FieldPosition(field.ActualPosition.Column, \r\n                        field.ActualPosition.Row, \r\n                        field.ActualPosition.ColumnSpan, \r\n                        field.ActualPosition.RowSpan);\r\n         }\r\n      }\r\n   }\r\n\r\n   if (Grid.FieldLayouts[1].Fields.Contains(e.Field))\r\n   {\r\n      foreach (var field in Grid.FieldLayouts[1].Fields)\r\n      {\r\n         var field2 = Grid.FieldLayouts[0].Fields[field.Index];\r\n         field2.ActualPosition = new FieldPosition(field.ActualPosition.Column, \r\n                     field.ActualPosition.Row, \r\n                     field.ActualPosition.ColumnSpan, \r\n                     field.ActualPosition.RowSpan);\r\n      }\r\n   }\r\n}\r\n<\/pre>\n
Notice again we need to have knowledge about the number of field layouts to handle this correctly, but this will now work. Reordering the columns occurs across all rows.<\/p>\n
This is not perfect – and obviously we need to look at rewriting our code to handle any number of FieldLayouts, but it’s a start. I’ve more things I need to do with this hierarchical data, so if it’s interesting enough I’ll continue with further posts, but for now, between this and the previous post on the subject, we can now display hierarchical data and keep the columns in sync.  <\/p>\n
Addendum<\/strong><\/p>\n
After writing this post I found a mad desire to rewrite the code to handle multiple FieldLayouts, this has not been tested fully (so use at your own risk) but here goes<\/p>\n
\r\nprivate void EventSetter_OnHandler(object sender, SizeChangedEventArgs e)\r\n{\r\n   var lp = sender as LabelPresenter;\r\n   if (lp != null)\r\n   {\r\n      var found = Grid.FieldLayouts.FirstOrDefault(fl => fl.Fields.Contains(lp.Field));\r\n      if (found != null)\r\n      {\r\n         foreach (var fl in Grid.FieldLayouts)\r\n         {\r\n            if (!fl.Equals(found))\r\n            {\r\n               var f = fl.Fields[lp.Field.Index];\r\n               f.Width = new FieldLength(lp.Field.CellWidthResolved);\t\t\t\t\t\t\t\r\n            }\r\n         }\r\n     }\r\n   }\r\n}\r\n\r\nprivate void Grid_OnFieldPositionChanged(object sender, FieldPositionChangedEventArgs e)\r\n{\r\n   var found = Grid.FieldLayouts.FirstOrDefault(fl => fl.Fields.Contains(e.Field));\r\n   if (found != null)\r\n   {\r\n      foreach (var field in found.Fields)\r\n      {\r\n         foreach (var fl in Grid.FieldLayouts)\r\n         {\r\n            if (!fl.Equals(found))\r\n            {\r\n               if (field.Index < fl.Fields.Count)\r\n               {\r\n                  var f = fl.Fields[field.Index];\r\n                  f.ActualPosition = new FieldPosition(\r\n                       field.ActualPosition.Column, \r\n                       field.ActualPosition.Row, \r\n                       field.ActualPosition.ColumnSpan, \r\n                       field.ActualPosition.RowSpan);\r\n               }\r\n            }\r\n         }\r\n      }\r\n   }\r\n}\r\n<\/pre>\n
Update<\/strong><\/p>\n
Revisiting this code to use it on a project I’m working on, I found I’d missed a piece off. When resizing the columns from the parent\/header this works fine but XamDataGrid allows you to resize the child rows and we don’t have code to resize the parents and keep in sync. <\/p>\n
An easy way to “fix” this is to disable resizing on columns except for on the header which we can achieve easily by adding to our grid XAML<\/p>\n
\r\nPreviewMouseMove="Grid_OnPreviewMouseMove"\r\n<\/pre>\n
and in our code behind we have <\/p>\n
\r\n\/\/ you'll need this using Infragistics.Windows;\r\nprivate void Grid_OnPreviewMouseMove(object sender, MouseEventArgs e)\r\n{\r\n   var lp = Utilities.GetAncestorFromType(e.OriginalSource as DependencyObject, \r\n                typeof(LabelPresenter), true) as LabelPresenter;\r\n\r\n   if (lp == null)\r\n   {\r\n      var cvp = Utilities.GetAncestorFromType(e.OriginalSource as DependencyObject, \r\n                    typeof(CellValuePresenter), true) as CellValuePresenter;\r\n      if (cvp != null)\r\n      {\r\n         cvp.Field.Settings.AllowResize = false;\r\n      }\r\n   }\r\n   else\r\n   {\r\n      lp.Field.Settings.AllowResize = true;\r\n   }\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Before I start this post, let me just say I\u2019m using an old version of the Infragistics XamDataGrid for this post, version 10.3. Hence this may have been changed in subsequent releases, but as I have a legacy application to support, that\u2019s the version they\u2019re using. If you followed my previous post on using hierarchical […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[84,85],"tags":[],"class_list":["post-2394","post","type-post","status-publish","format-standard","hentry","category-infragistics","category-xamdatagrid"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/2394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=2394"}],"version-history":[{"count":8,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/2394\/revisions"}],"predecessor-version":[{"id":4213,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/2394\/revisions\/4213"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=2394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=2394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=2394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}