[Solved] Use ViewModel data on page load and repopulate via AJAX on some page event

[Ed]

In my ViewModel I have a List<SelectListItem> and I am using the MVC Extension Html.DropDownListFor to create the <select> element with its child <option> elements.

In javascript, I am turning that into a Kendo DropDownList

$('#ddCategories').kendoDropDownList();

I have a second DropDownList constructed in the same way (Html.DropDownListFor & in js, make it a Kendo DDL)

$('#ddProducts').kendoDropDownList();

I want to keep the initial page load fast and therefore want to keep the DropDownListFor in place, but I also want to allow the Categories change event to repopulate the Products DDL.  I can easily add the change event to the ddCategories DDL, but how can I configure the ddProducts to not load via AJAX on page load, but then to repopulate on the event of ddCategories change?  It seems to me you can either do one or the other, but this is not as efficient as I would like.

For example, I will eventually have upwards to 8-10 dropdowns on a single page, all cascading from each other (optionLabel not allowed, so first item will always be selected).  If I have them all cascade from each other on page load, that will take way too long (up to 7-9 sequential AJAX calls).  Ideally, I would populate them all from the ViewModel on page load and only perform the ajax refresh when the user interacts with the page (other issues with that many cascading drop downs that I will save for a different post once this question is answered)

Thanks,
--Ed

[Vladimir Iliev]

Hi Ed,

In current case I would suggest to use the "Html.Kendo.DropDownListFor" helper instead the default MVC editor. Then you can define remote operations for loading the items, implement server filtering and disable the "AutoBind" option - this way the DropDownList editors will show only the needed (filtered) data that will be loaded after the parent DropDownList change. For convenience you can check the following examples which demonstrates similar setup:

• DropDownList: Cascading DropDownLists
• InLine and PopUp Editing using Cascading DropDownLists (check the editor)

Regards,
Vladimir Iliev
Telerik

 

 

[Ed]

Hi Vladimir,

Is there a way to do this without using the Kendo MVC Extensions - just using Kendo js?

Thanks,
--Ed

[Vladimir Iliev]

Hi Ed,

As the Telerik UI for ASP.NET MVC widgets initialize Kendo UI widgets on the client side it's possible to achieve the same behavior:

• DropDownList: Cascading DropDownLists demo

Regards,
Vladimir Iliev
Telerik