13 Answers, 1 is accepted
Please have in mind that overflowing the cell's content to the next cells will mess up the cells completely. That is why RadGridView clips the cell's content according to the specified column's width. However, you can find below a sample code snippet demonstrating how to achieve the illustrated result. Note that this is just a sample approach and it may not cover all possible cases. Feel free to modify it in a way which suits your requirement best. The achieved result is illustrated in the attached gif file.
public partial class RadForm1 : Telerik.WinControls.UI.RadForm
{
public RadForm1()
{
InitializeComponent();
InitGrid();
}
public class CustomCell : GridDataCellElement
{
private LightVisualElement lve = new LightVisualElement();
private StackLayoutPanel stack = new StackLayoutPanel();
public CustomCell(GridViewColumn column, GridRowElement row) : base(column, row)
{
}
protected override void CreateChildElements()
{
base.CreateChildElements();
lve = new LightVisualElement();
lve.StretchHorizontally = true;
stack = new StackLayoutPanel();
stack.Children.Add(lve);
this.Children.Add(stack);
}
protected override void SetContentCore(object value)
{
base.SetContentCore(value);
Console.WriteLine(this.Value);
lve.Text = "This is very very long text that doesn't fit the width";
lve.StretchHorizontally = true;
this.DrawText = false;
}
}
private void radGridView1_CreateCell(object sender, GridViewCreateCellEventArgs e)
{
if (e.Column.Index == 0 && e.Row.RowInfo.Index > -1)
{
e.CellType = typeof(CustomCell);
}
}
private void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
{
if (e.ColumnIndex == 0)
{
e.CellElement.ClipDrawing = false;
e.CellElement.ZIndex = 10000;
e.CellElement.AutoEllipsis = false;
e.CellElement.TextWrap = false;
e.CellElement.BackColor = Color.Transparent;
}
}
public void InitGrid()
{
{
var withBlock = radGridView1;
GridViewTextBoxColumn colName = new GridViewTextBoxColumn();
colName.Name = "Member Name";
colName.HeaderText = "Member Name";
colName.Width = 250;
withBlock.Columns.Add(colName);
GridViewTextBoxColumn colValue1 = new GridViewTextBoxColumn();
colValue1.Name = "Value 1";
colValue1.HeaderText = "Value 1";
colValue1.Width = 150;
withBlock.Columns.Add(colValue1);
GridViewTextBoxColumn colValue2 = new GridViewTextBoxColumn();
colValue2.Name = "Value 2";
colValue2.HeaderText = "Value 2";
colValue2.Width = 150;
withBlock.Columns.Add(colValue2);
withBlock.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill;
GridViewRowInfo rowInfo1 = withBlock.Rows.AddNew();
rowInfo1.Cells[0].Value = "Member 1 with a very long name to make some very long text";
rowInfo1 = withBlock.Rows.AddNew();
rowInfo1.Cells[1].Value = "Value A1";
rowInfo1.Cells[2].Value = "Value B1";
rowInfo1 = withBlock.Rows.AddNew();
rowInfo1.Cells[1].Value = "Value A2";
rowInfo1.Cells[2].Value = "Value B2";
rowInfo1 = withBlock.Rows.AddNew();
rowInfo1.Cells[1].Value = "Value A3";
rowInfo1.Cells[2].Value = "Value B3";
rowInfo1 = withBlock.Rows.AddNew();
rowInfo1 = withBlock.Rows.AddNew();
rowInfo1.Cells[0].Value = "Member 2 with a very long name to make some very long text";
rowInfo1 = withBlock.Rows.AddNew();
rowInfo1.Cells[1].Value = "Value C1";
rowInfo1.Cells[2].Value = "Value D1";
rowInfo1 = withBlock.Rows.AddNew();
rowInfo1.Cells[1].Value = "Value C2";
rowInfo1.Cells[2].Value = "Value D2";
rowInfo1 = withBlock.Rows.AddNew();
rowInfo1.Cells[1].Value = "Value C3";
rowInfo1.Cells[2].Value = "Value D3";
rowInfo1 = withBlock.Rows.AddNew();
rowInfo1 = withBlock.Rows.AddNew();
rowInfo1.Cells[0].Value = "Member 3 with a very long name to make some very long text";
rowInfo1 = withBlock.Rows.AddNew();
rowInfo1.Cells[1].Value = "Value C1";
rowInfo1.Cells[2].Value = "Value D1";
rowInfo1 = withBlock.Rows.AddNew();
rowInfo1.Cells[1].Value = "Value C2";
rowInfo1.Cells[2].Value = "Value D2";
rowInfo1 = withBlock.Rows.AddNew();
rowInfo1.Cells[1].Value = "Value C3";
rowInfo1.Cells[2].Value = "Value D3";
}
this.radGridView1.Columns[0].WrapText = false;
this.radGridView1.Columns[0].AutoEllipsis = false;
}
Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
Veteran
Hello, Jay,
I have missed to override the theme settings. Please refer to the following code that you need to add:
public class CustomCell : GridDataCellElement
{
private LightVisualElement lve = new LightVisualElement();
private StackLayoutPanel stack = new StackLayoutPanel();
protected override Type ThemeEffectiveType
{
get
{
return typeof(GridDataCellElement);
}
}
public CustomCell(GridViewColumn column, GridRowElement row) : base(column, row)
{
}
protected override void CreateChildElements()
{
base.CreateChildElements();
lve = new LightVisualElement();
lve.StretchHorizontally = true;
stack = new StackLayoutPanel();
stack.Children.Add(lve);
this.Children.Add(stack);
}
protected override void SetContentCore(object value)
{
base.SetContentCore(value);
Console.WriteLine(this.Value);
lve.Text = "This is very very long text that doesn't fit the width";
lve.StretchHorizontally = true;
this.DrawText = false;
}
}
Should you have further questions please let me know.
Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
Veteran
Rank 1
Veteran
Hi Dess.
One additional issue: How to make this work if the overflow cell and the adjacent cell/s are actually locked/readonly?
Hello, Jay,
The custom GridDataCellElement with the stretched LightVisualElement for achieving the text overflowing (when the cell is not in edit mode) doesn't depend on the ReadOnly property of the column. It is expected to overflow the text no matter whether the column is read-only or not.
However, please have in mind that when a cell enters edit mode, the respective editor is initialized and it is sized according to the width of the column which behavior is by design.
Could you please give us some more details about the exact goal that you are trying to achieve? Once we get better understanding of the precise case we would be able to think about a suitable solution and provide further assistance. Thank you in advance for your cooperation.
I am looking forward to your reply.
Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
Veteran
My bad. The solution actually works. It's my modification that doesn't.
Thanks.
Rank 1
Veteran
Hi Dess.
I was wondering if its possible to make a cell to NOT overflow if the adjacent cell HAS value?
Hello, Jay,
Since the custom requirement for the cells overflowing is achieved by inserting a stretched LightVisualElement, if you want to disable the overflowing if the next cell has a value, you can hide the LightVisualElement in certain cases and display the default cell's text. This can be achieved in the SetContentCore method of the custom cell:
protected override void SetContentCore(object value)
{
base.SetContentCore(value);
Console.WriteLine(this.Value);
lve.Text = this.Value + "";
lve.StretchHorizontally = true;
if (this.ColumnIndex<this.MasterTemplate.Columns.Count-2)
{
if (this.RowInfo.Cells[this.ColumnIndex + 1].Value == null || this.RowInfo.Cells[this.ColumnIndex + 1].Value.ToString() == "")
{
lve.Visibility = ElementVisibility.Visible;
this.DrawText = false;
}
else
{
lve.Visibility = ElementVisibility.Collapsed;
this.DrawText = true;
}
}
}
Note that this is just a sample approach and it may not cover all possible cases. Feel free to modify and extend it in a way which suits your requirements best.
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
Rank 1
Veteran
Thank Dess.. I will try out this solution.
One more thing though, seems like setting the column TextAlignment property to ContentAlignment.MiddleRight or MiddleCenter does not work?
Hello, Jay,
The TextAlignment property of the column controls the alignment of the default text, not the custom LightVisualElement that is added.
However, you can override the ArrangeOverride method of the cell and arrange the LightVisualElement in the desired rectangle according to the available column size. The following approach demonstrates how to center the LVE when the column is wide enough to fit the entire text. The attached gif file illustrates better the achieved custom behavior:
protected override SizeF ArrangeOverride(SizeF finalSize)
{
SizeF size = base.ArrangeOverride(finalSize);
if (size.Width > this.lve.DesiredSize.Width)
{
RectangleF rect = GetClientRectangle(finalSize);
lve.Arrange(new RectangleF(rect.Width / 2 - this.lve.DesiredSize.Width / 2,
rect.Top + (rect.Height - this.lve.DesiredSize.Height) / 2,
this.lve.DesiredSize.Width,
this.lve.DesiredSize.Height));
}
return size;
}Feel free to modify and extend the code snippet in a way which suits your requirements best.
Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik
Rank 1
Veteran
Thanks Dess. The alignment works.
There is one more thing though. It seems like the text wont overflow if the column is pinned?
The pinned columns are hosted in a PinnedColumnsContainerElement which ClipDrawing property is set to true. You can disable it by adding this code in the CellFormatting event:
if (e.Column.IsPinned)
{
PinnedColumnsContainerElement pinnedContainer = e.CellElement.FindAncestor<PinnedColumnsContainerElement>();
if (pinnedContainer!=null)
{
pinnedContainer.ClipDrawing = false;
}
}Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik