1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Cascading Dropdownlist

Cascading Dropdownlist

Hi

EJ2.Grid in ASP.Net Core with  Razor Pages. 

Do you have sample code for a cascading dropdownlist in a grid for Razor Pages?

Regards,

/S


7 Replies
MS Madhu Sudhanan P Syncfusion Team January 3, 2019 09:29 AM UTC

Hi Stefan, 

Thanks for contacting Syncfusion support. 

Query : Do you have sample code for a cascading dropdownlist in a grid for Razor Pages? 
 
As per your requirement we have created a sample for your reference. In the below sample we have achieved cascading dropdown list(we have bind the city based on the country field) in Grid using cell edit template. You can also use the below way to achieve your requirement. 

Kindly refer to the below code example and sample for more information. 

<ejs-grid id="Grid" dataSource="ViewBag.dataSource" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true" height="300"> 
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings> 
    <e-grid-columns> 
        <e-grid-column field="OrderID" width="110" isPrimaryKey=true></e-grid-column> 
        <e-grid-column field="ShipCountry" headerText="ShipCountry" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" width="110"></e-grid-column> 
        <e-grid-column field="ShipCity" width="110" edit="@(new {create = "createcity", read = "readcity", destroy = "destroycity", write = "writecity"})"> </e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
 
<script> 
 
    function create() { 
        countryElem = document.createElement('input'); 
        return countryElem; 
    }; 
    function read() { 
        return countryObj.text; 
    }; 
    function destroy() { 
        countryObj.destroy(); 
    }; 
    function write() { 
        countryObj = new ej.dropdowns.DropDownList({ 
            dataSource: country, 
            fields: { value: 'countryId', text: 'countryName' }, 
            change: function () { 
                stateObj.enabled = true; 
                based on the country(filter for state column) we have bind data for city column  
 
                var tempQuery = new ej.data.Query().where('countryId', 'equal', countryObj.value); 
                stateObj.query = tempQuery; 
                stateObj.text = null; 
                stateObj.dataBind(); 
            }, 
            placeholder: 'Select a country', 
            floatLabelType: 'Never' 
        }); 
        countryObj.appendTo(countryElem); 
    }; 
    function createcity() { 
        stateElem = document.createElement('input'); 
        return stateElem; 
    }; 
    function readcity() { 
        return stateObj.text; 
    }; 
    function destroycity() { 
        stateObj.destroy(); 
    }; 
    function writecity() { 
        stateObj = new ej.dropdowns.DropDownList({ 
            dataSource: state, 
            fields: { value: 'stateId', text: 'stateName' }, 
            enabled: false, 
            placeholder: 'Select a state', 
            floatLabelType: 'Never' 
        }); 
        stateObj.appendTo(stateElem); 
    } 
 
</script> 


Help documentation :  



Regards, 
Madhu Sudhanan P 


ST Stefan January 3, 2019 07:06 PM UTC

Hi

When I save the grid the name of country and state in dropdowns are posted correctly but countryId and stateId are always original values. The changed ids in  dropdown are never sent to server on postback. Do you have a sample with insert and update?


MS Madhu Sudhanan P Syncfusion Team January 4, 2019 06:38 AM UTC

Hi Stefan, 

Thanks for your update. 

In our previously provided sample we have return dropdown text as a value to grid so that it does not return the ids to server we suggest you to return the value instead of text to achieve your requirement. In the below sample we have stored the country and state id in server side and display the country(United states) based on id(countryid) in Grid using valueAccessor property. 

Please refer the below code example and sample for more information. 

<ejs-grid id="Grid" dataSource="ViewBag.dataSource" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true" height="300"> 
    <e-datamanager url="/Home/UrlDatasource" insertUrl="/Home/Insert" updateUrl="/Home/Update"  adaptor="UrlAdaptor"></e-datamanager> 
    <e-grid-editSettings allowAdding="true" allowEditing="true"></e-grid-editSettings> 
    <e-grid-columns> 
        <e-grid-column field="OrderID" width="110" isPrimaryKey=true></e-grid-column> 
        <e-grid-column field="ShipCountry" valueAccessor="@("shipCountry")" headerText="ShipCountry" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" width="110"></e-grid-column> 
        <e-grid-column field="ShipCity" valueAccessor="@("shipCity")" width="110" edit="@(new {create = "createcity", read = "readcity", destroy = "destroycity", write = "writecity"})"> </e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
 
