We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid with dynamic dropdownlist

Thread ID:

Created:

Updated:

Platform:

Replies:

149569 Nov 30,2019 05:54 PM UTC Dec 11,2019 01:13 PM UTC ASP.NET Core - EJ 2 12
loading
Tags: DataGrid
Cris
Asked On November 30, 2019 05:58 PM UTC

Hi I saw this example


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 [Syncfusion]
Replied On December 2, 2019 12:02 PM UTC

  
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> 



Please get back to us if you need further assistance. 


Regards, 
Seeni Sakthi Kumar S

Cris
Replied On December 2, 2019 01:25 PM UTC

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 [Syncfusion]
Replied On December 3, 2019 01:26 PM UTC

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.
 
  1. “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. 
 
  1. Do you want to show the employee instead of Roles while editing or displaying purposes?
 
  1. Do you want to provide a custom dataSource while editing?
If so please find the below documentation link for more information. 

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

Regards, 
Seeni Sakthi Kumar S 


Cris
Replied On December 5, 2019 02:11 AM UTC

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
Replied On December 5, 2019 10:38 AM UTC

Any thoughts on this? Thanks

Pavithra Subramaniyam [Syncfusion]
Replied On December 5, 2019 11:04 AM UTC

Hi Cris, 
 
Thanks for your update. 
 
You can use Foreignkey column or valueAccessor to achieve your requirement. Please find the below explanation. 
 
 
 
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
Replied On December 5, 2019 01:54 PM UTC

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 [Syncfusion]
Replied On December 6, 2019 09:51 AM UTC

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> 
 
 
 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Pavithra S. 


Cris
Replied On December 6, 2019 01:28 PM UTC

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 [Syncfusion]
Replied On December 9, 2019 11:57 AM UTC

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> 
 



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

 

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
Replied On December 11, 2019 12:53 PM UTC

Thanks I found a way to get it working.

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On December 11, 2019 01:13 PM UTC

Hi Cris,  

Thanks for the update.

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

Regards,  
Seeni Sakthi Kumar S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon