Horizontal Scroll in ViewType of ListView

3 posts, 1 answers
  1. D.Snake
    D.Snake avatar
    2 posts
    Member since:
    Mar 2015

    Posted 07 Apr 2015 Link to this post

    Hi guys, 

    I have a RadListView, its ViewType is ListView. I use a custom item of SimpleListViewVisualItem like below.

    The problem is that when Item.Text is too long and overflow, ListView has no horizontal scroll to see the full text.

     Is there any way to fix it?

     

    public class UnitListVisualItem : SimpleListViewVisualItem
        {
            private LightVisualElement element1;
            private LightVisualElement element2;
            private StackLayoutPanel layout;
     
            protected override void CreateChildElements()
            {
                base.CreateChildElements();
     
                this.layout = new StackLayoutPanel();
                this.layout.EqualChildrenWidth = true;
                this.layout.Margin = new Padding(30, 20, 0, 0);
     
                this.element1 = new LightVisualElement();
                element1.TextAlignment = ContentAlignment.MiddleLeft;
                element1.MinSize = new Size(160, 0);
                element1.NotifyParentOnMouseInput = true;
                element1.ShouldHandleMouseInput = false;
                this.layout.Children.Add(this.element1);
     
                this.element2 = new LightVisualElement();
                element2.TextAlignment = ContentAlignment.MiddleLeft;
                element2.MinSize = new Size(160, 0);
                element2.NotifyParentOnMouseInput = true;
                element2.ShouldHandleMouseInput = false;
                this.layout.Children.Add(this.element2);
     
                this.Children.Add(this.layout);
            }
     
            private bool IsNotZero(ListViewDataItem item, string field)
            {
                return item[field] != null && Convert.ToInt32(item[field]) != 0;
            }
     
            protected override void SynchronizeProperties()
            {
                base.SynchronizeProperties();
                this.AutoSize = true;
                this.AutoSizeMode = RadAutoSizeMode.FitToAvailableSize;
     
                RadElement element = this.FindAncestor<RadListViewElement>();
     
                if (element == null)
                {
                    return;
                }
     
                this.Text = "<html><span style=\"color:#141718;font-size:12.5pt;\"> " + this.Data["Name"] + "</span>";
     
                this.element1.Text = "<html><span style=\"color:#010102;font-size:8.5pt;font-family:Segoe UI Semibold;\">" +
                    "Mã đơn vị:<span style=\"color:#13224D;font-family:Segoe UI;\">" + this.Data["MaDV"] + "</span>" +
                    "<br>Trạng thái:" + (this.IsNotZero(this.Data, "Status") ? "<span style=\"color:#13224D;font-family:Segoe UI;\">" + this.Data["StatusName"] : "<span style=\"color:#D71B0E;\">" + this.Data["StatusName"]) + "</span>" + "</span>";
     
                this.element2.Text = "<html><span style=\"color:#010102;font-size:8.5pt;font-family:Segoe UI Semibold;\">" +
                    "Hiệu lực từ   :<span style=\"color:#13224D;font-family:Segoe UI;\">"
                    + (this.Data["ValidFrom"] == DBNull.Value ? "" : Convert.ToDateTime(this.Data["ValidFrom"]).ToString("dd/MM/yyyy")) + "</span>" +
                    "<br>Hiệu lực đến:<span style=\"color:#13224D;font-family:Segoe UI;\">"
                    + (this.Data["ValidTo"] == DBNull.Value ? "" : Convert.ToDateTime(this.Data["ValidTo"]).ToString("dd/MM/yyyy")) + "</span></span>";
     
                this.TextAlignment = ContentAlignment.TopLeft;
            }
     
            protected override Type ThemeEffectiveType
            {
                get
                {
                    return typeof(SimpleListViewVisualItem);
                }
            }
        }

  2. Answer
    Ivan Todorov
    Admin
    Ivan Todorov avatar
    688 posts

    Posted 10 Apr 2015 Link to this post

    Hi Toan,

    Thank you for contacting us.

    RadListView has three properties for controlling the size of its items:

    AllowArbitraryItemWidth - allows items to be auto-sized according to their content horizontally.
    AllowArbitraryItemHeight - allows items to be auto-sized according to their content vertically.
    ItemSize - sets the size constraint for all items in case any of the previous properties is false.

    In your case, you can either increase the ItemSize so that the values you want to display fit within the specified size, or set both AllowArbitraryItemWidth and AllowArbitraryItemHeight to true, which will allow your items to be auto-sized in both directions. In both cases, the horizontal scrollbar will display and will allow you to scroll through your items' content.

    The sizing modes and other properties concerning the items in RadListView are discussed in this help article: http://www.telerik.com/help/winforms/listview-features-working-with-items.html

    I hope you find this helpful. If you have any additional questions, feel free to write back.

    Regards,
    Ivan Todorov
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for WinForms is Visual Studio 2017 Ready
  4. D.Snake
    D.Snake avatar
    2 posts
    Member since:
    Mar 2015

    Posted 17 Apr 2015 in reply to Ivan Todorov Link to this post

    Hi Ivan,

    Thanks for you reply. It works like a charm.

Back to Top