<script> 
 
    function shipCountry(field, data, column) { 
            return (data[field] === '1') ? 'United States' : 'Australia'; 
    } 
 
    function shipCity(field, data) { 
        var city; 
        switch (data[field]) { 
            case '101': 
                city = "New York"; 
                break; 
            . . . . 
       } 
        return city; 
    } 
 
    function create() { 
        countryElem = document.createElement('input'); 
        return countryElem; 
    }; 
    function read() { 
        return countryObj.value; 
    }; 
    function destroy() { 
        countryObj.destroy(); 
    }; 
    function write(args) { 
        countryObj = new ej.dropdowns.DropDownList({ 
            dataSource: country, 
            fields: { value: 'countryId', text: 'countryName' }, 
            value: args.rowData['ShipCountry'], 
            change: function () { 
                stateObj.enabled = true; 
                var tempQuery = new ej.data.Query().where('countryId', 'equal', countryObj.value); 
                stateObj.query = tempQuery; 
                stateObj.text = null; 
                stateObj.dataBind(); 
            }, 
            placeholder: 'Select a country', 
            floatLabelType: 'Never' 
        }); 
        countryObj.appendTo(countryElem); 
    }; 
    function createcity() { 
        stateElem = document.createElement('input'); 
        return stateElem; 
    }; 
    function readcity() { 
        return stateObj.value; 
    }; 
    function destroycity() { 
        stateObj.destroy(); 
    }; 
    function writecity(args) { 
        stateObj = new ej.dropdowns.DropDownList({ 
            dataSource: state, 
            fields: { value: 'stateId', text: 'stateName' }, 
            enabled: false, 
            value: args.rowData['ShipCity'], 
            placeholder: 'Select a state', 
            floatLabelType: 'Never' 
        }); 
        stateObj.appendTo(stateElem); 
    } 
 
</script> 
  

If we misunderstood your query then share more information regarding your requirement it will helpful for us to provide a better solution as soon as possible.  

Regards, 
Madhu Sudhanan P 


YY Yoab Youssoufou February 25, 2020 04:59 PM UTC

Hello Madhu,
I have been able to reproduce this example only if the text and id are both in text format. In practice the Id will be an integer for example in which case this does not work. How will this query: var tempQuery = new ej.data.Query().where('countryId', 'equal', countryObj.value); 
work if CountryId is an integer and not a string?
Please help as it is not practical to add string columns when working with a relational database with foreign keys of integer type

BS Balaji Sekar Syncfusion Team February 26, 2020 12:10 PM UTC

Hi Yoab, 
 
Query: Need to set cascading dropdown for integer columns. 
 
We have validated your query and prepared sample based on your requirement. In the sample we have changed the string column to integer column and also changed the dataSource of the dropdown into  integer column to achieve your requirement. The query which is written for countryId column will remain same because the integer values also have equal operator support for filtering the data in the dropdown. We have shared the sample for your reference. 
 
Code Snippet: 
Index.cshtml 
 
function shipCity(field, data) { 
        var city; 
        var swithData = data[field].toString(); 
        switch (swithData) { 
            case '101': 
                city = "New York"; 
                break; 
            case '102': 
                city = "Virginia"; 
                break; 
            case '103': 
                city = "Washington"; 
                break; 
            case '104': 
                city = "Queensland"; 
                break; 
            case '105': 
                city = "Tasmania"; 
                break; 
            case '106': 
                city = "Victoria"; 
        } 
        return city; 
    } 
    var country = [ 
        { countryName: 'United States', countryId: 1 }, 
        { countryName: 'Australia', countryId: 2 } 
    ]; 
    var state = [ 
        { stateName: 'New York', countryId: 1, stateId: 101 }, 
        { stateName: 'Virginia ', countryId: 1, stateId: 102 }, 
        { stateName: 'Washington', countryId: 1, stateId: 103 }, 
        { stateName: 'Queensland', countryId: 2, stateId: 104 }, 
        { stateName: 'Tasmania ', countryId: 2, stateId: 105 }, 
        { stateName: 'Victoria', countryId: 2, stateId: 106 } 
    ]; 

    function write(args) { 
        countryObj = new ej.dropdowns.DropDownList({ 
            dataSource: country, 
            fields: { value: 'countryId', text: 'countryName' }, 
            value: args.rowData['ShipCountry'], 
            change: function () { 
                stateObj.enabled = true; 
                var tempQuery = new ej.data.Query().where('countryId', 'equal', countryObj.value); 
                stateObj.query = tempQuery; 
                stateObj.text = null; 
                stateObj.dataBind(); 
            }, 
            placeholder: 'Select a country', 
            floatLabelType: 'Never' 
        }); 
        countryObj.appendTo(countryElem); 
    }; 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Balaji Sekar. 


