Text overflow to adjacent cell in UI for WinForms GridView

Dreyfus

17 posts

Member since:
May 2019

Posted 13 Jun 2020 Link to this post

Hi. Is it possible to overflow a text into the next cell?

Something like no-wrap and no ellipsis but the whole text should still be visible.

There seems to be no straightforward way to do this in gridview.

text overflow.jpg

Dess | Tech Support Engineer, Sr.

Admin

4125 posts

Posted 14 Jun 2020 Link to this post

Hello, Jay,

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

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

CellTextOverflow.gif

Dreyfus

17 posts

Member since:
May 2019

Posted 16 Jun 2020 in reply to Dess | Tech Support Engineer, Sr. Link to this post

Thanks Dess. However, I noticed that the grid lines will disappear on these custom cells. Any possibility to make them visible?

Dess | Tech Support Engineer, Sr.

Admin

4125 posts

Posted 16 Jun 2020 Link to this post

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

Dreyfus

17 posts

Member since:
May 2019

Posted 23 Jun 2020 Link to this post

Thank you.

Dreyfus

17 posts

Member since:
May 2019

Posted 08 Jul 2020 in reply to Dess | Tech Support Engineer, Sr. Link to this post

Hi Dess.

One additional issue: How to make this work if the overflow cell and the adjacent cell/s are actually locked/readonly?

Dess | Tech Support Engineer, Sr.

Admin

4125 posts

Posted 08 Jul 2020 Link to this post

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

Dreyfus

17 posts

Member since:
May 2019

Posted 09 Jul 2020 in reply to Dess | Tech Support Engineer, Sr. Link to this post

My bad. The solution actually works. It's my modification that doesn't.

Thanks.

Dreyfus

17 posts

Member since:
May 2019

Posted 27 Jul 2020 in reply to Dess | Tech Support Engineer, Sr. Link to this post

Hi Dess.

I was wondering if its possible to make a cell to NOT overflow if the adjacent cell HAS value?

Dess | Tech Support Engineer, Sr.

Admin

4125 posts

Posted 28 Jul 2020 Link to this post

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

Dreyfus

17 posts

Member since:
May 2019

Posted 28 Jul 2020 in reply to Dess | Tech Support Engineer, Sr. Link to this post

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?

Dess | Tech Support Engineer, Sr.

Admin

4125 posts

Posted 28 Jul 2020 Link to this post

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

CenterLVE.gif

Dreyfus

17 posts

Member since:
May 2019

Posted 07 Aug 2020 in reply to Dess | Tech Support Engineer, Sr. Link to this post

Thanks Dess. The alignment works.

There is one more thing though. It seems like the text wont overflow if the column is pinned?

Untitled.png

Dess | Tech Support Engineer, Sr.

Admin

4125 posts

Posted 07 Aug 2020 Link to this post

Hello, Jay,

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

I hope this information helps.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik