How to make radlistivew's dock to fill?

3 posts, 1 answers
  1. Paul
    Paul avatar
    34 posts
    Member since:
    Apr 2017

    Posted 17 May Link to this post

    Hello,

    I tried to use RadListView to make component just like user preference.

    The idea are:

    1. We have dynamic columns to display in a table (RadGridView)
    2. We have a list of user preference for these columns and user can change the position of columns by change the position of user preference

    Then in step 2, I tried to use RadListView to display a list of user preference with checkboxes, drag/ drop feature to support these requiredment

    But when I open this RadListView, if there are many preferences (one preference is one column) then RadListView have a scrollbar and have padding bottom too long (attachment #1) although it have space to display items. Then I have to scroll down to view.

    My question is, how to remove this long padding?

    My video to demonstrate is: https://drive.google.com/file/d/0B-bxiBfBubRgSi1PRVRmWUV2YWs/view?usp=sharing

    My code are:

    private RadListView lvUserPreference = new RadListView();
     
    // Styles
    lvUserPreference.Dock = System.Windows.Forms.DockStyle.Fill;
    lvUserPreference.Margin = new System.Windows.Forms.Padding(0);
    lvUserPreference.Name = "lvUserPreference";
    lvUserPreference.ListViewElement.DrawBorder = false;
    lvUserPreference.ShowCheckBoxes = true;
    lvUserPreference.ViewType = ListViewType.ListView;
    lvUserPreference.AllowDragDrop = true;
    lvUserPreference.Padding = new Padding(20);
    lvUserPreference.Margin = Padding.Empty;
    lvUserPreference.ItemSpacing = 15;
    lvUserPreference.AllowEdit = false;
    lvUserPreference.AutoScroll = true;
     
    lvUserPreference.ListViewElement.DragDropService.PreviewDragStart -= OnPreviewDragStart;
    lvUserPreference.ListViewElement.DragDropService.PreviewDragStart += OnPreviewDragStart;
     
    lvUserPreference.ListViewElement.DragDropService.PreviewDragOver -= OnPreviewDragOver;
    lvUserPreference.ListViewElement.DragDropService.PreviewDragOver += OnPreviewDragOver;
     
    lvUserPreference.ListViewElement.DragDropService.PreviewDragDrop -= OnPreviewDragDrop;
    lvUserPreference.ListViewElement.DragDropService.PreviewDragDrop += OnPreviewDragDrop;
     
    lvUserPreference.VisualItemFormatting += OnVisualItemFormatting;
     
    // Item formatting event
    private void OnVisualItemFormatting(object sender, ListViewVisualItemEventArgs e)
    {
        e.VisualItem.ToggleElement.Margin = new Padding(10);
        e.VisualItem.BackColor = ComponentSettings.DefaultBorderColor;
        e.VisualItem.GradientStyle = GradientStyles.Solid;
        e.VisualItem.Margin = new Padding(0);
        e.VisualItem.MinSize = new Size(200, 30);
        e.VisualItem.Font = ComponentSettings.DefaultFont;
     
        var itemAttrId = (int)e.VisualItem.Data.Value;
        var field = _fields.FirstOrDefault(x => x.AttrId == itemAttrId);
        if (field != null && (field.IsTreeField || field.IsRequired))
        {
            e.VisualItem.ToggleElement.Enabled = false;
        }
        else
        {
            e.VisualItem.ToggleElement.Enabled = true;
        }
    }

     

    Regard,

    Paul

  2. Answer
    Dimitar
    Admin
    Dimitar avatar
    1871 posts

    Posted 17 May Link to this post

    Hello Paul,

    Remove the MinSize from the formatting event. You can set the item size like this:
    lvUserPreference.ItemSize = new Size(200, 30);

    In addition, I want to say that the grid supports this out of the box. Detailed information is available here: Column Chooser | RadGridView.

    I hope this will be useful. Let me know if you have additional questions.

    Regards,
    Dimitar
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Paul
    Paul avatar
    34 posts
    Member since:
    Apr 2017

    Posted 17 May in reply to Dimitar Link to this post

    Hello Dimitar,

    Thanks you for your help, it working well for me.

    I will take a look at the feature: grid supports this out of the box

    Regard,

    Paul

Back to Top