YY Yoab Youssoufou February 28, 2020 10:32 AM UTC

Thanks Balaji but I still couldnt get it to work with integers. I am populating everything from the database no hard coding. Pls see my code:

<script>
    var depElem;
    var depObj;
    var specElem;
    var specObj;
    var subspecElem;
    var subspecObj;
    var df;

      var dep = @Json.Serialize(gen.GetLkDepartments());
    var spec = @Json.Serialize(gen.GetLkSpecialties());
    function dataBound(args) {
        this.getColumns()[1].edit = {
            create: function () {
                depElem = document.createElement('input');
                return depElem;
            },
            read: function () {
                return depObj.text;
            },
            destroy: function () {
                depObj.destroy();
            },
            write: function () {
                depObj = new ej.dropdowns.DropDownList({
                    dataSource: @Html.Raw(Json.Serialize(gen.GetLkDepartments2())),
                    fields: { text: 'DisplayField', value: 'Id' },
                    change: function () {
                        specObj.enabled = true;
                        var tempQuery = new ej.data.Query().where('DepartmentsId', 'equal', depObj.value);
                        specObj.query = tempQuery;
                        specObj.text = null;
                        specObj.dataBind();
                    },
                    placeholder: 'Select a Department',
                    floatLabelType: 'Never'
                });
                depObj.appendTo(depElem);
            }
        };
        this.getColumns()[2].edit = {
            create: function () {
                specElem = document.createElement('input');
                return specElem;
            },
            read: function () {
                return specObj.text;
            },
            destroy: function () {
                specObj.destroy();
            },
            write: function () {
                specObj = new ej.dropdowns.DropDownList({
                    dataSource: @Html.Raw(Json.Serialize(gen.GetLkSpecialties2())),
                    fields: { text: 'DisplayField', value: 'Id' },
                    enabled: false,
                    placeholder: 'Select a specialty',
                    floatLabelType: 'Never'
                });
                specObj.appendTo(specElem);
            }
        };
         
        
    }

</script>


functions to retrieve the lookup data:

    public IEnumerable<DisplayDetails> GetLkDepartments2()
        {
            var datasource = from x in _context.Departments.OrderBy(x => x.Name)
                             select new DisplayDetails
                             {
                                 Id = x.Id,
                                 DisplayField = String.Format("{0}", x.Name)
                             };
            return datasource;


        }
        public IEnumerable<DisplayDetails> GetLkSpecialties2()
        {
            var datasource = from x in _context.MedicalSpecialties.OrderBy(x => x.Name)
                             select new DisplayDetails
                             {
                                 Id = x.Id,
                                 DisplayField = String.Format("{0}", x.Name)
                             };
            return datasource;


        }

and finally the view model srtructure:
 public class DisplayDetails
    {
        public int Id { get; set; }
        public string DisplayField { get; set; }
    }

If you can guide me with this example I would really appreciate it.


PK Prasanna Kumar Viswanathan Syncfusion Team March 3, 2020 05:29 PM UTC

Hi Yoab, 
 
Thanks for the update. 
 
Based on your request we have modified the sample and in that sample we populated data from the server-side for the dropdowns. But in our sample the cascading dropdown was working fine with the integers. For your convenience we have attached the sample and video demonstration. So, please check the sample and video & compare with your sample to find out the changes. 
 
Please share the below details to validate further on your requirement. 
 
1. Share the video demonstration of the issue. 
 
2. Share the data source structure details of the dropdowns. 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Prasanna Kumar N.S.V 


Loader.
Up arrow icon