Cascade ComboBox and passing parameters to server

2 posts, 0 answers
  1. Radosław
    Radosław avatar
    4 posts
    Member since:
    Nov 2012

    Posted 05 Nov 2012 Link to this post

    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!
  2. Radosław
    Radosław avatar
    4 posts
    Member since:
    Nov 2012

    Posted 08 Nov 2012 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top