How to display sometext with "...." in the grid column on resizing the custom cell element.?

[Santosh]

I have created a custom cell element column in the telerik RAD grid for windows.
Custom column has two children 1)RadLabelElement 2)RadButtonElement.
RadLabelElement displays text and RadButtonElement is clickable(to open some popup form)

For example: My custom column will have something like : helloworld with a button besides it.

But if i resize the column(decrease the column size), i want to have my "helloworld" text to appear with "hellowor...". But it is not happening. I found that "..." is behind the button element.

But if make the button element visible false, i can see that "..." on resize of the column(decrease the size of the column).

Could you please help me how to show "..." text along with the button element when the column is resized?

Thanks
Santosh.

 

 

 

 

[Svett]

Hi Santosh,

I am not able to assist you efficiently without sharing a code snippet that demonstrates how you implemented the custom cell. Hence, I can figure out what should be tweaked to accomplish the desired scenario.

Regards,
Svett
the Telerik team

[Santosh]

Below is the code which i have used to create custom column.
i will have a column in the grid containing some text and button besides it. 

If column width is large enough, it displays the complete text and the button. 

like "welcome" with button besides it.

If column width is small then i want to display like the following:
"welco..." with button besides it. ("..." is displayed as column size is less to hold the complete text.)




 public class LabelCellElement : GridDataCellElement
    {
      
        public LabelCellElement(GridViewColumn column, GridRowElement row)
            : base(column, row)
        {
        }

        private RadLabelElement radLabelElement;
        private RadButtonElement radButtonElement;

        protected override void CreateChildElements()
        {
            base.CreateChildElements();

            radLabelElement = new RadLabelElement();
            radLabelElement.Alignment = ContentAlignment.MiddleLeft;
            this.Children.Add(radLabelElement);
            radButtonElement = new RadButtonElement();
            //radButtonElement.Size = new System.Drawing.Size(10, 5);
            radButtonElement.Text = "click";
            radButtonElement.Margin = new System.Windows.Forms.Padding(20, 1, 3, 1);
            radButtonElement.Click += new EventHandler(radButtonElement_Click);
            this.Children.Add(radButtonElement);
            this.Children[0].Alignment = ContentAlignment.MiddleLeft;
            this.Children[1].Alignment = ContentAlignment.MiddleRight;
        }
        protected override void DisposeManagedResources()
        {
            radButtonElement.Click -= new EventHandler(radButtonElement_Click);
            base.DisposeManagedResources();
        }

        // Click event for radButtonElement
        void radButtonElement_Click(object sender, EventArgs e)
        {
            //some event
        }

        protected override Type ThemeEffectiveType
        {
            get
            {
                return typeof(GridDataCellElement);
            }
        }
        public override bool IsCompatible(GridViewColumn data, object context)
        {
            return data is LabelColumn && context is GridDataRowElement;
        }
        protected override void SetContentCore(object value)
        {
            if (this.Value != null && this.Value != DBNull.Value)
            {
                this.radLabelElement.Text = Convert.ToString(this.Value);
            }
        }
        protected override SizeF ArrangeOverride(SizeF finalSize)
        {
            if (this.Children.Count == 2)
            {
                float progressBarWidth = finalSize.Width - radButtonElement.DesiredSize.Width;

                RectangleF progressBarRect = new RectangleF(0, 0, progressBarWidth - 1, finalSize.Height);
                RectangleF buttonRect = new RectangleF(progressBarWidth + 1, 0, radButtonElement.DesiredSize.Width, finalSize.Height);

                this.Children[0].Arrange(progressBarRect);
                this.Children[1].Arrange(buttonRect);
            }

            return finalSize;
        }
    }

    public class LabelColumn : GridViewTextBoxColumn
    {
        public LabelColumn(string columnName, string headerText, string fieldName)
            : base(columnName, headerText, fieldName)
        {
        }

        public override Type GetCellType(GridViewRowInfo row)
        {
            if (row is GridViewDataRowInfo)
            {
                return typeof(LabelCellElement);
            }
            return base.GetCellType(row);
        }

    }

[Svett]

Hi Santosh,

You should change the layout of the LabelCellElement class. You can use the following code snippet to achieve the desired behavior:

public class LabelCellElement : GridDataCellElement
{
    private RadLabelElement radLabelElement;
    private RadButtonElement radButtonElement;

    public LabelCellElement(GridViewColumn column, GridRowElement row)
        : base(column, row)
    {
    }

    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(GridDataCellElement);
        }
    }

    protected override void CreateChildElements()
    {
        base.CreateChildElements();

        this.radLabelElement = new RadLabelElement();
        this.radLabelElement.TextWrap = false;
        this.Children.Add(radLabelElement);

        radButtonElement = new RadButtonElement();
        radButtonElement.Text = "click";
        radButtonElement.Click += new EventHandler(radButtonElement_Click);
        this.Children.Add(radButtonElement);
    }

    protected override void DisposeManagedResources()
    {
        radButtonElement.Click -= new EventHandler(radButtonElement_Click);
        base.DisposeManagedResources();
    }

    public override bool IsCompatible(GridViewColumn data, object context)
    {
        return data is LabelColumn && context is GridDataRowElement;
    }

    protected override void SetContentCore(object value)
    {
        if (this.Value != null && this.Value != DBNull.Value)
        {
            this.radLabelElement.Text = Convert.ToString(this.Value);
        }
    }

    // Click event for radButtonElement
    void radButtonElement_Click(object sender, EventArgs e)
    {
        //some event
    }

    protected override SizeF MeasureOverride(SizeF availableSize)
    {
        if (this.Children.Count == 2)
        {
            this.Children[1].Measure(availableSize);
            availableSize.Width -= this.Children[1].DesiredSize.Width;
            this.Children[0].Measure(availableSize);

            float width = this.Children[0].DesiredSize.Width + this.Children[1].DesiredSize.Width;
            float height = Math.Max(this.Children[0].DesiredSize.Height, this.Children[1].DesiredSize.Height);

            return TableElement.ViewElement.RowLayout.ArrangeCell(new RectangleF(Point.Empty, availableSize), this).Size;
        }

        return base.MeasureOverride(availableSize);
    }

    protected override SizeF ArrangeOverride(SizeF finalSize)
    {
        if (this.Children.Count == 2)
        {
            float progressBarWidth = finalSize.Width - radButtonElement.DesiredSize.Width;
            RectangleF progressBarRect = new RectangleF(0, 0, progressBarWidth, finalSize.Height);
            RectangleF buttonRect = new RectangleF(progressBarWidth, 0, radButtonElement.DesiredSize.Width, finalSize.Height);
            this.Children[0].Arrange(progressBarRect);
            this.Children[1].Arrange(buttonRect);
            return finalSize;
        }

        return base.ArrangeOverride(finalSize);
    }
}

I hope this helps.

Kind regards,
Svett
the Telerik team

[Santosh]

Thank you Svett . It worked for me.