Word wrap in RadGalleryItem

[Mihajlo]

Is it possible to have text in gallery item in several lines? I don't need a description text, but do need long main text. Was trying to do it with the code below, but if the text is really-really long then it will be clipped off on the top and on the bottom. I would expect ellipsis cutting the text, not clipping on top and bottom.

var item = new RadGalleryItem(text, image);
item.MaxSize = new Size(300, 64);
item.TextImageRelation = TextImageRelation.ImageBeforeText;
item.Children[2].Children[1].Children[1].Visibility = ElementVisibility.Collapsed; // hide description
((TextPrimitive)item.Children[2].Children[1].Children[0]).TextWrap = true;

 

[Dess | Tech Support Engineer, Principal]

Hello, Mihajlo,         

Enabling the TextWrap property for the respective TextPrimitive is a suitable approach. It behaves as expected on my end. Following the provided information, I was unable to reproduce the issue you are facing. Please refer to the below screenshot illustrating the behavior on my end with the specified version. I have attached my sample project. Feel free to modify it in a way to reproduce the experienced issue and get back to me with it so I can investigate the precise case. Thank you in advance. 



I am converting this forum thread into a support ticket in order to allow attachments. You can find the ticket in Your Telerik Account.

I am looking forward to your reply.  

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

[Mihajlo]

To observe the problem you need at least 5 lines of text. The text is then clipped out of view, with no ellipsis. Also, if ribbon bar's height increases due to some additional ribbon elements then the long text "spills" over the boundary rectangle. Try with this code added to the sample project:

RadRibbonBarGroup buttonGroup;

public RadForm1()
{
    InitializeComponent();

    this.buttonGroup = InitializeGroup("Group");
    this.buttonGroup.Items.Add(InitializeMediumButton(null, "button1"));
    this.buttonGroup.Items.Add(InitializeMediumButton(null, "button2"));
    this.buttonGroup.Items.Add(InitializeMediumButton(null, "button3"));
    this.ribbonTab1.Items.Insert(0, this.buttonGroup);

    this.radGalleryItem1.Text = String.Concat(Enumerable.Range(1, 20).Select(x => x.ToString("D9") + " "));
    this.radGalleryItem1.MaxSize = new Size(200, 64);
    ((TextPrimitive)this.radGalleryItem1.Children[2].Children[1].Children[0]).TextWrap = true;
}

protected virtual RadRibbonBarGroup InitializeGroup(string text)
{
    RadRibbonBarGroup group = new RadRibbonBarGroup();
    group.Padding = new System.Windows.Forms.Padding(3, 0, 3, 0);
    group.Orientation = System.Windows.Forms.Orientation.Vertical;
    group.Text = text;

    return group;
}

protected virtual RadButtonElement InitializeMediumButton(System.Drawing.Image img, string text)
{
    RadButtonElement button = new RadButtonElement();
    button.Image = img;
    button.Padding = new System.Windows.Forms.Padding(3);
    button.TextAlignment = ContentAlignment.MiddleLeft;
    button.Text = text;
    button.TextImageRelation = System.Windows.Forms.TextImageRelation.ImageBeforeText;

    return button;
}

 

[Dess | Tech Support Engineer, Principal]

Hello, Mihajlo,         

The provided sample project is greatly appreciated. I was able to replicate the problem you are facing. 

RadGalleryElement allows the user to choose among large number of visual items. In its default collapsed view, a gallery shows a single row of its items, as well as an up arrow and a down arrow that scroll to other rows of items. Note that you can enlarge the gallery popup by resizing the grip as it is illustrated in the attached gif file. The RadGalleryItem needs more space than the default ribbon's height. That is why the whole content of the multi-line gallery item is not displayed. 

The possible solution that I can suggest is to increase the height of the ribbon group. The following code snippet achieves the illustrated result:

public RadForm1()
{
    InitializeComponent();

    this.radGalleryItem1.Text = String.Concat(Enumerable.Range(1, 20).Select(x => x.ToString("D9") + " ")) + " END";
    this.radGalleryItem1.MaxSize = new Size(200, 0);
    ((TextPrimitive)this.radGalleryItem1.Children[2].Children[1].Children[0]).TextWrap = true;
}

private void RadForm1_Load(object sender, EventArgs e)
{
    this.radRibbonBarGroup1.AutoSize = false;
    this.radRibbonBarGroup1.Size = new Size(this.radRibbonBarGroup1.Size.Width, 130);
    this.radRibbonBarGroup1.MinSize = new Size(0, 130);
}

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

[Mihajlo]

But the text could be horribly-mindbogglingly long. I can't have a half-screen wide ribbon bar. So, if I want maximum three lines of text with ellipsis in the end if there's more, I would just have to figure out how to measure the text and manually cut the text with the ellipsis.

[Dess | Tech Support Engineer, Principal]

Hello, Mihajlo,     

If you specify the MaxSize of the TextPrimitive and enable its AutoEllipsis property, I hope that you will obtain the desired result:

this.radGalleryItem1.Text = String.Concat(Enumerable.Range(1, 20).Select(x => x.ToString("D9") + " ")) + " END";
this.radGalleryItem1.MaxSize = new Size(200, 64);
((TextPrimitive)this.radGalleryItem1.Children[2].Children[1].Children[0]).TextWrap = true;
((TextPrimitive)this.radGalleryItem1.Children[2].Children[1].Children[0]).AutoEllipsis = true;
((TextPrimitive)this.radGalleryItem1.Children[2].Children[1].Children[0]).MaxSize = new Size(200, 64);

Should you have further questions please let me know.

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