This project is read-only.

grid, remove value from dropdown when in grid

Oct 16, 2011 at 12:53 PM


I have a grid. In that grid the first column is a dropdown list. The values in the dropdownlist can be used only once. Is there a way to make them unique per grid? Or is it possible to create a javascript that fires on dropdown to do some shizzle?


Oct 16, 2011 at 10:44 PM

Sorry, I have not understood your problem. Can you give me a more detailed explanation? The version 1.4.0 of the Mvc Controls Toolkit added a complete client side API, so it is very likely that your problem can be solved...but I need to understand it before :)

Oct 17, 2011 at 10:06 AM

Ill try to give you one ;) (I solved it now with serverside validation, but I would love to have some clientside action)

Lets say I have a dropdownlist in a grid that contains 4 values, "A", "B", "C". "D". everytime a new row is added, the user can normally select one of those 4 values. What I would like is that if, in an existing record or just added record, one of the values is already selected the already selected value becomes unselectable in the list. In the end you can ensure clientside that the user can maximal enter 4 rows in the table. 

I hope you get what I mean ;)

Oct 17, 2011 at 1:49 PM

You can add an handler for the change event to your dropdown.

You cand o it by adding a css class to it, say, MyClass,  and then using it to attach an handler:

$('.MyClass').change(function(){.........}) in the ready  event of the document

$('.MyClass', row)).change(function(){.........}) in the itemCreated event (to attach the handler also to the newly created row. See doc on the events here:


In the event handler compute the list of all used items: $(.MyClass).each(.......) in the each you add the selections of all dropdowns that are different from the the dropdown you are in... to an initially empty array.

Now you are ready to verify if you can accept the new selection. You see what the selected element is and if it is is in the list of used elements, you cancel the selection, by selecting the prompt element of the dropdown (the one sayng "please select an item"). This way an "not allowed" selection is automatically reset.

Finally if the updated list of all selected elements contain all elements you can disable the add button of the grid, otherwise you enable it. You can do it by applying a class to it, say MyAddClass, and doing:

$('.MyAddClass').prop('disabled', true) or $('.MyAddClass').prop('disabled', false)

Oct 18, 2011 at 9:31 AM

What I said before apply if your grid has benn done with the SortableListfFor. If you used the GatagridFor, the thing is a little bit ,ore complex because the user can undo previous actions.


As a first difference it is better to aff the change handler directly with a scrip inside the row, otherwise you have to detach it on when the column is deleted, attache when it is undeleted and so on...If you attach it in a script put inside the row tempate avoid all this. You can do it this way:


$('#item.PrefixedId(m => m.MyDropdownProperty)').change(function(){........} 


 Obviously item is the Html helper, if you use a Razor helper, if you use a partial view to define the row template you write Html.PrefixedId(.....


Now on the undelete or undo event you have to check if the old value of the row is in conflict with some other value, in such a case you put it on the prompt value of the DropDown, that is you have to rìtrigger the same function you use in the DropDown change event.