This is a migrated thread and some comments may be shown as answers.
Text overflow to adjacent cell
13 Answers 19 Views
This is a migrated thread and some comments may be shown as answers.
Dreyfus
Top achievements
Rank 1
Dreyfus asked on 14 Jun 2020, 03:00 AM

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.

13 Answers, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Sr.
Telerik team
answered on 15 Jun 2020, 04:48 AM
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.
0
Dreyfus
Top achievements
Rank 1
answered on 16 Jun 2020, 07:17 AM
Thanks Dess. However, I noticed that the grid lines will disappear on these custom cells. Any possibility to make them visible?
0
Dess | Tech Support Engineer, Sr.
Telerik team
answered on 16 Jun 2020, 09:23 AM

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.
0
Dreyfus
Top achievements
Rank 1
answered on 23 Jun 2020, 08:46 AM
Thank you.
0
Dreyfus
Top achievements
Rank 1
answered on 08 Jul 2020, 07:33 AM

Hi Dess.

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

 

0
Dess | Tech Support Engineer, Sr.
Telerik team
answered on 08 Jul 2020, 11:37 AM

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.
0
Dreyfus
Top achievements
Rank 1
answered on 09 Jul 2020, 09:15 AM

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

Thanks.

0
Dreyfus
Top achievements
Rank 1
answered on 27 Jul 2020, 06:10 AM

Hi Dess.

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

0
Dess | Tech Support Engineer, Sr.
Telerik team
answered on 28 Jul 2020, 09:47 AM

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

0
Dreyfus
Top achievements
Rank 1
answered on 28 Jul 2020, 09:54 AM

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?

0
Dess | Tech Support Engineer, Sr.
Telerik team
answered on 28 Jul 2020, 11:46 AM

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

0
Dreyfus
Top achievements
Rank 1
answered on 07 Aug 2020, 08:27 AM

Thanks Dess. The alignment works.

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

0
Dess | Tech Support Engineer, Sr.
Telerik team
answered on 07 Aug 2020, 11:28 AM
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

Asked by
Dreyfus
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Sr.
Telerik team
Dreyfus
Top achievements
Rank 1
Share this question
or