CasCading Combobox inside a grid using JQuery(NO MVC)

[N]

I am running into problem, where i am not sure how to do this.
I am attempting to do Cascading Combo box inside the Grid using JQuery(No MVC). 
I will need to use it in both inline & POPUP mode.

1) How to i refresh the State & City Combo when i change the selection of Country.
   a) I also need to pass some additional data from other Column, along with selected country to webAPI method
2) I want to display CountryName, StateName & CityName in their foreign key, when not i edit mode, how can i do that.
   (during submit, i want the ID's to be submitted back to the server & not the Names)

NOTE: CountryID_FK, StateID_FK,CityID_FK are Foreign keys.

{
                     field: "CountryID_FK",
                     width: 110,
                     editor: CountiresComboEditor
                 },
                  {
                      field: "StateID_FK",
                      width: 110,
                      editor: StateComboEditor
                  },
                   {
                       field: "CityID_FK",
                       width: 110,
                       editor: CitiesComboEditor
                   }




 function CountiresComboEditor(container, options) {
                $('<input id="CountryDDL1" name="' + options.field + '"/>').appendTo(container).kendoDropDownList({
                    autoBind: false,
                    dataSource: {
                        transport: {
                            read: {
                                url: baseURL + "/GetCountries", // <-- Get data from here
                                dataType: "json" // <-- The default was "jsonp"
                            }
                        },
                        schema: {
                            data: function (data) {
                                return data.Items; // <-- The result is just the data, it doesn't need to be unpacked.
                            }
                        }
                    },
                    dataTextField: "Name",
                    dataValueField: "CountryID_PK",
                    change: function () {
// Not sure how to refresh the State & City DDL
                        var ddlstate = $("#StateDDL").data("kendoDropDownList");
                        ddlstate .refresh();
                        var ddlcity = $("#CityDDL").data("kendoDropDownList");
                        ddlcity .refresh();
                    }
                });
            }            

            function StateComboEditor(container, options) {
                $('<input id="StateDDL" name="' + options.field + '"/>').appendTo(container).kendoDropDownList({
                    autoBind: false,
                    dataSource: {
                        transport: {
                            read: {
                                url: baseURL + "/GetStates", // <-- Get data from here
                                dataType: "json" // <-- The default was "jsonp"
                            }
                        },
                        schema: {
                            data: function (data) {
                                return data.Items; // <-- The result is just the data, it doesn't need to be unpacked.
                            }
                        }
                    },
                    dataTextField: "Name",
                    dataValueField: "StateID_PK",
                    change: function () {
                                          
                        var ddlCity = $("#CityDDL").data("kendoDropDownList");
                        ddlCity.refresh();

                    }
                });
            }
           

            function CitiesComboEditor(container, options) {
                $('<input id="CityDDL" name="' + options.field + '"/>').appendTo(container).kendoDropDownList({
                    autoBind: true,
                    dataSource: {
                        transport: {
                            read: {
                                url: baseURL + "/GetCities", // <-- Get data from here
                                dataType: "json" // <-- The default was "jsonp"
                            }
                        },
                        schema: {
                            data: function (data) {
                                return data.Items; // <-- The result is just the data, it doesn't need to be unpacked.
                            }
                        }
                    },
                    dataTextField: "Name",
                    dataValueField: "CityID_PK"
                });
            }

[Vladimir Iliev]

Hi,

Please note that we already provide such examples in our CodeLibrary which you can use as a baseline: 

• Cascading DropDownList in Popup Editor
• Cascading DropDownList in InLine Edit Mode

Regards,
Vladimir Iliev
Telerik

[N]

Correct me if my understanding is wrong.
In the solution Provided, it is assumed that i already have downloaded the name & Id combination on the client, in my case it is not true. 

is there any way to parse out the selected name from combo box and show that in the template, because that is the value that i want to display.

I have Managed to achieve this by storing the result into Array, on the success of Ajax call.

While doing this i also realized a major problem in how the Cascading Combo's are working, they are downloading entire set in the first go(Not an Optimized way to do this).

when i am changing the Combo box, it is filtering locally, where i was expecting since i have provided the remote URL, it should make a Ajax Call with the filter in the
in the URL(since i am using WebAPI).

I would like to see a solution which filters remotely and bring only the needed data from server and keep on going back to the server in case that is not available locally.

Are there any samples that does this ?

[Alexander Valchev]

Hi,

First of all let me apologize for the late reply. Due to the new year holidays we were short on staff and as a result some replies got delayed.

Regarding your case:

Correct me if my understanding is wrong.
In the solution Provided, it is assumed that i already have downloaded the name & Id combination on the client, in my case it is not true. 

The approach works with remote data as well. Code library projects use local data arrays for code simplicity.

is there any way to parse out the selected name from combo box and show that in the template, because that is the value that i want to display.

By default the editor widget will submit its value to the Grid. Passing the text is not supported out of the box.
This scenario is closer to the ForeignKey column feature. An alternative way is to loop through the dataSource's data and manually find the corresponding key-value pair.

While doing this i also realized a major problem in how the Cascading Combo's are working, they are downloading entire set in the first go(Not an Optimized way to do this).

when i am changing the Combo box, it is filtering locally, where i was expecting since i have provided the remote URL, it should make a Ajax Call with the filter in the
in the URL(since i am using WebAPI).

In order to filter on the server, you should turn on the serverFiltering option of the dataSource. If you would like to change the Ajax Call url you should define it as a function. Please check the second code snippet from corresponding documentation.

• http://docs.kendoui.com/api/framework/datasource#configuration-transport.read.url
  
  

The serverFiltering feature is demonstrates in the cascading combo box demo:

• http://demos.kendoui.com/web/combobox/cascadingcombobox.html

Regards,
Alexander Valchev
Telerik

[Prem]

i am trying to cascade two ddlist where my ids are guid ..can you help me out with that..please

[Alexander Valchev]

Hello Prem,

Your scenario is a bit unclear. Could you please provide more details and a run-able sample or code snippets that demonstrate your current implementation so I can examine it and advice you accordingly?
Thank you in advance for the cooperation.

Regards,
Alexander Valchev
Telerik