Load on demand ComboBox items

[Neil]

I have two MVC ComboBoxes and am using c# with MVC 2. The second Combobox's items list is dependent on the selected value of the first combobox. I am able to get the selected value from the first combobox but cannot find a way to load the items on the second combobox. What is the best way to dynamically remove and load items on the second combobox depending on the value of the selected value of the first combobox? Is this best to be done with javascript or is there a way to do it with the client side binding? Can you please provide me with a code example to do this? Any help would be greatly appreciated. Thank you.

[Georgi Krustev]

Hi Neil,

In general the best way to rebind second combo is to use javascript. I will suggest you to wire onchange event of the first combobox. When the item is changed, you can call dataBind client method  in order to rebind second combobox. Here is a code snippet showing how to achieve this:

function bindSecondCombo(data){
  var combobox2 = $('#secondCombo').data('tComboBox');
  combobox2.close();
  combobox2.dataBind(data);
}

Sincerely yours,
Georgi Krustev
the Telerik team

[Neil]

This works perfectly. Thanks!

[Jigar]

Hi Guys,

Can you please explain this in detail? or If you can give example for this.

thanks,

Jigar.

[Jigar]

Hi There,

I achieved the desired functionality; Thanks.
This is what i have done;

function OnSelect(data) {
       var aDropDown = $('#aId').data('tDropDownList');
       var bDropDown = $('#bId').data('tDropDownList');
        bDropDown.close();
        $.ajax(
                 { type: "POST",
                     url: "/ABC/_FillDropDownList",
                     data: "id=" + aDropDown.value(),
                     success: function (data) {
                         bDropDown.dataBind(data);
                     },
                     error: function (req, status, error) {
                         alert('Data Not Found')
                     }
                 });
    }

this works for me. But I guess there should be a much easier way to do so; I mean there should be some telerik javascript which does this job.  If so then Please suggest.

One more question; How can i know that which component called this particular script? In other words, How can get component name in javascript?

Thanks,

Jigar.

[Neil]

Hi Jigar,

On your first post for example, say 'n have two ComboBoxes. The first gives a list of sports, and the second a list of countries that play the particular sport selected in the first ComboBox. Hence, the second combobox is dependent on the value of the first.
What you have to do is:

Add a ClientEvents attribute to your first ComboBox:
Name("Sport").ClientEvents(events => events.OnChange("RetrieveSportCountries"))

Say the second ComboBox name is "Country" and you have a controller called SportController, the javascript section should look something like the following:

<

 

script type="text/javascript">

    sportCountryListtUrl =

'<%=Url.Action("GetSportCountryList", "Sport") %>'

    
    function

 

RetrieveSportCountries() {

 

 

        var sportcmb = $('#Sport').data('tComboBox');

 

 

        if (sportcmb!= null) {

 

 

            var sportId = sportcmb.value();

 

            $.post(sportCountryListUrl, { sportId: sportId },

function(data) {

 

                $(

"#Country").data('tComboBox').dataBind(data);

 

                },

"json"

 

            );

        }

    }

 

</

 

script>

 

Now, in your controller you need an action method that returns JsonResult and takes as a parameter the sportId. Something like this:

[

HttpPost]

 

 

public JsonResult GetSportCountryList(int? sportId)

 

{

 

    SportRepository repository = new SportRepository();

 

 

    int sport;

 

 

    if (int.TryParse(sportId.ToString(), out sport))

 

 

        return Json(new SelectList(repository.GetCountryList(sport), "Key", "Value"));

 

 

    return Json(new object());

 

}

I hope this helps?

[Jigar]

Hi Neil,

thanks a lot for you help.

Actually I have 3 combo boxes, and all are use one DropDownList.ascx file; now for all of them onchange event is same. So I want to check combobox name who is calling this javascript function and accordingly will execute the action. this can be achieved, if i can know the component name in script.

For Example:
var sportcmb = $('#Sport').data('tComboBox');   gives object of the combobox named "Sport".  same way
var sportcmb = $(this).data('tComboBox')  also does the same thing. But here I want to know the component name.

Ex. var cmbName = $(this).name  (though name is not supported ( method or property))


Can you please tell me how can I access the component name in javascript?

Thanks.

[Andrew]

I have posted an example that does this at:
http://www.telerik.com/community/forums/aspnet-mvc/combobox/cascade-combobox.aspx#1622785

[nachid]

There is also a solution posted by the Telerik team in the Code Library

[Andrew]

Thanks for pointing me out to the Code Library.

I believe that example however will not work with filtering out-of-the-box.

[Kwok (Andrew)]

I get the same problem plus more. I don't want a postback by Ajax to get the second list. Is any way I can filter it out on the second list when I change the first ComboBox value. Sure I had download a full list of the second ComboxBox to the client side.