Populating kendo MVC combo box based on another kendo combobox

Question

I am trying to populate the value of one combo box based on selection of another combo box. I am using kendo mvc combo box in MVC 5 application. In my case , I am trying to populate the Sales Office combo box based on selection of SalesOrganisation combo box.In order to do that I would need to call the controller method of SalesOffice combo and pass the country code value. I have written a ajax method on the change event of the drop down control of the Sales Organisation. Its calling the controller method. I can see the method firing but when I do an alert on the data in the javascript code, the value is showing [object] [object].The status however is showing success Not sure what is wrong. How do I get the Sales Office dropdown populated

Combobox

  <div class="form-group">
                @Html.LabelFor(model => model.Company, htmlAttributes: new { @class = "control-label col-md-4" })
                <div class="col-md-6">
                    <div class="editor-field">
                        @(Html.Kendo().ComboBoxFor(model => model.Company)
                            .Name("SalesOrganisation")
                            .HtmlAttributes(new { style = "width:300px" })
                            .DataTextField("Company")
                            .DataValueField("CountryCode")

                            .DataSource(dataSource => dataSource
                            .Read(read => read.Action("RequestHeader_SalesOrganisation", "Request").Type(HttpVerbs.Post))

                            )
                             .Events(e =>
                             {
                                 e.Change("onChange");
                             })
                        )
                    </div>
                    @Html.ValidationMessageFor(model => model.Company, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                @Html.LabelFor(model => model.SalesOffice, htmlAttributes: new { @class = "control-label col-md-4" })
                <div class="col-md-6">
                    <div class="editor-field">
                        @(Html.Kendo().ComboBoxFor(model => model.SalesOffice)
                            .Name("SalesOffice")
                            .HtmlAttributes(new { style = "width:300px" })
                            .DataTextField("SalesOffice")
                            .DataValueField("SalesOfficeID")

                            .DataSource(dataSource => dataSource
                            .Read(read => read.Action("RequestHeader_SalesOffice", "Request").Type(HttpVerbs.Post))
                            )
                        )
                    </div>
                    @Html.ValidationMessageFor(model => model.SalesOffice, "", new { @class = "text-danger" })
                </div>
            </div>

SalesOffice controller method

    public ActionResult RequestHeader_SalesOffice(string id)
            {
                var response = requestRepository.GetSalesOffice(id).AsQueryable().ProjectTo<SalesOfficeViewModel>();

                var jsonResult = Json(response, JsonRequestBehavior.AllowGet);
                jsonResult.MaxJsonLength = int.MaxValue;
                return jsonResult;
            }

Jquery

 function onChange() {

        alert($('#SalesOrganisation').val());

        var ServiceUrl = "/CC.GRP.MCRequest/Request/RequestHeader_SalesOffice?id=" + $('#SalesOrganisation').val();
        var content = '';
        $.support.cors = true;

        $.ajax({
            type: 'Post',
            url: ServiceUrl,
            async: true,
            cache: false,
            crossDomain: true,
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            error: function (xhr, err) {
            },
            success: function (data, status) {
                $('#SalesOffice').val(data);
                alert(data);
                alert(status);
            }
        });
    }

have you looked at this example for how to do cascading combo's http://demos.telerik.com/kendo-ui/combobox/cascadingcombobox — David Shorthose, Apr 05 '17 at 16:53
The example that you have shared is using odata. In my code, I am trying to call the controller action method which does get fired. I can see it getting the data on the server side. My question is how to fetch that json data on the client side and bind it — Tom, Apr 05 '17 at 17:03
The change event you are firing off should this be getting a value that is in the combo box list or is it pulling back a new `select` list to bind to the combobox ? — David Shorthose, Apr 05 '17 at 17:07
It should be binding the new select list. It calls my controller code which is included in the post . It filters the list based on country code. It should bind the filtered list to the combo box. I am not sure if it's right doing an Ajax call . Any better implementation is welcome . If not would like to know why my current code isn't capturing the list . — Tom, Apr 05 '17 at 22:45

David Shorthose · Accepted Answer · 2017-04-06T17:43:01.193

So based on your specific scenario. The top combobox should control the select items from the second combobox. In this instance using the cascading feature of the combobox will be the simplest way and also reduce the amount of code you have.

So the top combobox we can get rid of the change event.

The second one we change slightly to this:

@(Html.Kendo().ComboBoxFor(model => model.SalesOffice)
                            .Name("SalesOffice")
                            .HtmlAttributes(new { style = "width:300px" })
                            .DataTextField("SalesOffice")
                            .DataValueField("SalesOfficeID")

                            .DataSource(dataSource => dataSource
                                .Read(read =>
                                {
                                    read.Action("RequestHeader_SalesOffice", "Request")
                                        .Type(HttpVerbs.Post)
                                        .Data("GetFilterOption"); <-- This Bit
                                })
                                ).CascadeFrom("SalesOrganisation") //<--This Bit

)

Then we add the javascript function called GetFilterOption which returns the selected value from your top combobox.

function GetFilterOption(){
    return { id: $('#SalesOrganisation').val() }

}

This will then return back the new result set for you to bind to the combobox and allow you to select the value from the newly gathered results.

The reason your current solution is not working is that you are bringing back your select list and binding it to the value and not the underlying datasource.

So if you wanted to change just your javascript code you could do something like this:

success: function (data, status) {
              //  $('#SalesOffice').val(data); <-- FROM THIS TO
                $('#SalesOffice').data('kendoComboBox').setDataSource(data); 
                alert(data);
                alert(status);
            }

Hopefully that answers your question. Any issues let me know and I will update the answer to reflect any changes.

EDIT

After much trial and Error with Tom through chat we got to the solution to add .Filtering("Contains")

and then .ServerFiltering(true) within the combobox so ending up with this:

@(Html.Kendo().ComboBoxFor(model => model.SalesOffice)
                            .Name("SalesOffice")
                            .HtmlAttributes(new { style = "width:300px" })
                            .DataTextField("SalesOffice")
                            .DataValueField("SalesOfficeID")
                            .Filter("Contains")
                            .DataSource(dataSource => dataSource
                                .Read(read =>
                                {
                                    read.Action("RequestHeader_SalesOffice", "Request")
                                        .Type(HttpVerbs.Post)
                                        .Data("GetFilterOption"); <-- This Bit
                                })
                                 .ServerFiltering(true)
                                ).CascadeFrom("SalesOrganisation") //<--This Bit

)

Quite strange. I added your code. It does hit the break-point with the correct id in my controller method. The method returns the records but my combobox isnt bound. It shows no data bound. — Tom, Apr 06 '17 at 15:03
When you return back the data does it have the properties you have defined for the combo? When you look at the response back using either fiddler/ browser tools what is the response from the call? — David Shorthose, Apr 06 '17 at 15:10
I dont have firefox to see fiddler. Using Chrome. Do you mean developer tools in chrome. Where do I check that — Tom, Apr 06 '17 at 15:19
in chrome go to the network tab.then you will see the call and if it is successful what it is sending back. — David Shorthose, Apr 06 '17 at 15:22
I can see the data. SalesOfficeID: 38, SalesOfficeCode: "XX", SalesOffice: ""},…] 0 : {SalesOfficeID: 38, SalesOfficeCode: "XX", SalesOffice: ""} 1 : {SalesOfficeID: 37, SalesOfficeCode: "5117", SalesOffice: "International"} 2 : — Tom, Apr 06 '17 at 15:37
can you add the response to the question. I'm not sure if the formatting is being altered slightly as I can't see clearly what the structure of this collection should be. — David Shorthose, Apr 06 '17 at 16:00
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/140096/discussion-between-david-shorthose-and-tom). — David Shorthose, Apr 06 '17 at 16:31

