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. Image for the cookie policy date

I want example of dropdown in gridview

Technology must be angular js and mvc

suppose I have three columns in my grid I want to use dropdown in gridview as a one column 
1 column is textbox
2 column is textbox
3 column is dropdown
in example grid must be filled with data and also dropdown also should be filled data with data bind.

Waiting for Example of how to use dropdown in gridview.

Thank you.

1 Reply

MF Mohammed Farook J Syncfusion Team September 18, 2015 12:35 PM UTC

Hi Bharat,

Thanks for contacting Syncfusion support.

We have created an “ejGrid with angularjs” sample in which support and editing options with separate data bind in Dropdown List. Please find the below code example,

<div id="Grid" ej-grid e-datasource="data" e-editsettings-allowadding="true" e-editsettings-allowediting="true" e-toolbarsettings-showtoolbar=true e-toolbarsettings-toolbaritems="toolbaritems" e-allowpaging="true" e-actionbegin="action">

<div e-columns>

<div e-column e-field="EmployeeID" e-headertext="Employee ID" e-textalign="right" e-width="90"></div>

<div e-column e-field="LastName" e-headertext="Last Name" e-textalign="left" e-width="90"></div>

<div e-column e-field="FirstName" e-headertext="FirstName" e-textalign="left" e-width="90"></div> <!--String edit-->

<div e-column e-field="City" e-edittype="dropdownedit" e-datasource='dropdowndata' e-headertext="City" e-textalign="left" e-width="90"></div> <!--dropdown edit-->



var obj = [

{ "EmployeeID": 1, "LastName": "Davolio", "FirstName": "Nancy", "Title": "Sales Representative", "City": "Seattle", "Country": "USA" },

. . .


var textbox = [

{ value: "Seattle", text: "Seattle" },

. . .



angular.module('listCtrl', ['ejangular'])

.controller('PhoneListCtrl', function ($scope) {

$scope.data = obj; //bind grid data

. . .

$scope.dropdowndata = textbox; //bind dropdown data


To bind the dataSource for Dropdown:

To bind separate dataSource for dropdown, please set the column’s propertyEditing type as DropDownEdit. It is necessary to provide the dataSource to that Column’s DataSourceproperty. The dataSource passed to the column must be in the valueandtextformat as in the code example below.

For your convenience, we have added the sample in Syncfusion JS PlayGround and please find the sample from the following link:

Sample: https://jsplayground.syncfusion.com/yhejlf3y

Please let us know if you any queries.

J.Mohammed Farook

Live Chat Icon For mobile
Up arrow icon