Grid: Change arrows for child records

2 Answers 197 Views
GridView
Thomas Bargholz
Top achievements
Rank 1
Iron
Thomas Bargholz asked on 12 Jul 2021, 10:58 AM

Hi,

I have a RadGrid containing a self-referencing hierarchy of data. All works perfectly. 

However, when it comes to styling, I am using one of the standard theme. However, I would like to change the default images for the expand/collapse arrows for showing/hiding the child elements, but nothing else .

How do I go about handling this?

Regards

Thomas

 

 

 

2 Answers, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 13 Jul 2021, 10:37 AM

Hello, Thomas,

In order to change the icon for the expander item, it is suitable to use the CellFormatting event: 

        public RadForm1()
        {
            InitializeComponent();

            this.radGridView1.CellFormatting += radGridView1_CellFormatting;
            this.radGridView1.Relations.AddSelfReference(this.radGridView1.MasterTemplate, "id", "pid");
            this.radGridView1.DataSource = GetSampleData();
        }

        private void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
        {
            GridDataCellElement dataCellElement = e.CellElement as GridDataCellElement;

            if (dataCellElement != null && dataCellElement.SelfReferenceLayout != null )
            {
                if (  dataCellElement.SelfReferenceLayout.ExpanderItem != null)
                {
                    dataCellElement.SelfReferenceLayout.ExpanderItem.SignImage = dataCellElement.SelfReferenceLayout.ExpanderItem.Expanded ? Properties.Resources.chevron_down : Properties.Resources.chevron_up;
                }
                else
                { 
                    dataCellElement.SelfReferenceLayout.ExpanderItem.ResetValue(ExpanderItem.SignImageProperty, ValueResetFlags.Local);
                }
            }
        }

        private DataTable GetSampleData()
        {
            DataTable dt = new DataTable();

            DataColumn dc = new DataColumn();
            dc.ColumnName = "id";
            dc.DataType = typeof(int);
            dt.Columns.Add(dc);

            DataColumn dc1 = new DataColumn();
            dc1.ColumnName = "name";
            dc1.DataType = typeof(string);
            dt.Columns.Add(dc1);

            DataColumn dc2 = new DataColumn();
            dc2.ColumnName = "pid";
            dc2.DataType = typeof(int);
            dt.Columns.Add(dc2);

            DataRow dr = dt.NewRow();
            dr[0] = 0;
            dr[1] = "My Computer";
            dr[2] = DBNull.Value;
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = 1;
            dr[1] = @"C:\";
            dr[2] = 0;
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = 2;
            dr[1] = @"D:\";
            dr[2] = 0;
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = 3;
            dr[1] = "Program Files";
            dr[2] = 1;
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = 4;
            dr[1] = "Microsoft";
            dr[2] = 3;
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = 5;
            dr[1] = "Telerik";
            dr[2] = 3;
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = 6;
            dr[1] = "WINDOWS";
            dr[2] = 1;
            dt.Rows.Add(dr);

            return dt;
        }

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Principal
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Thomas Bargholz
Top achievements
Rank 1
Iron
answered on 13 Jul 2021, 10:59 AM

Hi Dess,

thanks for the sample. I have added it, and the custom expander image(s) are now displayed. However, the original expander image from the theme is still displayed as well, so I have two images on top of each other.  Removing the style only show my custom expander images, but that will not do. Is there a way to prevent the theme images to load?

I have also noticed, that the expander only changes when I remove focus from the cell/row. If I expand, the image stays the same, untill I select a different cell. I guess that the cell format is not called for the parent row when it is expanded/collapsed.  Is there a way to invalidate the cell on expand/collapse, so the cell is repainted?

Regards

Thomas

Dess | Tech Support Engineer, Principal
Telerik team
commented on 13 Jul 2021, 11:27 AM

Hello, Thomas,

Could you please specify which theme you are using in your application? Depending on the theme, the expander image can be applied differently (e.g. ExpanderItem.Image, SvgImage, Glyph in the Text) which is the possible reason for overlapping the images.

However, I need to know which is the exact theme so I can suggest an appropriate solution.

Thomas Bargholz
Top achievements
Rank 1
Iron
commented on 13 Jul 2021, 11:39 AM

Hello Dess, I am using Office2019GrayTheme for this.
Thomas Bargholz
Top achievements
Rank 1
Iron
commented on 13 Jul 2021, 11:53 AM

Manged to hide the theme expander by using this: dataCell.SelfReferenceLayout.ExpanderItem.DrawText = false; But the issue of using two images for expanded/collapsed still remain. Only when the cell looses focus does it repaint with the correct image.
Dess | Tech Support Engineer, Principal
Telerik team
commented on 13 Jul 2021, 12:10 PM

Thank you for the clarification, Thomas. Office2019Gray theme uses glyphs for the expanders: 

https://docs.telerik.com/devtools/winforms/telerik-presentation-framework/glyphs

That is why it is necessary to disable the text drawing for the expander:

        private void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
        {
            GridDataCellElement dataCellElement = e.CellElement as GridDataCellElement;

            if (dataCellElement != null && dataCellElement.SelfReferenceLayout != null )
            {
                if (  dataCellElement.SelfReferenceLayout.ExpanderItem != null)
                {
                    dataCellElement.SelfReferenceLayout.ExpanderItem.SignImage = dataCellElement.RowInfo.IsExpanded ? Properties.Resources.chevron_up : Properties.Resources.chevron_down;
                    dataCellElement.SelfReferenceLayout.ExpanderItem.DrawText = false;
                }
                else
                { 
                    dataCellElement.SelfReferenceLayout.ExpanderItem.ResetValue(ExpanderItem.SignImageProperty, ValueResetFlags.Local);
                    dataCellElement.SelfReferenceLayout.ExpanderItem.ResetValue(ExpanderItem.DrawTextProperty, ValueResetFlags.Local);
                }
            }
        }

I have also attached my sample project for your reference.

Tags
GridView
Asked by
Thomas Bargholz
Top achievements
Rank 1
Iron
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Thomas Bargholz
Top achievements
Rank 1
Iron
Share this question
or