Grid with dynamic dropdownlist

[Cris]

Hi I saw this example

https://www.syncfusion.com/forums/136307/grid-documentation-is-incomplete

How do I do a dynamic dropdownlist that is dependent on the value of another column (below) if name is US the dropdownlist on another column will show city from the US etc. using UrlAdaptor.

 

I did this 

            function onActionBegin(args) {

                if (args.requestType == "beginEdit") {

                   this.columns[8].edit.params.dataSource = [

                          { value: 1, text: 'One' },

                          { value: 2, text: 'two' },

                          { value: 3, text: 'three' },

                          { value: 4, text: "four" },

                          { value: 5, text: "five" }

                      ];

                 }

              }

But I am getting TypeError: Cannot set property 'dataSource' of undefined

[Seeni Sakthi Kumar Seeni Raj]

  

Hi Cris, 

Thanks for contacting us. 

We have validated your requirement. You can achieve your requirement by using cellEditTemplate. We have prepared a sample based on your requirement .Please find the below code example and sample for more information. 

Index.cshtml 

@{ 

    ViewData["Title"] = "Home Page"; 

} 

<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="CustomerID" headerText="CustomerID" width="110"></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="ShipName" width="110" edit="@(new {create = "createcity", read = "readcity", destroy = "destroycity", write = "writecity"})"> </e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script> 

    var countryElem; 

    var countryObj; 

    var stateElem; 

    var stateObj; 

//data for shipCounty 

    var country = [ 

        { countryName: 'United States', countryId: '1' }, 

        { countryName: 'Australia', countryId: '2' } 

    ]; 

