This is a migrated thread and some comments may be shown as answers.

Cascading comboboxes not working when value pre-selected

0 Answers 58 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Rich
Top achievements
Rank 1
Rich asked on 21 Sep 2012, 02:01 PM
Hi there

I am using the following code, which renders the correct brand (from a list of brands) and all the appropriate ranges applicable to that brand, with the correct brand selected. All good so far :)

<div class="formElement">   
    <label for="brands">Brand:</label>
    <input id="brands" value="@(Model.BrandID)" />
</div> 
 
<div class="formElement">   
    <label for="ranges">Ranges:</label>
    <input id="ranges" value="@(Model.RangeID)" />
</div>
 
<script type="text/javascript">
    var brandSource,
    rangeSource;
 
    $(document).ready(function () {
 
        brandSource = new kendo.data.DataSource({
            error: handleError,
            transport: {
                read: {
                    url: "@Url.Action("Brands ", "DropDown ")",
                    type: "POST"
                }
            },
            batch: false,
            schema: {
                model: {
                    id: "Value",
                    fields: {
                        Value: {
                            type: "number"
                        },
                        Text: {
                            type: "string"
                        }
                    }
                }
            }
        })
 
        rangeSource = new kendo.data.DataSource({
            error: handleError,
            transport: {
                read: {
                    url: "@Url.Action("Ranges ", "DropDown ", new { brandId = Model.BrandID })",
                    type: "POST"
                }
            },
            batch: false,
            schema: {
                model: {
                    id: "Value",
                    fields: {
                        Value: {
                            type: "number"
                        },
                        Text: {
                            type: "string"
                        }
                    }
                }
            }
        })
 
 
        $("#brands").kendoComboBox({
            placeholder: "Select brand...",
            dataTextField: "Text",
            dataValueField: "Value",
            dataSource: brandSource
        });
 
        $("#ranges").kendoComboBox({
            //cascadeFrom: "brands",
            placeholder: "Select range...",
            dataTextField: "Text",
            dataValueField: "Value",
            dataSource: rangeSource
        });
 
    });
</script>

I would like to be able to select a different brand and for it to reload the ranges as appropriate, but as soon as I uncomment the 'cascadeFrom' line the whole thing falls apart:

1) The appropritae Brand is not selected
2) The range is disabled, but even if I select a brand is returns zero results

I presume this is something to do with the datasource having the @Model.BrandID defined as a parameter and needing to clear this? :-/ Any advice would be greatly received. Thank you.

No answers yet. Maybe you can help?

Tags
ComboBox
Asked by
Rich
Top achievements
Rank 1
Share this question
or