Flow Layout in RadPanel

[Phillip]

Hi,

I notice the documentation for the Wrap Layout class, but cannot find a way of applying a Layout specifically to a RadPanel - I must be having a bad day, because its clearly what its there to do. I want to replace my standard WinForms FlowLayoutPanel with the visual goodness of a Rad control, and think this would be the best approach.

Has anyone managed to do it, or have another possible approach ?

Thanks
Phillip H

[Boyko Markov]

Hello Phillip,

Thank you for writing. WrapLayoutPanel is currently used as a layout only for RadElements and cannot be used for Controls. However you can subscribe to the Layout event of RadPanel and implement custom logic which will layout your controls in the panel. Here I have prepared a very simple sample for this scenario - RadPanel with custom layout implementation which resembles WrapLayoutPanel.

1. Create a new instance of RadPanel
  
   private RadPanel panel = new RadPanel();

2. I have added 10 buttons in my panel and set its Dock property to Fill (You can add any control to it).

 for (int i = 0; i < 10; i++)
            {
                Button newButton = new Button();
                newButton.Text = "button" + i;
                panel.Controls.Add(newButton);
            }

            this.Controls.Add(panel);
            panel.Dock = DockStyle.Fill;

3. Subscribe to the Layout event

      panel.Layout += new LayoutEventHandler(panel_Layout);
     
4. Implement the controls flow logic. Let me explain what really happens in the code below:
     4.1 Initialize the x and y coordinates.
     4.2 Increase the x coordinate with the control width until the panel bounds are reached
     4.3 Get the maxHeight height for the controls in the current row
     4.4 Move to a new row if the bounds are reached and re-initialize the x value and the maxHeight field.
 
 void panel_Layout(object sender, LayoutEventArgs e)
        {
            int x  = 0;
            int y = 0;
            int maxRowHeight = 0;

            for (int i = 0; i < this.panel.Controls.Count; i++)
            {
                Control control = this.panel.Controls[i];
                control.Location = new Point(x, y);
        
                x += control.Width;
                maxRowHeight = Math.Max(maxRowHeight, control.Height);
 
                if (x >= this.panel.Width)
                {
                    x = 0;
                    y += maxRowHeight;
                    maxRowHeight = 0;
                    control.Location = new Point(x, y);

                }             
            }
        }

I hope this will help you. Please write me back if you need more information.
  
Best wishes,
Boyko Markov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Roland]

Im trying to do the same thing, but the documentation is very poor.

Is there any sample how to use the  WrapLayoutPanel  with any visual control ?

[shinu rag]

hii ..
i create a rad panel with round rectshape, when i dock a raddock control in this rad panel i can't see the shape of the rad panel...
how can i overcome this problem..
thanks
shinu

[Deyan]

Hello shinu rag,

You can try applying padding to the RadPanel control and thus the docked RadDock control will be shrinked so that the border of the container panel will be visible, as well as its shape.

Sincerely yours,
Deyan
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[shinu rag]

hiii  Deyan 

thank u