Link dropdownlist

Hi support, i've 4 dropboxlist in my form.

At form startup the first dropbox read all data from Country table and set the default value as "ITALIA" and the second  read all Italian regions from the table and set default value as the first region into the list. No relationship exist between, The third dropbox must be loaded from the Provinces table and from Regions and Provinces are joined with the following relationship Regione.Id = Provincia.RegionId. and the default vale must be the first value of the list ( the first province of the region selected into the dropbox n°2). The fourth must be selected from the City table. Between the City and Provinces exist the following relationship: Province.Id = City.ProvinceId and the default value follow the rule like the third dropboxlist.

When i change the value foe any value different from "ITALIA" in first dropbox i need to disable the second and third dropboxlist, i need to change the relationship between the fisrt and the fourth dropboxlst Country.Id = City.CountryId and i need to change the url for the datamanager ( the webapi is different ).

When the value selected is "ITALIA" i need to restore the default situation. It's possible to do ?

Thanks in advance
Stefano Capobianco

Attachment: test_e49ba317.zip

7 Replies

KR Keerthana Rajendran Syncfusion Team December 11, 2017 06:45 PM UTC

Hi Stefano, 
 
Thank you for contacting Syncfusion support. 
 
Query: When i change the value foe any value different from "ITALIA" in first dropbox i need to disable the second and third dropboxlist, i need to change the relationship between the fisrt and the fourth dropboxlst Country.Id = City.CountryId and i need to change the url for the datamanager ( the webapi is different ). 
 
When the value selected is "ITALIA" i need to restore the default situation. It's possible to do ? 
 
You can achieve this by checking the selected text in country dropdownlist through arguments of change event and you can disable the required dropdownlist using disable() method and modify the dataSource of fourth dropdownlist via setModel based on your scenario. Please refer to the below code 
 
function ChangeData(args) 
        { 
            var obj = $("#regionsDropdown").data("ejDropDownList"); 
            var obj1 = $("#provincesDropdown").data("ejDropDownList"); 
            var obj2 = $("#citiesDropdown").data("ejDropDownList"); 
            var dataManager = ej.DataManager("http://js.syncfusion.com/ejservices/Wcf/Northwind.svc/Orders"); 
            var dm = ej.DataManager({ url: "/Home/GetCities", adaptor: ej.WebApiAdaptor }) 
            if (args.text != "ITALIA") 
            { 
                obj.disable(); 
                obj1.disable(); 
                obj2.enable(); 
                obj2.setModel({ 
                    dataSource: null, fields:null // empty the previous data source. 
                }); 
                obj2.setModel({ dataSource: dataManager, fields: { 
                    text: "ShipCountry", 
                    value: "OrderID" 
                } }); 
            } 
            if (args.text == "ITALIA") { 
               //restore previous state here. 
            } 
           
        } 
 
We have prepared a sample based on our understanding. Please download the sample from: 
 
 
If we have misunderstood, kindly get back to us with some clear details on your requirement so that we can proceed further. 
 
Regards, 
Keerthana. 



SC Stefano Capobianco December 13, 2017 01:37 PM UTC

Hi Keerthana, thans for your reply, but i would like to know if it's possible to achieve my gol in this way:

        function ProvincesDefaultValue(args) {
            var regionsDropdown = $("#regionsDropdown").data("ejDropDownList");
            var regionValue = regionsDropdown.getSelectedValue();
            var dm = ej.DataManager({ url: "/Api/Provinces/GetAll", adaptor: ej.WebApiAdaptor })
            var query = ej.Query().where("RegionId", "equal", regionValue);
            var execute = dm.executeQuery(query)
                .done(function (e) {
                    alert('Help');
                });

        }

It's better to me to read from the database through the webapi and specify other conditions ( the Region Id is a sample )
When i try to run the code i have TypeError: this.adaptor.processQuery is not a function[Ulteriori informazioni]



KR Keerthana Rajendran Syncfusion Team December 14, 2017 11:30 AM UTC

Hi Stefano,    
   
Yes, you can bind data through JS using datamanager as updated in your code through web api.   
   
Query: When I try to run the code I have TypeError: this.adaptor.processQuery is not a function[Ulteriori informazioni]   
   
This error occurs, because the adaptor name is not mentioned correctly in your code. So please modify the adaptor as “new ej.WebApiAdaptor()” as shown below   
   
  function ProvincesDefaultValue(args) {   
   
            var regionsDropdown = $("#regionsDropdown").data("ejDropDownList");   
            var provinceDropdown = $("#provincesDropdown").data("ejDropDownList");   
            var regionValue = regionsDropdown.getSelectedValue();   
            var dm = ej.DataManager({ url: "/DropDownlist/getProvinces"adaptor: newej.WebApiAdaptor() })   
            var query = ej.Query().where("RegionId""equal", regionValue, false);   
            var execute = dm.executeQuery(query)   
                .done(function (e) {   
   
                    alert('Help'); // perform actions based on your scenario   
                });   
        }   
   
   
Regards,   
Keerthana.   
  
 



SC Stefano Capobianco December 15, 2017 09:30 AM UTC

Hi Keerthana, thanks for your answer, now i can access to webapi. It's possible to have a sample to fill the dropdownlist with this datamanager?

Thanks
Stefano


KR Keerthana Rajendran Syncfusion Team December 18, 2017 10:35 AM UTC

Hi Stefano,       
   
Thanks for your update. We have prepared a sample based on your requirement by binding a data to province dropdown according to the data selected in regions DropDownList through datamanager with WebApiAdaptor. Please refer to the below given code   
   
function ProvincesDefaultValue(args) {   
   
            var regionsDropdown = $("#regionsDropdown").data("ejDropDownList");   
            var provinceDropdown = $("#provincesDropdown").data("ejDropDownList");   
            var regionValue = regionsDropdown.getSelectedValue();   
            var dm = ej.DataManager({ url: "/DropDownlist/GetAll", adaptor: new ej.WebApiAdaptor() })   
            var query = ej.Query().where("RegionId""equal", regionValue, false);   
            var execute = dm.executeQuery(query)   
                .done(function (e) {   
                    provinceDropdown.setModel({ dataSource: e.result, fields: { text: "ProvinceName", value: "RegionId" } })   
                    provinceDropdown.enable();   
                });   
        }   
           
   
   [HttpGet]   
        public object GetAll()   
        {   
            var queryStrings = HttpUtility.UrlDecode(Request.QueryString.ToString());   
            var QuerySplit= queryStrings.Split("'");   
            var regionid = QuerySplit[1];   
            List<Province> data = getProvinces().Where(x => x.RegionId.Contains(regionid)).ToList();   
            return new { Items = data, Count = data.AsQueryable() };   
   
        }   
   
Here, we can process the query in web API method through Request.QueryString and filter the province data array based on the selected value.   
   
Please download the modified sample from the below link   
   
   
Regards,   
Keerthana.   
 



SC Stefano Capobianco December 18, 2017 10:52 AM UTC

Thanks Keerthana, this work very well and sole my problem.

Stefano

P.S. can i suggest to improve the online manual for the asp.net core section? To find some infos my and i think many peoples need to surf across all forums because the info's seeked are not all in the same place and the best source is the javascript manual.



KR Keerthana Rajendran Syncfusion Team December 19, 2017 09:50 AM UTC

Hi Stefano, 
 
Most Welcome. We will consider your suggestion and improve our ASP.Net Core document in upcoming documents.   
 
Regards, 
Keerthana. 


Loader.
Up arrow icon