//data for shipName 

    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 create() { 

        countryElem = document.createElement('input'); 

        return countryElem; 

    }; 

    function read() { 

        return countryObj.text; 

    }; 

    function destroy() { 

        countryObj.destroy(); 

    }; 

    function write(args) { 

// creating dropDownList edit for ShipCountry column 

        countryObj = new ej.dropdowns.DropDownList({ 

            dataSource: country, 

            fields: { value: 'countryId', text: 'countryName' }, 

            value: args.rowData['ShipCountry'], 

            change: function () { 

//enable the shipCity DropDownList dynamically 

                stateObj.enabled = true; 

//Apply the query to change the dropDown DataSource change based on ShipCoutry 

                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(args) { 

// creating dropDownList edit for ShipName column 

        stateObj = new ej.dropdowns.DropDownList({ 

            dataSource: state, 

            fields: { value: 'stateId', text: 'stateName' }, 

//initially disable the ShipName column dropDownlist before selecting any value in SHipCountry 

            enabled: false, 

            value: args.rowData['ShipName'], 

            placeholder: 'Select a state', 

            floatLabelType: 'Never' 

        }); 

        stateObj.appendTo(stateElem); 

    } 

 

</script> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/cascading_dropdownlist-1569185615 

Please get back to us if you need further assistance. 

Regards, 

Seeni Sakthi Kumar S

[Cris]

Thanks. I actually have a group of employee with Roles. e.g. sales, finance and the Roles column is hidden. Whatever the Role is I have to populate it in a dropdown with the list of employee according to its Role. Can I also use UrlAdaptor with the dropdownlist? Thanks I appreciate the help.

[Seeni Sakthi Kumar Seeni Raj]

Hi Cris, 

Thanks for your update. 

Before proceeding your query ,we need some clarifications. Could you please ensure the below details with your requirement. 

1. Since you have hidden the Column Roles, we cannot achieve the cascading dropDownList, in this scenario.

 

2. “Whatever the Role is I have to populate it in a dropdown with the list of employee according to its Role”, in the statement,

do you mention like the foreignKey relationship? If so please find the below documentation link and confirm your requirement. 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/#foreign-key-column 

 

3. Do you want to show the employee instead of Roles while editing or displaying purposes?

 

4. Do you want to provide a custom dataSource while editing?

If so please find the below documentation link for more information. 

https://ej2.syncfusion.com/aspnetcore/documentation/grid/how-to/provide-custom-data-source-and-enabling-filtering-to-drop-down-list/#provide-custom-data-source-and-enabling-filtering-to-dropdownlist 

Please confirm the above details, which will help us to provide a better solution as soon as possible. 

Regards, 

Seeni Sakthi Kumar S 

[Cris]

I have this code, but my problem is I need to store the employeeId and show the USER. How can I do this? Thanks.

            <ejs-grid id="Grid" toolbar="@(new List<string>() {"Add", "Edit", "Cancel", "Update",  "Search" })" load="onLoad" rowSelected="onRowSelected" allowPaging="true" allowSorting="true" allowGrouping="true">

                <e-data-manager url="@Url.Action("LoadData", "GanttTasks")" adaptor="UrlAdaptor" updateUrl="@Url.Action("UpdateData", "GanttTasks")" crossDomain="true"></e-data-manager>

                <e-grid-pagesettings pageSize="10"></e-grid-pagesettings>

                <e-grid-editSettings allowAdding="true" allowDeleting="false" allowEditing="true"></e-grid-editSettings>

                <e-grid-columns>

                    <e-grid-column field="id" visible="false" headerText="ID" width="30" isPrimaryKey="true"></e-grid-column>

                    <e-grid-column field="seqNo" isIdentity="true" headerText="Seq" width="35"></e-grid-column>

                    <e-grid-column field="clientName" isIdentity="true" headerText="Client" width="125"></e-grid-column>

                    <e-grid-column field="name" isIdentity="true" headerText="Name" width="75"></e-grid-column>

                    <e-grid-column field="description" isIdentity="true" headerText="Description" width="130"></e-grid-column>

                    <e-grid-column field="startDate" headerText="Start Date" editType="datetimepickeredit" width="75"></e-grid-column>

                    <e-grid-column field="endDate" headerText="End Date" editType="datetimepickeredit" width="75"></e-grid-column>

                    <e-grid-column field="status" headerText="Status" width="50"></e-grid-column>

                    <e-grid-column field="role" visible="false" headerText="Role" width="40"></e-grid-column>

                    <e-grid-column field="employeeId" headerText="Assigned" foreignKeyField="text" foreignKeyValue="value" editType="dropdownedit" width="75" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})"></e-grid-column>

                </e-grid-columns>

            </ejs-grid>

<script>

 var roleValue;

                var employeeeObj;

                var employeeElem;

                function onLoad(args) {

              

                    this.columns[5].format = { type: 'date', format: 'M/d/y hh:mm a' };  

                    this.columns[6].format = { type: 'date', format: 'M/d/y hh:mm a' };                         

                } 

                //userName, EmployeeId, Role

                var employee = [

                    { text: 'USER1', value: 1, role: 'WATER TECHNICIAN' },

                    { text: 'USER2', value: 2, role: 'WATER TECHNICIAN' },

                    { text: 'USER3', value: 3, role: 'WATER TECHNICIAN' },

                    { text: 'USER4', value: 4, role: 'LABORATORY ANALYST' },

                    { text: 'USER5', value: 5, role: 'ADMINISTRATIVE STAFF' },

                    { text: 'USER6', value: 6, role: 'LABORATORY AIDE' }

                ];

                function ddlStatus(args) {

                    var ele = args.cell.querySelector('select');

                    var drop = new ej.dropdowns.DropDownList({ popupHeight: 75, popupWidth: 75 });

                    drop.appendTo(ele);

                }

                function onRowSelected(args) {

                    roleValue = args.data["role"];

                };

                function create() {

                    employeeElem = document.createElement('input');

                    return employeeElem;

                }

                function read() {

                    return employeeeObj.value;

                }

                function destroy() {

                    employeeeObj.destroy();

                }

                function write(args) {

                    employeeeObj = new ejs.dropdowns.DropDownList({

                        dataSource: employee,

                        fields: { text: 'text', value: 'value', role: 'role' },

                        query: new ej.data.Query().where('role', 'equal', roleValue),

                        enabled: true,

                        value: args.rowData['employeeId'],

                        placeholder: 'Select an Employee',

                        floatLabelType: 'Never'

                    });

                    employeeeObj.appendTo(employeeElem);

                }

</script>

[Cris]

Any thoughts on this? Thanks

[Pavithra Subramaniyam]

Hi Cris, 

 

Thanks for your update. 

 

You can use Foreignkey column or valueAccessor to achieve your requirement. Please find the below explanation. 

 

Foreignkey column: 

 

Demo: https://ej2.syncfusion.com/javascript/demos/#/material/grid/foreign-key.html 

 

We have validated your requirement. We would like to inform you that foreignKey column requires a column dataSource, foreignKey field and foreignKey value to show the data. If foreignKeyField is not defined, then the column uses field property of e-grid-column tag helper. Please find the below code example for more information. 

 

<ejs-grid id="Grid" dataSource="@ViewBag.datasource"> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 

        <e-grid-column field="EmployeeID" headerText="Empolyee Name" foreignKeyValue="FirstName" dataSource="ViewBag.foreign" width="150"></e-grid-column> 

        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column> 

        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

In the above code Grid will compare the EmployeeID with the foreignkey column dataSource’s EmployeeID and display the FirstName in the grid column. If there is no matched value will be displayed as blank. If you want to show the value from another dataSource you can use the Foreignkey column in your project. 

 

 

ValueAccessor: 

 

If you have a single dataSource and want to display one column’s value in another column, you can use valueAccessor property of the column to achieve your requirement. Please find the below code example for more information. 

 

Index.cshtml 

@{ 

    ViewData["Title"] = "Home Page"; 

} 

@{ 

. . . 

    Object ShipCountryvalueAccess; 

    ShipCountryvalueAccess = "ShipCountryvalueAccessFn"; 

} 

 

 

<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="CustomerID" visible="false" headerText="CustomerID" width="110"></e-grid-column> 

        <e-grid-column field="ShipCountry" headerText="Ship Country" valueAccessor="ShipCountryvalueAccess" width="150" editType='dropdownedit'></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

<script> 

 

    function ShipCountryvalueAccessFn(field, data, column) { 

        // in the data and field you will get the value for other columns. 

        return data.CustomerID; 

    } 

</script> 

 

 

In the above code ShipCountryvalueAccessFn will trigger for each request while access to column’s data , like initial rendering, editing, adding actions. In the above sample we have displayed the CustomerID data in the shipCountry column. But in dataSource it will store the ShipCountry’s original value. Value accessor is for displaying purpose only. 

 

If you still faced any issues, Please share the below details, 

 

1. Grid dataSource example
2. Visually explain your requirement(like pictorial diagram)

 

Regards, 

Pavithra S. 

[Cris]

hi thanks I appreciate your help. But this doesnt solve my whole problem. Again I have a role column and an employee column. The datasource from the employee column dropdown below. When trying to edit on each row, i would look into the role column and check what is the value on the role column and query the datasource of the employee dropdown to show only for example WATER TECHNICIAN. How can I achieve this with your examples? Thanks so much.

                var employee = [

                    { text: 'USER1', value: 1, role: 'WATER TECHNICIAN' },

                    { text: 'USER2', value: 2, role: 'WATER TECHNICIAN' },

                    { text: 'USER3', value: 3, role: 'WATER TECHNICIAN' },

                    { text: 'USER4', value: 4, role: 'LABORATORY ANALYST' },

                    { text: 'USER5', value: 5, role: 'ADMINISTRATIVE STAFF' },

                    { text: 'USER6', value: 6, role: 'LABORATORY AIDE' }

                ];

[Pavithra Subramaniyam]

Hi Cris, 

 

Thanks for your update. 

 

We have prepared a sample based on your requirement. In the below sample we have rendered dropDown using cellEditTemplate for shipCountry column. For the dropDown we are getting data by passing the query based on the hidden column (EmployeeID). Please find the below code example and sample for more information. 

 

Index.cshtml 

<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="EmployeeID" visible="false"></e-grid-column> 

        <e-grid-column field="ShipCountry" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" width="110"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script> 

    var countryElem; 

    var countryObj; 

 

    var state = [ 

        { stateName: 'New York', countryId: 1 }, 

        { stateName: 'California', countryId: 1 }, 

        { stateName: 'Virginia ', countryId:  2 }, 

        { stateName: 'Washington', countryId: 3 }, 

        { stateName: 'Queensland', countryId: 4 }, 

        { stateName: 'Tasmania ', countryId: 5 }, 

        { stateName: 'Victoria', countryId:  6 } 

    ]; 

 

    function create() { 

        countryElem = document.createElement('input'); 

        return countryElem; 

    }; 

    function read() { 

// here you can return the text or value as per your requirement 

        return countryObj.vaule; 

    }; 

    function destroy() { 

        countryObj.destroy(); 

    }; 

    function write(args) { 

        countryObj = new ej.dropdowns.DropDownList({ 

            dataSource: state, 

// here we have showed and saved statename, you can change the text and value as per your requirement. 

            fields: { value: 'stateName', text: 'stateName' }, 

            value: args.rowData['ShipCountry'], 

  // applied the quet based on the EmployeeID value to retrieve the data 

            query: new ej.data.Query().where('countryId', 'equal', args.rowData.EmployeeID ), 

            placeholder: 'Select a value', 

            floatLabelType: 'Never' 

        }); 

        countryObj.appendTo(countryElem); 

    }; 

 

</script> 

 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/149569/ze/149569-dropdownlist_-_modified-99382534.zip 

 

Please get back to us, if you need further assistance. 

 

Regards, 

Pavithra S. 

[Cris]

Hi the problem with this is I would want to show the stateName example New York but would want to save the countryId. I think I will not achieve that using a dynamically created dropdownlist. Can you show me an example of a Grid with a fixed dropdownlist(not dynamically created so I can save the Id and show the text from the dataSource employee) but I can query on it during edit? On the selected row I will get the value of the Role column(roleValue) and select the roleValue on the role of the dropdown from the datasource employee below? I appreciate the help thanks so much

                function onRowSelected(args) {

                    roleValue = args.data["role"];

                };

                var employee = [

                    { text: 'USER1', value: 1, role: 'WATER TECHNICIAN' },

                    { text: 'USER2', value: 2, role: 'WATER TECHNICIAN' },

                    { text: 'USER3', value: 3, role: 'WATER TECHNICIAN' },

                    { text: 'USER4', value: 4, role: 'LABORATORY ANALYST' },

                    { text: 'USER5', value: 5, role: 'ADMINISTRATIVE STAFF' },

                    { text: 'USER6', value: 6, role: 'LABORATORY AIDE' }

                ];

[Seeni Sakthi Kumar Seeni Raj]

Hi Cris, 

Thanks for your update. 

We have modified the previous sample as per your requirement. In the below example we have queried dropDown while editing with the value of selected EmployeeID value. Please find the below code example and sample for more information. 

Index.cshtml 

 

@{ 

    ViewData["Title"] = "Home Page"; 

} 

 

@{ 

    var editParams = new Syncfusion.EJ2.DropDowns.DropDownList() { ActionComplete="actionComplete", ActionBegin = "DropDownactionBegin", DataSource ="state", Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Text = "stateName", Value= "countryId" } }; 

// mentioned stateName as text , show it will be showed on dropdown 

//mentioned CountryID as value, show it will be saved to Grid. 

} 

 

<ejs-grid id="Grid" rowSelected="onRowSelected" 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="EmployeeID" visible="false"></e-grid-column> 

        <e-grid-column field="ShipCountry" editType="dropdownedit" edit="@(new {@params=editParams })" width="110"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script> 

 

    var employeeValue; 

    function actionComplete(args) { 

        return false; 

    } 

    function onRowSelected(args) { 

        employeeValue = args.data["EmployeeID"]; 

    } 

 

    function DropDownactionBegin(args) { 

        args.query = new ej.data.Query().where('countryId', 'equal', employeeValue); 

    } 

 

    var state = [ 

        { stateName: 'New York', countryId: 1 }, 

        { stateName: 'California', countryId: 1 }, 

        { stateName: 'Virginia ', countryId: 2 }, 

        { stateName: 'Washington', countryId: 3 }, 

        { stateName: 'Queensland', countryId: 4 }, 

        { stateName: 'Tasmania ', countryId: 5 }, 

        { stateName: 'Victoria', countryId: 6 } 

    ]; 

 

</script> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/149569/ze/149569-dropdownlist-query68424211.zip 

If the above example does not meet your requirement, you can use ForeignKey column. 

Foreignkey column: 

 

Demo: https://ej2.syncfusion.com/javascript/demos/#/material/grid/foreign-key.html 

Code Example: 

<ejs-grid id="Grid" dataSource="@ViewBag.datasource"> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 

        <e-grid-column field="EmployeeID" headerText="Empolyee Name" foreignKeyValue="FirstName" dataSource="ViewBag.foreign" width="150"></e-grid-column> 

        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column> 

        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

In the above code Grid will compare the EmployeeID with the foreignkey column dataSource’s EmployeeID and display the FirstName in the grid column. If there is no matched value will be displayed as blank. Also after updating the row it will show the ForeignKey value(FirstName) in Grid Rows and store the EmployeeID in the grid dataSource. 

Regards, 

Seeni Sakthi Kumar S 

[Cris]

Thanks I found a way to get it working.

[Seeni Sakthi Kumar Seeni Raj]

Hi Cris,  

Thanks for the update.

We are happy to hear that your requirement has been resolved.

Regards,  

Seeni Sakthi Kumar S