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

CasCading Combobox inside a grid using JQuery(NO MVC)

5 Answers 102 Views
Grid
This is a migrated thread and some comments may be shown as answers.
N
Top achievements
Rank 1
N asked on 26 Dec 2013, 04:45 PM
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"
                });
            }

5 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 27 Dec 2013, 09:20 AM
Hi,

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

Regards,
Vladimir Iliev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
N
Top achievements
Rank 1
answered on 28 Dec 2013, 06:05 PM
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 ?
0
Accepted
Alexander Valchev
Telerik team
answered on 02 Jan 2014, 10:07 AM
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.
The serverFiltering feature is demonstrates in the cascading combo box demo:

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Prem
Top achievements
Rank 1
answered on 09 Aug 2014, 04:06 AM
i am trying to cascade two ddlist where my ids are guid ..can you help me out with that..please
0
Alexander Valchev
Telerik team
answered on 11 Aug 2014, 01:12 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
N
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
N
Top achievements
Rank 1
Alexander Valchev
Telerik team
Prem
Top achievements
Rank 1
Share this question
or