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

DropDownList with different data sources by row

Good afternoon,

I have an ejGrid with a column of "editType: ej.Grid.EditingType.Dropdown".  In this grid's edit mode, I need to have this DropDownList control to have a separate data source by each row, INCLUDING the event of a new blank row.

Currently, I have managed to bind separate data sources on editing via the following code, but I still cannot utilize a separate data source for a new row:

beginEdit: function(i) {
//global js variables, declared outside.
isEditing = true;
activeRow = i.rowIndex;
actionComplete: function(i) {
if (isEditing) {
dataSource: statusData[activeRow],
fields: { id: "StatusID", text: "Status", value: "Status" }

isEditing = false;
activeRow = -1;

If there is an easier way to go about this, please let me know as well.


-David Duran

3 Replies

GV Gowthami V Syncfusion Team November 25, 2014 12:58 PM UTC

Hi David,

We have analyzed your code snippet and we suspect that while adding the new record “beginEdit” clientside event of the grid is not triggered. It will get triggered while editing the record of the grid.

We have created the sample based on your requirement and the same can be downloaded from the following link.

Sample Link: Sample.zip

In the above sample we have used “actionBeginclientside event which can be triggered while begin the actions like CRUD, Filtering, Sorting etc.. and also we have used “selectedRowIndex” method of the grid for binding datasource to the dropdownlist based on the corresponding row index.

Please refer the below code snippet


. . . .

enableAutoSaveOnSelectionChange:false, //Disable auto save while change the selection


actionBegin: function (args) {

                   if (args.requestType == "add" || args.requestType == "beginedit")


                        isEditing = true;

                        activeRow = args.model.selectedRowIndex;



                            var gridobj = $("#Grid").data("ejGrid");


                            activeRow = args.model.selectedRowIndex + 1;







Please refer the below Online Documentation link to get more information about the events of the grid.

Online Documentation Link: http://help.syncfusion.com/UG/JS_CR/ejGrid.html#Events

Please try the above sample and let us know if you have any queries.


Gowthami V.


DU Duran November 25, 2014 04:55 PM UTC


Thanks for your reply and sample code.  The actionBegin and actionComplete events seem to work well for my purposes.

However, I have noticed that if you set the "enableAutoSaveOnSelectionChange" to false, it can cause issues.  When in edit mode, selecting another row, and hitting the "cancel" icon at the top of the grid, the current editing row will be overwritten with the selected row's data.


AS Alan Sangeeth S Syncfusion Team November 26, 2014 11:57 AM UTC

Hi David,



We are able to reproduce the issue “enableAutoSaveOnSelectionChange issue with record save” and we have logged defect report for this. We have also created an incident 132490 to provide you the defect information and please follow-up with that incident so that you can track this defect status through your direct trac account.



Please let us know if you have any queries.


Alan Sangeeth S

Live Chat Icon For mobile
Up arrow icon