I want example of dropdown in gridview

[Bharat Buddhadev]

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]

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-->

</div>

<script>

var obj = [

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

. . .

];

var textbox = [

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

. . .

];

$("#sampleProperties").ejPropertiesPanel();

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

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

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

. . .

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

});
</script>

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.

Regards,
J.Mohammed Farook