I am working on a page that has user controls that are arranged in a particular layout. I am modifying that page to support reordering the position based on user's preferences. So, essentially, on load, I have information on where I need to position the different user controls.
I can think of 2 approaches:
Do the reordering on the client side. This is not ideal for the user
as they see the reordering happening.
Do the reordering on the server side. This requires me to do a lot of
rewrite to dynamically load the user controls based on preferences.
Are there any other ways of accomplishing what I am trying to do?
I would recommend rearranging on the client-side because
You will save a post-back.
You will make the website seamless.
How can do you that
Use a main div containing all controls and another containing a loading image. Toggle there visibility while rearranging the controls using javascript, or
You can set visibility:hidden to your body and then after rearranging set visibility:visible
The drawback of this approach is that you will have to use absolute positioning.
There is an easier way; rendering is controlled by the parent container rendering them. It is possible to create a container, and have full control over the ordering of the rendering of its children (by overriding the RenderChildren method). It's not the easiest option, but it can work. The steps are:
Create a class that inherits from ContainerControl
Override the RenderChildren method
Within this method, it would render the children in the container, override it, do not call the base class version of it, and get the instances to the controls and render them. This is where the complication arises because you have to.
Related
In the system I'm working on we have a lot of grids, with very repetitive behaviours and properties. I'm going to make refactor and separate those to one common control that can be used in the whole system.
But I have a doubt - use CustomControll to achieve this, or UserControl?
Custom Control - I do not need to overwrite OnPaint at all, so it's a bit overkill. But on other hands - this control will be indeed a special case of Grid control, so inheritance seems to be natural chose.
User Control - it seems to fit better to make "some system control with preset properties and behaviors", but it will be containing only one child - the grid control. No composition. So it seems that using user control here is not what creation of User control mechanism had in mind
So what You guys think? It's better to use CustomControl, UserControl, or just throw programming away and became a monk?
I have a page of controls that I want to be able to move specific controls by ID to a different parent control server side.
A simple example being another control loads 2 controls vertically ontop of each other. I want a module that can reference those two modules by ID and lay them out horizontally.
I assume this would have to done after the Page_Load() event so that all the controls are loaded.
I think I can accomplish this with a recursive control.FindControl() but I'm thinking there is a more elegant way.
If you plan to dynamically move controls around the page then it’s better to programmatically set them on page where it’s needed.
You should be adding controls in the OnInit method that is run before the page load.
Roughly, the OnInit method would look like
a) check the state of the page and decide where to add control
b) add control where needed
I have created four ASP.NET Server controls that will inject a lot of JavaScript and HTML.
One control shows a html table.
One control is for showing a data entry form that have juery plugin validation.
One control is for creating a data entry form(described above)
One control is for modifying that data entered (above).
I want to apply a style the end user can define before the server control is loaded.
Like he/she can say that the HTML table, its tr, its td, have this height or width. He can specify colors, borders, font styles etc.
Before the control is populated he can set all the attributes in the design time.
What is the best way to achieve this?
Do I need to override CSS class properties of server control? if
yes, please provide the code.
If you want to do something like that, you would have to write a bunch of code.
However, you can easily create several different themes and let your user choose a theme before you load the controls. This option would be very easy to do using Themes. Check out this link on
Dynamic Themes
I need to implement TabControl-like behaviour with manual (on event, on a button click for example) pages switching and having all pages designed and implemented as separate forms. A form to be incorporated (as a panel control) inside main form and replaced by another form as needed.
How to achieve this?
PS: The reason why I don't want to use TabControl instead is because there are going to be too many tabs - I'd prefer to present the list of them as a TreeView and instantiate on demand. The another reason comes from another project of mine - there I am going to implement plug-ins, where a panel inside main window will be provided by a class loaded dynamically and will be runtime-switchable.
I need to implement TabControl-like behaviour with manual (on event, on a button click for example) pages switching and having all pages designed and implemented as separate forms
May I ask why this is a requirement? It seems like the logical approach would be to create a set of UserControls. You can place a UserControl in a form, and you can place a UserControl in a tab. You get modularity without the headache of implementing a very odd requirement which is a use case that the API developers obviously did not think was valid. I just can't think of a good reason to take the route you have suggested.
I did similar thing once, and for that reason, I have ReplaceControl method, which I paste below:
static public void ReplaceControl(Control ToReplace, Form ReplaceWith) {
ReplaceWith.TopLevel=false;
ReplaceWith.FormBorderStyle=FormBorderStyle.None;
ReplaceWith.Show();
ReplaceWith.Anchor=ToReplace.Anchor;
ReplaceWith.Dock=ToReplace.Dock;
ReplaceWith.Font=ToReplace.Font;
ReplaceWith.Size=ToReplace.Size;
ReplaceWith.Location=ToReplace.Location;
ToReplace.Parent.Controls.Add(ReplaceWith);
ToReplace.Visible=false;
}
Only thing left to do is to create some control manually on the form, as the placeholder for your Form. Use label, for example.
You could do this with an MDIForm as the main form, and then plain-old Forms as the separate forms. Or you could encapsulate each element's functionality as a UserControl which you can then swap out on your form in code.
The advantage of encapsulating your UI elements as UserControls is that if, for whatever reason, you need them to become forms in your application, you can just drop the UserControl on a form.
Update: Since you want to use a TreeView to select what the user is looking at, you definitely want to do this as a bunch of UserControls. The layout is simple: TreeView on the left, and whichever control is active on the right.
There's no need to justify not using a TabControl - tabs are the worst UI element in history.
Suppose I have an ajax TabContainer with two tabs. Due to certain buisness logic, we might set one of the tabs to Visible = false.
In this scenario, is it possible to hide the TabStrip at the top, so that they don't see only one tab?
OK; didn't get any replies, but just wanted to summarize what I was able to do:
For the above situation, I actually was able to move the contents of the one visible tab outside the container by reassigning its parent control, and then re-adding where it needed to go (my example is a little more complicated than usual, due to update panels being in the section of code getting moved)
However, it does seem possible to hide the TabStrip by modifying its CSS class depending on how many tabs should be displayed. See http://www.krissteele.net/blogdetails.aspx?id=117 or http://cushen.wordpress.com/2007/10/25/how-to-styling-the-asp-net-ajax-tabcontainer-control/ for some examples of how to modify the styling.