Cascade ComboBox and passing parameters to server

[Radosław]

Hello.
Ive got two comboboxes:
-first one:

@(Html.Kendo().ComboBox()

    .Name("Dim1")

    .DataTextField("Barcode")

    .DataValueField("Barcode")

    .Filter(FilterType.StartsWith)

    .DataSource(action => action.Read(read => read.Action("GetStockLocationsForComboBoxAjax", "StockLocation")).ServerFiltering(true))

    .MinLength(3)

    )

-second one:

<script type="text/javascript">

    function onAdditionalData() {

        return { Barcode: $("#Dim1").val() };

    }

</script>

 

@(Html.Kendo().ComboBox()

    .Name("Dim2")

    .DataTextField("Barcode")

    .DataValueField("Barcode")

    .Filter(FilterType.StartsWith)

    .DataSource(action => action.Read(read => read.Action("GetStockLocationsForComboBoxAjax", "StockLocation").Data("onAdditionalData")).ServerFiltering(true))

    .MinLength(3)

    .CascadeFrom("Dim1")

    )

Here is my read action signature:

[HttpGet]

public JsonResult GetStockLocationsForComboBoxAjax([DataSourceRequest] DataSourceRequest request, string text, string Barcode)

How can I achieve the following:
Im putting some data to Div1 and get it under text parameter. When I put something in Div2 I will get that data under text plus data from Div1 under Barcode parameter.

I hope ive described it  enough clearly.

Thanks!

[Radosław]

It turns out that when we override the default Data callback we have to take care of sending data from parent as well as the data from the current comboBox. So js function should look like this:

<script type="text/javascript">

    function onAdditionalData() {

         

        var Dim2 = $("#Dim2").data("kendoComboBox"),

        Dim1 = $("#Dim1").data("kendoComboBox"),

         

        value2 = Dim2.input.val(),

        value1 = Dim1.input.val();

         

        return {

            text: value2,

            Barcode: value1

        };

    }

</script>

Cheers!