MVC Razor dropdown list with jcf plugin

Its one of these moments when you search Google for a hint, a blog or even a document that will explain to you how this plugin really works and its just a single stack overflow question!!

Anyways, I had to work on an MVC project that used jcf plugin to customize dropdown lists. Simple binding and lets use a straight forward static data source:

Now, all is set and the data is loaded like charm. Well, what if you decided to LOAD data in an Ajax call. Yup, you won’t be able to see the data in the dropdown list. Yes, I just said that!! inspect the element and you will see the data items in place but are not showing in the dropdown list. Based on Stack Overflow above, you need to rebuild the dropdown list again as this was the only solution that worked with me:

and how about an edit mode, were you need to load the Ajax call then set the selected item. another headache that is solved by:

Another “supposedly” simple change, the dropdown list is hidden and only shown on the selected change of another dropdown list. Yes, this should be a simple Jquery Show/Hide, but no this plugin is tricky so even if you already bind the data, once the dropdown is shown, no items are there! so you need to apply the rebuild trick AGAIN! and make sure if there is another dropdown lists that are dynamically binded, to make sure to rebuild in the correct order or just leave this step when all your dropdown lists are loaded so you won’t lose the data after that.

and… bon appetit!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s