Dynamically adding controls to a panel - layout question - asp.net

I've successfully been able to add controls (labels, images, buttons, etc) to a panel control (using VB/ASP). This panel control, I refer to it as "insertpanel". Then I add this panel to the main panel on my webpage which I made during design time. The problem I run into is that when I add multiple controls of any type to the panel, they are all added in line with each other. I tried giving my image some css-styling of:
.VBCODEimageinsert
{
float:left;
margin:2px;
}
That works fine as making the image be at the left side of the panel, and the 5 labels to the right of it. Problem is, the labels are all in line and they don't wrap to the next line. I tried adding a literal of the carriage return/line feed but that didn't seem to work either. What is an easy way of laying out this panel that i'm inserting into another panel? A table? And can I do this if a table will work:
mainpanel.Controls.Add(table)

Yes, you can add a table, then rows and cells for the other controls. And as mentioned above, you can use a < br/> instead

Related

When ASP panel expands via CollapsiblePanelExtender telerik radhtmlchart is smaller

I have a Telerik RadHtmlChart inside an asp Panel which uses an ajaxtoolkit CollapsiblePanelExtender.
If the panel is collapsed when I assign a datasource to the chart and databind, after the panel expands the chart only fills 1/2 the panel size, left to right. If I have the panel expanded and the chart visible during the databind, it fills the panel all the way across as expected.
Somehow I need to know when the panel has expanded and tell the chart to resize/repaint and fill the available space in the panel, but so far no joy doing this.
Or maybe there is a flag/property on my controls I've missed which would help the chart fill the available space even when the panel is collapsed.
I would prefer to work in the C# code behind, but javascript/jquery solutions are also appreciated.
Thanks,
-Rico
HtmlChart renders on the client so you would need to use JavaScript. Here is how to resize a chart when its container resizes: http://www.telerik.com/support/code-library/radhtmlchart-in-a-responsive-web-page. Essentially - make sure its div container has the desired size and call its repaint() method.
Here is how to hook up to the client-side events of the CollapsiblePanel: http://forums.asp.net/t/1112899.aspx?How+to+track+Collapse+Expand+event+of+AJAX+Collapsible+Panel+Extender+to+call+javascript+ It is a tad tricky and you have to attach them with more client side code (add_expandComplete(theHandlerFunctionObject) and add_collapseComplete(theHandlerFunctionObject) after having the client-side object of the CollapsiblePanel).
Of course, if you trigger the expand/collapse yourself you can simply call the needed script, depending on your logic - either add it to already existing client-side handler, or registger it from the server.

adding border around controls dynamically...asp.net

My ASP.NET application allows the user to create their own screens. They can, for example, drag controls like textboxes, combos, etc and place them on the desginer. Now, they want to group specific controls in a box. For example, all the Basic information such as User name, address, age ,DOB etc should be surrounded by a single box (like..group box control). The code on runtime, dynamically places all these controls to create a page.
I tried to achieve this using a Panel control with a black border. This works fine, but when I add a background color to the panel, I no longer see the controls inside the panel. They are hidden.
Is there any good to achieve this. Please help.

Designing Custom Drop Down with mulitple rows and columns

I have a requirement like for the drop down as shown. Could any one help me in achieving this.
Briefing:
On click of the button a pane should be opened which contains rows and columns containing text, on click of it appropriate action need to take place. The source can be dynamic too....
There are many techniques for acheiving this design. You could do it purely with html and css by having an image that looks like a dropdown popup an absolutely positioned div underneath. Or you could use the asp.net ajax control toolkit control called "PopupControl" that essentially abstracts all the html/css away allowing you to just specify a target panel. There are also various jquery plugins, here is one from abeatifulsite.

Looking for a vb.net code to add existing buttons/text boxes/drop down lists, etc. to a container, or holder?

I'm using vb.net. Basically, I have a drop down list, text box and a submit button. You choose a movie director from a drop down list, then type in a movie, click button and it adds the data to my database.
There's another button which hides/shows drop down list, text box and submit button using Visible = True and Visible = False, but what I don't like about it is when it hides the things I said before, it leaves some white/empty space like if they are still there, but not visible.
Is there anyway to put some kind of holder/container and place a button which when clicked could add my drop down list, text box and submit buttons to that place?
Cheers,
E.N.
I assume that you are working with WinForms in Visual Studio. In the Toolbox the controls which could help you out of this situation are in the "Containers" section. Among others, there is a Panel, a FlowLayoutPanel and a TableLayoutPanel (see this video on msdn for a TableLayoutPanel Demo). They can help you to organize controls. Especially the FlowLayoutPanel places the controls automatically. But you can always change the Top and the Left properties of any control, to move them around to the desired place or group some of them on a Panel and change the Location of this one one.
You can add a control to a container by using the Add method of its Controls property. However, if the control is already on the form (since you are asking how to add an existing control) you must remove it from the form before.
Me.Controls.Remove(myButton)
panel1.Controls.Add(myButton)

How can you add a TouchGridPanel to a Panel in Sencha 2?

I'm currently using the Sencha Ext.ux.TouchGridPanel, and I need to know how to add it to a Panel dynamically. Currently, I set up a store, then use a function to generate the Panel. I then use
myPanel.add(myTouchGridPanel);
This displays the toolbar and headings of the Panel, but not any of the information within it. Making the TouchGridPanel fullscreen works, but then the animations are sloppy.
If the component is working correctly, perhaps the panel you are inserting it into is not the size you expect it to be?
Or maybe the GridPanel is not stretching to the size of the panel, in which case, you should add a fit or card layout to the panel, so it fits to the size of that panel.
If neither of these two things work, I suggest you open up web inspector and look at the dom of your panel - and see what the size of it is, and if the grid is actually being added to it or not.

Resources