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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

I want example of dropdown in gridview

Thread ID:





120277 Sep 17,2015 04:49 AM UTC Sep 18,2015 12:35 PM UTC JavaScript 1
Tags: ejGrid
Bharat Buddhadev
Asked On September 17, 2015 04:49 AM UTC

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.

Mohammed Farook J [Syncfusion]
Replied On 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: http://jsplayground.syncfusion.com/yhejlf3y

Please let us know if you any queries.

J.Mohammed Farook


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