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

Exist a form to create a custom dropdown column in grid

Thread ID:





123596 Apr 1,2016 08:42 PM UTC Apr 5,2016 06:20 AM UTC ASP.NET Web Forms 4
Tags: Grid
Roimer Machacón Otero
Asked On April 1, 2016 08:42 PM UTC

Hi, we're using a syncfusion grid and have a question:

This is a example that we're need:

Have a grid, in this grid of a table of database load two columns: A column invisible with an id and another column with values. 
Also in this grid need a column that load a custom dropdownlist/combobox with data of another table of the database and another column in blank for the users write in each cell a numeric value.

All this description is possible of make in syncfusion grid? (We've a syncfusion version

Attached a image with the graphic example of the grid


Attachment: grid_with_dropdown_column_136c83b8.zip

Venkatesh Ayothi Raman [Syncfusion]
Replied On April 4, 2016 12:40 PM UTC

Hi Roimer,

Thanks for contacting Syncfusion support.

Query 1:”Custom Dropdown list with data of another table of the database”

We have achieved your requirement using templateRefresh event. This event triggered when refresh the template column elements in the grid. We have created a sample with custom dropdowndata and bound a dropdown data source using ejdropdownlist dataSource property. Please refer to the following Help document, code example and sample,

Help document for templateRefresh event:http://help.syncfusion.com/js/api/ejgrid#events:templaterefresh

Help document for ejDropdownlist: http://help.syncfusion.com/js/api/ejdropdownlist#members:datasource

Code Example:

function templaterefresh(args) {


            var data = [];

            for (var i = 0; i < 10; i++) {

                data.push({  Customdropdown: window.gridData[i]["CustomerID"] });//Get a dropdown data from new datasource


            $(args.cell).find('input').ejDropDownList({ dataSource: data, fields:{text: "Customdropdown"},selectedIndex:2 });//Bound a dropdown data using datasource property



Sample: http://www.syncfusion.com/downloads/support/directtrac/general/7z/Customdropdownlist-154520693

Query 2:”Another columns is blank”

We are unable to understand your requirement clearly. So, please share the following and more information to provide a prompt solution,

1)      Do you want blank column or input column? If blank column means, then do you want to write values in blank column while we edit.
       2)      Do you want to save the data in data source when we write a values in blank column?


Venkatesh Ayothiraman.

Roimer Machacón Otero
Replied On April 4, 2016 02:02 PM UTC

Hi we've tried of use the example and appear that TemplateRefresh isn't a valid attribute in clientsideevents

Roimer Machacón Otero
Replied On April 4, 2016 02:23 PM UTC

We've a syncfusion version

Venkatesh Ayothi Raman [Syncfusion]
Replied On April 5, 2016 06:20 AM UTC

Hi Roimer,

Sorry for the inconvenience caused.

We have achieved your requirement “Custom dropdown column” using databound event and actionComplete event. Databound events  triggered when the grid is bound with data during initial rendering and we have rendered a custom dropdown column with data of another table at initial rendering.

ActionComplete events triggered for every grid action success event and we can get the request type and check the condition in this event. We have created a sample and refer to the code example, sample and Help document,

Code Example:


<ej:Grid ID="Grid1"    AllowPaging="True"

            EnableRowHover="true"     AllowCellMerging="false"

              ShowStackedHeader="true" AllowReordering="false" Locale="en-US" AllowMultiSorting="false"  AllowSelection="false"



                <ej:Column Field="OrderID" HeaderText="Order ID"    TextAlign="Right" Width="90" />

                <ej:Column Field="CustomerID" HeaderText="Customer ID"   Width="100"  />

                <ej:Column Field="EmployeeID" HeaderText="Employee ID" HeaderTemplateID="#employeeTemplate" TextAlign="Right" Width="110"  />

                <ej:Column Field="Freight" HeaderText="Freight"  TextAlign="Right" Width="90" Format="{0:C}" />               

                <ej:Column Field="ShipCity" HeaderText="Ship City" Width="100" />

                <ej:Column Field="Customdropdown" HeaderText="Customdropdown" Width="100"  Template="true" TemplateID="#customTemplate"/>


            <…….code something………..>

<ClientSideEvents   ActionComplete="actionComplete"  ActionBegin="actionBegin" DataBound="dataBound" />




function dataBound(args) {




<ActionComplete event>

function actionComplete(e) {


            if ( e.requestType == "paging" ) {





<Dropdown data>

function dropdown() {


            var data = [];

            for (var i = 0; i < 10; i++) {

                data.push({ Customdropdown: window.gridData[i]["CustomerID"] });//Get a dropdown data from new datasource


            var obj = $("#Grid1").ejGrid("instance");//Create a instance of grid

            obj.element.find(".e-templatecell").find('input').ejDropDownList({ dataSource: data, fields: { text: "Customdropdown" }, selectedIndex: 2 });//Bound a dropdown data using datasource property


Help document for data bound: http://help.syncfusion.com/js/api/ejgrid#events:databound

Help document for action complete: http://help.syncfusion.com/js/api/ejgrid#events:actioncomplete

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/7z/Customdropdown-1827488623


Venkatesh Ayothiraman.


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