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
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;
}
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.
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
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.
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.