score 0 · Answer 2 · answered Apr 06 '17 at 16:11

[{SalesOfficeID: 58, SalesOfficeCode: "XX", SalesOffice: ""},…]
0
:
{SalesOfficeID: 58, SalesOfficeCode: "XX", SalesOffice: ""}
1
:
{SalesOfficeID: 57, SalesOfficeCode: "8118", SalesOffice: "T&T"}
2
:
{SalesOfficeID: 56, SalesOfficeCode: "8117", SalesOffice: "International"}
3
:
{SalesOfficeID: 55, SalesOfficeCode: "8116", SalesOffice: "Central"}
4
:
{SalesOfficeID: 54, SalesOfficeCode: "8115", SalesOffice: "CS Coverage"}
5
:
{SalesOfficeID: 53, SalesOfficeCode: "8114", SalesOffice: "CS South"}
6
:
{SalesOfficeID: 52, SalesOfficeCode: "8113", SalesOffice: "CS Scotland"}
7
:
{SalesOfficeID: 51, SalesOfficeCode: "8112", SalesOffice: "CS North"}
8
:
{SalesOfficeID: 50, SalesOfficeCode: "8111", SalesOffice: "CS Major Accounts"}
9
:
{SalesOfficeID: 49, SalesOfficeCode: "8110", SalesOffice: "CS London"}
10
:
{SalesOfficeID: 48, SalesOfficeCode: "8109", SalesOffice: "IAM - PS"}
11
:
{SalesOfficeID: 47, SalesOfficeCode: "8108", SalesOffice: "IAM - I&C"}
12
:
{SalesOfficeID: 46, SalesOfficeCode: "8107", SalesOffice: "Edinburgh"}
13
:
{SalesOfficeID: 45, SalesOfficeCode: "8106", SalesOffice: "Manchester"}
14
:
{SalesOfficeID: 44, SalesOfficeCode: "8105", SalesOffice: "Blackfriars FM"}
15
:
{SalesOfficeID: 43, SalesOfficeCode: "8104", SalesOffice: "Blackfriars FMR"}
16
:
{SalesOfficeID: 42, SalesOfficeCode: "8103", SalesOffice: "Reading"}
17
:
{SalesOfficeID: 41, SalesOfficeCode: "8102", SalesOffice: "Hatfield BTSI"}
18
:
{SalesOfficeID: 40, SalesOfficeCode: "8101", SalesOffice: "Hatfield PS"}
Name

Populating kendo MVC combo box based on another kendo combobox

2 Answers2