Hi.
We can change the shape of the radcheckbox object. Star, circle, diamond etc. we can give shapes. But is it possible to shape the checkbox inside the checkbox column?
14 Answers, 1 is accepted
Hi, özer,
RadGridView offers the CellFormatting event which allows you to customize the cell elements. You can cast the cell to GridCheckBoxCellElement and thus access the RadCheckBoxEditorElement in order to change its shape:
StarShape shape = new StarShape();
private void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
{
GridCheckBoxCellElement checkBoxCell = e.CellElement as GridCheckBoxCellElement;
if (checkBoxCell!=null)
{
RadCheckBoxEditor editor = checkBoxCell.Editor as RadCheckBoxEditor;
RadCheckBoxEditorElement el = editor.EditorElement as RadCheckBoxEditorElement;
el.Checkmark.Shape = shape;
}
}
I hope this information helps. If you need any further assistance please don't hesitate to contact me.
Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik
Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).
hi Dess
Thank you for your help
So how can I set different background colors for the checked and unchecked states of these chackboxes? And how can I hide the check mark?
I tried something like this but couldn't reach my goal:
private
void
rgvLinkList_CellFormatting(
object
sender, CellFormattingEventArgs e)
{
GridCheckBoxCellElement checkBoxCell = e.CellElement
as
GridCheckBoxCellElement;
if
(checkBoxCell !=
null
)
{
RadCheckBoxEditor editor = checkBoxCell.Editor
as
RadCheckBoxEditor;
RadCheckBoxEditorElement el = editor.EditorElement
as
RadCheckBoxEditorElement;
el.Checkmark.Shape = shape;
el.Checkmark.MinSize =
new
Size(20, 20);
FillPrimitive fp =
new
FillPrimitive();
fp.BackColor = Color.OrangeRed;
fp.NumberOfColors = 1;
el.Checkmark.Children.Add(fp);
CheckPrimitive cp =
new
CheckPrimitive();
cp.DrawFill =
true
;
cp.Visibility = ElementVisibility.Visible;
cp.BackColor = Color.Yellow;
cp.NumberOfColors = 1;
cp.UseFixedCheckSize =
true
;
cp.ForeColor = Color.Transparent;
cp.MinSize =
new
Size(20, 20);
cp.StretchVertically =
true
;
cp.StretchVertically =
true
;
el.Checkmark.Children.Add(cp);
}
}
I can do this in any checkbox not in GridView. As follows:
// radCheckBox1
//
this
.radCheckBox1.Location =
new
System.Drawing.Point(1, 12);
this
.radCheckBox1.Name =
"radCheckBox1"
;
this
.radCheckBox1.Size =
new
System.Drawing.Size(128, 52);
this
.radCheckBox1.TabIndex = 0;
this
.radCheckBox1.Text =
"radCheckBox1"
;
((Telerik.WinControls.UI.RadCheckBoxElement)(
this
.radCheckBox1.GetChildAt(0))).Text =
"radCheckBox1"
;
((Telerik.WinControls.Primitives.FillPrimitive)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(0))).Shape =
null
;
((Telerik.WinControls.UI.CheckBoxLayoutPanel)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1))).Enabled =
true
;
((Telerik.WinControls.UI.RadCheckmark)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1))).UseDefaultDisabledPaint =
true
;
((Telerik.WinControls.UI.RadCheckmark)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1))).EnableFocusBorderAnimation =
true
;
((Telerik.WinControls.UI.RadCheckmark)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1))).EnableBorderHighlight =
false
;
((Telerik.WinControls.UI.RadCheckmark)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1))).CustomFontSize = 1F;
((Telerik.WinControls.UI.RadCheckmark)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1))).AutoSize =
true
;
((Telerik.WinControls.UI.RadCheckmark)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1))).Enabled =
true
;
((Telerik.WinControls.UI.RadCheckmark)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1))).Shape =
this
.starShape1;
((Telerik.WinControls.UI.RadCheckmark)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1))).MinSize =
new
System.Drawing.Size(50, 50);
((Telerik.WinControls.UI.RadCheckmark)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1))).UseCompatibleTextRendering =
true
;
((Telerik.WinControls.Primitives.FillPrimitive)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(0))).NumberOfColors = 1;
((Telerik.WinControls.Primitives.FillPrimitive)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(0))).BackColor = System.Drawing.Color.FromArgb(((
int
)(((
byte
)(255)))), ((
int
)(((
byte
)(10)))), ((
int
)(((
byte
)(10)))));
((Telerik.WinControls.Primitives.BorderPrimitive)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(1))).Enabled =
false
;
((Telerik.WinControls.Primitives.BorderPrimitive)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(1))).Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
((Telerik.WinControls.Primitives.CheckPrimitive)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(2))).DrawFill =
true
;
((Telerik.WinControls.Primitives.CheckPrimitive)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(2))).UseFixedCheckSize =
true
;
((Telerik.WinControls.Primitives.CheckPrimitive)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(2))).ForeColor = System.Drawing.Color.Transparent;
((Telerik.WinControls.Primitives.CheckPrimitive)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(2))).AutoSize =
true
;
((Telerik.WinControls.Primitives.CheckPrimitive)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(2))).Visibility = Telerik.WinControls.ElementVisibility.Visible;
((Telerik.WinControls.Primitives.CheckPrimitive)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(2))).StretchHorizontally =
true
;
((Telerik.WinControls.Primitives.CheckPrimitive)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(2))).StretchVertically =
true
;
((Telerik.WinControls.Primitives.ImagePrimitive)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(3))).ShouldPaint =
true
;
((Telerik.WinControls.Primitives.ImagePrimitive)(
this
.radCheckBox1.GetChildAt(0).GetChildAt(1).GetChildAt(1).GetChildAt(3))).Visibility = Telerik.WinControls.ElementVisibility.Hidden;
//
// starShape1
//
this
.starShape1.Arms = 5;
this
.starShape1.InnerRadiusRatio = 0.375F;
Hello, özer,
In order to customize the fill color for the check box inside the GridCheckBoxCellElement, you can use the following code snippet:
StarShape shape = new StarShape();
private void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
{
GridCheckBoxCellElement checkBoxCell = e.CellElement as GridCheckBoxCellElement;
if (checkBoxCell!=null)
{
RadCheckBoxEditor editor = checkBoxCell.Editor as RadCheckBoxEditor;
RadCheckBoxEditorElement el = editor.EditorElement as RadCheckBoxEditorElement;
el.Checkmark.Shape = shape;
el.Checkmark.CheckElement.CheckPrimitiveStyle = Telerik.WinControls.Enumerations.CheckPrimitiveStyleEnum.None;
el.Checkmark.Fill.GradientStyle = GradientStyles.Solid;
if (el.CheckState== Telerik.WinControls.Enumerations.ToggleState.On)
{
el.Checkmark.Fill.BackColor = Color.Green;
}
else
{
el.Checkmark.Fill.BackColor = Color.Red;
}
}
}
Should you have further questions please let me know.
Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Yes!
That's exactly what he's looking for.
Thank again Dess.
One more question:
Can I change the cursor on checkbox in checkboxcolumn?
Hello, özer,
In order to change the cursor when the cursor is over the check box, you can handle the CellMouseMove event and detect what is the element under the mouse: public RadForm1()
{
InitializeComponent();
this.radGridView1.CellMouseMove += RadGridView1_CellMouseMove;
}
private void RadGridView1_CellMouseMove(object sender, MouseEventArgs e)
{
RadCheckmark elementUnderMouse = this.radGridView1.ElementTree.GetElementAtPoint(e.Location) as RadCheckmark;
if (elementUnderMouse != null)
{
this.radGridView1.Cursor = Cursors.Hand;
}
else
{
this.radGridView1.Cursor = Cursors.Default;
}
}
Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik
Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).
[quote]Dess | Tech Support Engineer, Sr. said:
Hello, özer,
In order to change the cursor when the cursor is over the check box, you can handle the CellMouseMove event and detect what is the element under the mouse:
public RadForm1()
{
InitializeComponent();
this.radGridView1.CellMouseMove += RadGridView1_CellMouseMove;
}
private void RadGridView1_CellMouseMove(object sender, MouseEventArgs e)
{
RadCheckmark elementUnderMouse = this.radGridView1.ElementTree.GetElementAtPoint(e.Location) as RadCheckmark;
if (elementUnderMouse != null)
{
this.radGridView1.Cursor = Cursors.Hand;
}
else
{
this.radGridView1.Cursor = Cursors.Default;
}
}
I hope this information helps. If you need any further assistance please don't hesitate to contact me.
Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik
Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).
[/quote]
Hello Dess.
I think the telerik can do anything but "find a remedy for death" :)
So, can the shape of the checkbox object in the filter cell also change?
Hello, özer,
If you want to apply the star shape for the check box in the filter cell, it is necessary to handle the ViewCellFormatting event and move the code from the CellFormatting event to the ViewCellFormatting event addressing the filter cell as well.
private void RadGridView1_ViewCellFormatting(object sender, CellFormattingEventArgs e)
{
GridCheckBoxCellElement checkBoxCell = e.CellElement as GridCheckBoxCellElement;
GridFilterCheckBoxCellElement filterCheckBoxCell = e.CellElement as GridFilterCheckBoxCellElement;
if (checkBoxCell != null || filterCheckBoxCell!=null)
{
RadCheckBoxEditor editor = ((GridDataCellElement)e.CellElement).Editor as RadCheckBoxEditor;
RadCheckBoxEditorElement el = editor.EditorElement as RadCheckBoxEditorElement;
el.Checkmark.Shape = shape;
el.Checkmark.CheckElement.CheckPrimitiveStyle = Telerik.WinControls.Enumerations.CheckPrimitiveStyleEnum.None;
el.Checkmark.Fill.GradientStyle = GradientStyles.Solid;
if (el.CheckState == Telerik.WinControls.Enumerations.ToggleState.On)
{
el.Checkmark.Fill.BackColor = Color.Green;
}
else
{
el.Checkmark.Fill.BackColor = Color.Red;
}
}
}
The main difference between these two events is that while the CellFormatting event handles only the data cells, the ViewCellFormatting affects the system cells as well.
Should you have further questions please let me know.
Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Hello again Dess.
So if I want to format data cells separately and system cells separately, I have to handle both CellFormatting and ViewCellFormatting events.
In the current situation, the filter chekbox is exactly the same as the others. At the same time, the "ThreeState" feature of the filter checkbox seems to be disabled.
Can we format the three states (select all, select checkeds, select uncheckeds) of the filter checkbox separately?
Hello, özer,
You can use only the ViewCellFormatting event as it will be fired for both, the data cells and system cells as well. You can consider the row/cell type and apply the desired settings to the cell element.
The checkbox column has a specific property that controls whether three states are enabled:
Additional information about the available properties in the GridViewCheckBoxColumn is available here: https://docs.telerik.com/devtools/winforms/controls/gridview/columns/column-types/gridviewcheckboxcolumn
If you need any further assistance, please don't hesitate to contact me.
Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik
Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).
Hello, Dess.
I guess I couldn't express the problem correctly. Sometimes my English is insufficient and I get help from Google Translator :)
When I said Three State, I actually meant that the filter checkbox looks different for "select checked", "select unchecked" and "select all".
Currently my star-shaped filter checkbox object looks the same for "select all" and "select unchecked" states.
Is three different formatting possible for three different situations, similar to the attached picture?
You can apply the desired RadCheckBoxEditorElement.Checkmark.Fill.BackColor property considering the RadCheckBoxEditorElement.CheckState value. The following code snippet demonstrates how to apply three different color for the star shape:
private void RadGridView1_ViewCellFormatting(object sender, CellFormattingEventArgs e)
{
GridCheckBoxCellElement checkBoxCell = e.CellElement as GridCheckBoxCellElement;
GridFilterCheckBoxCellElement filterCheckBoxCell = e.CellElement as GridFilterCheckBoxCellElement;
if (checkBoxCell != null || filterCheckBoxCell!=null)
{
RadCheckBoxEditor editor = ((GridDataCellElement)e.CellElement).Editor as RadCheckBoxEditor;
RadCheckBoxEditorElement el = editor.EditorElement as RadCheckBoxEditorElement;
el.Checkmark.Shape = shape;
el.Checkmark.CheckElement.CheckPrimitiveStyle = Telerik.WinControls.Enumerations.CheckPrimitiveStyleEnum.None;
el.Checkmark.Fill.GradientStyle = GradientStyles.Solid;
if (el.CheckState == Telerik.WinControls.Enumerations.ToggleState.On)
{
el.Checkmark.Fill.BackColor = Color.Green;
el.Checkmark.CheckElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
el.Checkmark.CheckElement.ResetValue(LightVisualElement.NumberOfColorsProperty, ValueResetFlags.Local);
el.Checkmark.CheckElement.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local);
el.Checkmark.CheckElement.ResetValue(LightVisualElement.ForeColorProperty, ValueResetFlags.Local);
}
else if (el.CheckState == Telerik.WinControls.Enumerations.ToggleState.Off)
{
el.Checkmark.Fill.BackColor = Color.Red;
el.Checkmark.CheckElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
el.Checkmark.CheckElement.ResetValue(LightVisualElement.NumberOfColorsProperty, ValueResetFlags.Local);
el.Checkmark.CheckElement.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local);
el.Checkmark.CheckElement.ResetValue(LightVisualElement.ForeColorProperty, ValueResetFlags.Local);
}
else
{
el.Checkmark.Fill.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
el.Checkmark.CheckElement.BackColor = Color.Black;
el.Checkmark.CheckElement.NumberOfColors = 1;
el.Checkmark.CheckElement.GradientStyle = GradientStyles.Solid;
el.Checkmark.CheckElement.ForeColor = Color.Transparent;
}
}
}
I have attached my sample project for your reference as well.
I hope this information helps. If you need any further assistance please don't hesitate to contact me.
Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik
Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).
Hello Dess.
Yes, now it is exactly what I wanted. Thank you again.