Skip to main content Skip to footer

HowTo: Collapsible Grouped Columns in C1FlexGrid

While working with grid application, data is generally grouped in Row format which can be expanded and collapsed to toggle the detailed data. In a recent query, one of the users of C1Flexgrid for WPF went ahead to look for more customization where data can be grouped in columns. Requested implementation required collapsible columns similar to the Collapsible rows using a toggle +/- symbol. Even though, implementation was not too complex, end output looked interesting similar to what you can see in the image below. GroupedColumns Implementation requires inserting a ReadOnly column which would mimic a Grouped Row. Next step involves inserting a toggle image in the top cell which will be clicked to collapse or expand the desired columns. All these can be done easily using CellFactory Class which provides lot of flexibility in customizing C1Flexgrid. Since there is nothing much to discuss about the implementation, you can directly go through the code block which is quite self explanatory.



    ///  
    /// Cell Factory handling the Inserting of Toggle Image  
    /// and toggling of the Columns  
    ///  
    public class MyCellFactory : C1.WPF.FlexGrid.CellFactory  
    {  
        Row _gr;  
        C1.WPF.FlexGrid.C1FlexGrid _fg;  
        static ImageSource \_bmpExpanded, \_bmpCollapsed;  

        public MyCellFactory()  
        {  
            _bmpExpanded = ImageCell.GetImageSource("Expanded.png");  
            _bmpCollapsed = ImageCell.GetImageSource("Collapsed.png");  
        }  

        public override void CreateCellContent(C1FlexGrid grid, Border bdr, CellRange rng)  
        {  
            base.CreateCellContent(grid, bdr, rng);  

            if (_fg == null)  
                _fg = grid;  

            if (rng.Row == 0 && rng.Column == 0)  
            {  
                bdr.Child = null;  
                Image _nodeImage;  

                _gr = grid.Rows[rng.Row];  

                // initialize collapsed/expanded image  
                _nodeImage = new Image();  
                if (\_gr.Tag == null || \_gr.Tag.ToString() == "Collapsed")  
                {  
                   _gr.Tag = "Expanded";  
                    \_nodeImage.Source = \_bmpExpanded;  
                }  
                else  
                {  
                    \_nodeImage.Source = \_bmpCollapsed;  
                    _gr.Tag = "Collapsed";  
                }  
                \_nodeImage.Width = \_nodeImage.Height = 9;  
                _nodeImage.VerticalAlignment = VerticalAlignment.Center;  
                _nodeImage.Stretch = Stretch.None;  
                bdr.Child = _nodeImage;  
                \_nodeImage.PreviewMouseDown += \_nodeImage_PreviewMouseDown;  
                ///////////////////////////////////////////////////////////  
            }  
        }  

        void \_nodeImage\_PreviewMouseDown(object sender, MouseButtonEventArgs e)  
        {  
            if (_gr.Tag.ToString() == "Expanded")  
                _gr.Tag = "Collapsed";  
            else  
                _gr.Tag = "Expanded";  

            CreateCellContent(_fg, (sender as Image).Parent as Border, new CellRange(0, 0));  
            SetExpandCollapse();  
        }  

        public void SetExpandCollapse()  
        {  
            if (_gr.Tag.ToString() == "Expanded")  
            {  
                \_fg.Columns[1].Tag = \_fg.Columns[1].Width;  
                _fg.Columns[1].Width = new GridLength(1);  

                \_fg.Columns[2].Tag = \_fg.Columns[2].Width;  
                _fg.Columns[2].Width = new GridLength(1);  

            }  
            else  
            {  
                \_fg.Columns[1].Width = (GridLength)\_fg.Columns[1].Tag;  
                \_fg.Columns[2].Width = (GridLength)\_fg.Columns[2].Tag;  
            }  
        }  

    }  

    ///  
    /// Class returning the Toggle Button Image  
    ///  
    public abstract class ImageCell : StackPanel  
    {  
        ImageSource _imgSrc;  

        public ImageCell(Row row)  
        {  
            if (_imgSrc == null)  
            {  
                _imgSrc = GetImageSource(GetImageResourceName());  
            }  

            Orientation = Orientation.Horizontal;  

            var img = new Image();  
            img.Source = _imgSrc;  
            img.Width = 25;  
            img.Height = 15;  
            img.VerticalAlignment = VerticalAlignment.Center;  
            img.Stretch = Stretch.None;  
            Children.Add(img);  
        }  

        public abstract string GetImageResourceName();  

        public static ImageSource GetImageSource(string imageName)  
        {  
            var imgConv = new ImageSourceConverter();  
            string path = string.Format("pack://application:,,,/WPF\_Flex\_CollapsibleColumns;component/Resources/{0}", imageName);  
            return (ImageSource)imgConv.ConvertFromString(path);  
        }  
    }  


Refer to the attached sample for complete implementation. Download Sample

MESCIUS inc.

comments powered by Disqus