How to create a polldaddy like editor - asp.net

Most of you here must have used polldaddy. I would like to get some advise from you guys about how can I design an editor like the one seen in polldaddy. Below is a screenshot.
On the left side there is a list of controls (Text box, list etc) and on the right there is a panel(editor). I can click and drag on of the control and as soon as I drop it in the panel it aligns itself int he panel and shows other options. How can I do this using asp.net? Any samples or ideas would be great.
Thanks
alt text http://hdwall1.googlepages.com/poll.JPG

you have a lot of work to do.
Ignoring your server side model, you cashould probably use jQuery/jQuery UI/ExtJS or any other UI framework to allow drag/drop sort functionality.
I am not familiar with PollDaddy but I imagine that there's a lot of code there to achieve a poll/form builder. You could look at their code too assuming its not packed.
hope this helps.

Related

skin the dropdownbox

i am wondering if there is a way to skin the whole drop down box, after searching Google i could only find thing like adding icons resizing and alike, but no full skinning of the box.
Is this at all possible and if so how? i would very much like my whole program to be skinned rather than everything but the drop down boxes.
I am more of a designer than a coder so as far as code goes I'm quite a novice with the code side, would be a great help if you could give me a point in the right direction and/or a quick insight how to do it.
in flex... sorry
Thanks.
i am wondering if there is a way to skin the whole drop down box,
Yes, create a custom skin class for the DropDownList, just like you would any other Spark class. You can use code for the DropDownListSkin as a reference point for creating your own. In Flash Builder, if you create a new MXML Skin; and specify the hostComponent as a DropDownList then you'll get the DropDownListSkin code as a starter point for your customization.
For more info, read these docs on skinning Spark Components.
We did, in essence, exactly this to create our Mobile DropDownList.

Multiple select listbox without pressing CTRL

I thought this would be easy to do but I can't find a way.
I have a ListBox with selection mode set to multiple but I the user wants to be able to select multiple items without having to press CTRL.
Does anyone know an easy way to do this?
Googled it and find the following: http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
Here is some pointers:
Download and reference: https://raw.github.com/ehynds/jquery-ui-multiselect-widget/1.12/src/jquery.multiselect.js
The just type:
$(function(){
$("select").multiselect();
});
Of course you need to reference jQuery as well, and the css to make it look good.
What the widget does is that it takes an select list and turn it create a list of checkboxes around it and styles them properly.
A simple jsfiddle example I put together: http://jsfiddle.net/AFVfQ/1/
It is not perfect, but it should show you how it works. Note the resources on the left hand side, the I'm referencing jquery ui css and a theme.

Changing the Telerik MVC Grid columns dynamically on client-side

I would like to show my table data in grid. The table has more than 50 columns. By default they are displayed fine but I need a way to hide/show columns which are not required on screen.
So is there any way to achieve this? I think right clicking on the header should show all headers in a list box, allowing selection of which columns we want, then refresh the grid.
Please let me know if Telerik supports this and, if so, how?
No builtin feature available and this is one of many reasons why we are still thinking about other grids instead of telerik.
In the demo site there is a page where they show all the column names with checkboxes on top of the grid and you can check/uncheck to show/hide columns. see that sample source code, is simple to implement but still is custom code to add manually. I love the devexpress grid with customization popup and columns dragdrop from there but nothing like that for us in Telerik :-(

MVC3 - Multiple select process for a large list of items

Whats the best way to do the following in MVC3 (razor). User needs to pick one more more items from a List and click on button. The list can run into 40 to 100 items. Thats where my problem is, I am looking to see if there is any other solution (other than a list box) to do this more efficiently. Right now, I think I can do this by using a combination(or only one of) of an Auto complete text box and a list box in MVC3. Also how can I use list box in MVC3 with hard coded list tems.Any suggestions/ideas? Thanks in advance for your feedback.
You might want to take a look at using a list search functionality as described in this post it uses a jQuery plug in and you could always hook it up through an jquery ajax to get further data back from an MVC action method.
If this doesn't help then let me know and I'll try and put together an example in the morning.
Hope this helps.
Check out "jQuery UI Multiselect" http://www.quasipartikel.at/multiselect/

How to make an entire jqGrid disabled/readonly

How can I make an entire jqGrid disabled/readonly?
I have a page with a logical "edit section" which I show when the user selects something to edit, and hide when the user is done editing (save or cancel). While the edit section is shown, I disable several other elements on the page. I would like to disable their ability to click in the jqGrid, so they can't change selected rows, re-sort, etc. But I cannot find a way to disable/enable the grid as a whole.
Apologies if this has been answered already - other questions seemed to focus on disabling only certain behaviors within the jqGrid.
Edit: Preferably, I'd like an approach that isn't dependent on yet another 3rd-party addon. Nothing wrong with them, of course! But my client has a degree of reluctance with them, so my life would be a little easier with a purely jQuery/jQueryUI/jqGrid solution. :)
You could use blockUI to block the grid.
Try using $("#lui_" + myGridId).show().
The grid has created this overlay internally an uses it as one part of the loader message.
You can just show it or hide it and it will disable/enable the grid for you.

Resources