Dropdown list extensions

May 30, 2011 at 11:00 PM

Is there something in the toolkit to help me with an extended version of a dropdown list?

Basically my customer wants to be able to popup a search type drop box for a dropdown where they can add filters to the top of the grid and have paging to get through the list.  I know there is the grid but wondering how I tie it to an input box.



May 31, 2011 at 4:56 PM

I think I have not understood what do you mean. Maybe, yu mean one of the following:

1) A datagrid where you can put a search condition on each column. Yes, there is one, where you can put 2 search condition on each column see here this grid working:  http://mvccontrolstoolkit.codeplex.com/wikipage?title=DataGrid%20and%20Pager%20Complete%20Example. It is the example themed datagrid in the example RazorThemedGrid. The grid is defined into a razor helper file so you can custiomize it. It is based on the normal Mvc Controls Toolkit helper grouped together in order to furnish ba complex control with column filtering, sorting and paging. You can modify yourself its definition to adapt to your needs. In order to do this pls follow the tutorial http://www.dotnet-programming.com/post/2011/04/24/Designing-a-Themed-Control-in-the-Mvc-Controls-Toolkit.aspx and study how theming is supported in the mvc controls toolkit here:  http://mvccontrolstoolkit.codeplex.com/wikipage?title=Theming. Once you have defined it you can reuse the compose control as an unique grid all over your application as explained in the above links.


2) a dropdown with suggestions. that is you start writing a word and the list below the dropdown start being populated with words starting with that word mainly taken taken from a database. No I havent it but you can use the autocomplete of the jqueryui( prpbably you already included the jqueryui javascript). See doc here: http://jqueryui.com/demos/autocomplete/

You can make the the words are taken from a a db by defining an action method that provide the words as json. Please see the ajax call example in the above link.


If you mean something else please let me know, or provide me a link with a similar thing.

Jun 1, 2011 at 8:53 PM

Hi, sorry it is a bit hard to explain.  I have implemented the auto complete which is working fine but the customer wants another way though of searching for a value - here is the full example:

1. User is in a text box where they want to get the order number.

2. They don't know the order number but they know the customer number.

3. They click a "Search" button beside the textbox.

4. A modal popup is shown with a grid that has the following columns: Order Number, Customer Number, Order Date...no data is shown but has initial filters at the top of the grid

5. The user enters "Joe" in the Customer Number Filter and hits search

6. The grid is populated with all orders from Joe which they can page through.

7. The user finds the correct order number and selects it

8. The modal popup hides and the textbox is populated with the order number.

There are bits and pieces in the Toolkit which I could probably use to create this but was wondering if there is a simple solution or something that you know of to do this.



Jun 2, 2011 at 8:37 AM

basically you want a grid with filters in a popup modal windows.

You can proceed as follows:

1) implement a modal window with jquery UI Dialog. see here: http://jqueryui.com/demos/dialog/

2) put the div that will generate the dialog out of the begin.form because you will put into it an Ajax.form

3) put another div in the div used to define the dialog and populate it with an Action helper that will take the content from an action method

4) the conten of your inner div will be an Ajax.Form containing your filters and the grid

5) connect your modal window opening to  the button near your initial textbox


Now each time you do an operation on the grid such as reordering, filtering or whatever than you submit the ajax form that will cause an ajax update. If you need a display only grid with no filed editing I advice using the sorting list here: http://mvccontrolstoolkit.codeplex.com/wikipage?title=SortableListFor with mouse reordering disabled.

It is a good grid and you can add also header template and footer template. in the header template you can place the filter plus the column names. Then you can add a pager: http://mvccontrolstoolkit.codeplex.com/wikipage?title=Pager and a column sorting enabler if you need it: http://mvccontrolstoolkit.codeplex.com/wikipage?title=EnableSortingFor%20Helper


You can turn all this into a reusable component by defining a partial view or by using theming, and defining a themeable sortable list with all you need. 

About filering....you have several options: DataFilter Helper to specify dynamically filtering criteria , DataFilterClauseFor & FilterClauseSelect or snormal textboxes that you handle manually in the controller.

The basic idea of the Mvc Controls Toolkit is to furnish powerfull "parts" that you can easily assemble in custom controls. SO you can define your themes containing set of custom controls that are specific of your application type, or simply partial views or razor helpers if yiu don't need to define a whole theme.

I am drawing agreements with companies for the productions of low cost theme packages where you can find already implemented beautifull themes in open format so you can customize them. At moment I don't know the exact timing of this operation but I think in a couple of months the first themes package should be available.