Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Jagdip Singh
210
Correct way of using the MVC helper to work with Cascading Combos
posted

Hello there,

I've been trying to use Cascading combos using iQueryable datasets returned from my mvc controller actions to populate one combo based on the selection of another.

My issue is that I'm having to use javascript/jquery for just 2 combos to populate from each other.

Here is how I'm initialiasing them.



@Html.Label("Country")

@(Html.Infragistics()
.Combo()
.ID("countryCombo")
.TextKey("Value")
.ValueKey("Key")
.SelectedIndexes(new[] { -1 })
.DataSourceUrl(Url.Action("GetCountries"))
.AddClientEvent("selectionChanged", "countryChanged")
.PlaceHolder("Select Country")
.InputName("countryId")
.Render())

@Html.Label("Region")

@(Html.Infragistics()
.Combo()
.ID("regionCombo")
.TextKey("Value")
.ValueKey("Key")
.Disabled(true)
.PlaceHolder("")
.Render())

and here is how the countryChanged event I use to manipulate the second combobox when the firsts selected event fires.

Is there a more elegant way of doing this without having to

1. use an event handler in javascript (although it provides more control) 

2. use jquery such as $regionComboEle.removeClass("ui-state-disabled");

Is there not a more native way of doing this? Am I missing some bit of syntax to achieve this?

Parents
No Data
Reply
  • 18204
    Verified Answer
    Offline posted

    Hello Jagdip Singh,

    Thank you for posting in our forums!

    The igCombo does not have any built-in functionality for cascading combos.  You may want to submit a new Product Idea for this here.

    To answer your second question, it is not recommended to bypass the widget method for setting options and calling methods by directly accessing the widget with the data() method.  Doing this will bypass some logic used by jQuery UI and can cause some issues.  If you set the options like below, they will work as expected (I've underlined the changes for easier visibility):

    [code]function categoryChanged(evt, ui) {
        var country = ui.items[0].data.Value;
        var url = '@Url.Action("GetRegions")';
        var $regionCombo = $("#regionCombo");

        $.ajax({
            url: url,
            type: "POST",
            data: { country: country },
            success: function (data) {
                $regionCombo.igCombo("option", "dataSource", data)
                    .igCombo("option", "disabled", false)
                    .igCombo("option", "placeHolder", "Select Region")
                    .igCombo("dataBind");
            }
        });
    }[/code]

    Additionally, jQuery UI will also allow you to set multiple options at once using an object:

    [code]$regionCombo.igCombo("option", { dataSource: data, disabled: false, placeHolder: "Select Region" })
        .igCombo("dataBind");[/code]

    If you need any further assistance with this, please let me know.

Children
No Data