How to sort controls at runtime in ASP.NET

Question

How to order Controls at runtime in ASP.NET for instance I have three text boxes in my web page in the following order

• textbox1
• textbox2
• textbox3

I want the order of these controls to be changed depending on the user preferences

• textbox3
• textbox2
• textbox1

that is just an example, any idea?

Answer 1

For a very simple proof-of-concept, you would need some kind of backing store like a database table that stores UserID, Ordinal, and AscxFileName. In SQL you could run a query such as:

SELECT AscxFileName FROM tableControls WHERE UserID=@UserID ORDER BY Ordinal

Then with the result set:

while(IDataReader.Read())
{
    Control myControl = Page.LoadControl(IDataReader["AscxFileName"].ToString());
    myPanel.Controls.Add(myControl);
}

Answer 2

Grab all the IDs of the textbox controls and store them in an array. Then just do a reverse sort:

Array.Reverse( mytextboxArray );

Answer 3

You dont really need to reorder the controls, you can just change the text of the labels in front of them and change the data which is populated in them based on the user preferences!

Answer 4

The jQuery UI framework can do that for you. Check out this demo and the docs for the same.

Answer 5

The easiest way is to use third-party controls like Telerik. More precisely DockZones.
Otherwise you'd have to create your own pagebuilder with this functionality.

Answer 6

Finally I have found a solution and I will explain it in detail

create a "panel control" and called it "myPanel" and put in this all controls you want to resort

<asp:Panel ID="myPanel" runat="server">
        <asp:Panel ID="dock1" runat="server">this is first module</asp:Panel>
        <asp:Panel ID="dock2" runat="server">this is second module</asp:Panel>
        <asp:Panel ID="dock3" runat="server">this is third module</asp:Panel>
</asp:Panel>

the output will be the following

this is first module

this is second module

this is third module

so what should I do to change their order, lets see I have created more three panels to act like a containers for the docks my code will be like this

<asp:Panel ID="myPanel" runat="server">
        <asp:Panel ID="container1" runat="server"></asp:Panel>
        <asp:Panel ID="container2" runat="server"></asp:Panel>
        <asp:Panel ID="container3" runat="server"></asp:Panel>
        <asp:Panel ID="dock1" runat="server">this is first module</asp:Panel>
        <asp:Panel ID="dock2" runat="server">this is second module</asp:Panel>
        <asp:Panel ID="dock3" runat="server">this is third module</asp:Panel>
</asp:Panel>

in the code behind I have something like this

this will remove dock1 control from mypanel and put it in container3

    Control myCtrl1 = myPanel.FindControl("dock1");
    Control containerCtrl1 = myPanel.FindControl("container3");
    myCtrl1.Visible = true;
    myPanel.Controls.Remove(myCtrl1);
    containerCtrl1 .Controls.Add(myCtrl1);

and you can manage these thing depending on user preferences from a database or a cookies

best regards