Click here to Skip to main content
15,030,320 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
See more:
I have a requirement that the User be able to design his own UI (user has a set of Controls available and the user can select a control and start adding the controls to the page.

Now I need a mechanism where I can show what control the user added to begin with and start adding the controls and their position on the page. For the user to be able to understand the controls the user has added, I should be able to show the control hierarchy on a grid ? panel ? iframe ? I dont know , which looks close to the actual hierarchy and order on the page.

I would then read the control position and generate a xml and render the page using XSLT.

Now I need some ideas on how I would show the controls the user just added to the page on a grid ? or some other canvas type so that it looks close to the layout of a page ?

Any suggestions ?

To be even more clear ..

Lets say the page has a drop down with the list of all allowable controls the user can add.. he selects it ..maybe in a panel or this is where I am stuck on what and how ... I show the control added and then the user selects another control he wants to add , either right beside , top , right , left to the previously added control.

--------------------------------------------------
Label TextBox Button
Label TextBox
Label TextBox Label DropDown Label TextBox
Button
--------------------------------------------------

something like this ?

Btw those aren't controls just a literal or something showing the controls the user has added in the respective order so far.

I would then read all the controls their relative positioning and transform it into an XML which would then be transformed and rendered as a page by XSLT.
Posted
Updated 22-Jun-11 18:36pm
v4

1 solution

While it would be fairly tricky to do, you could (using a liberal dose of jQuery), drag and drop the "controls" from a toolbar and capture the co-ordinates that you added them at. To get an idea of how to do this, why not take a look at the jQuery UI[^] to get an idea of how you could do this using their interactions.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900