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

Grid Edit with DropDown

Thread ID:

Created:

Updated:

Platform:

Replies:

143525 Mar 25,2019 11:34 AM UTC Mar 28,2019 05:11 AM UTC JavaScript - EJ 2 3
loading
Tags: Grid
Miguel Varela Rodriguez
Asked On March 25, 2019 11:34 AM UTC

Hi,

i have a data grid that is editable, some of te columns are dropdown lists.

Now i have declared the edit methods and works fine.

Just how can i get the rowindex of the edited column to update another column of the same row?

I leave here my column declaration:

{
                    field: 'codeProject', 
                    headerText: 'C.Obra', 
                    textAlign:'Left',
                    visible:true,
                    editType:'dropdownedit',
                    cellSave: GridDataCellSave,
                    edit: {
                        create:(args) =>{
                            gridSelectElement = document.createElement('input');
                            return gridSelectElement;
                        },
                        read:(args) => {
                            return gridSelectList.value;
                            
                        },
                        destroy:() =>{
                            gridSelectList.destroy();
                        },
                        write: (args) => {
                            gridSelectList = new ej.dropdowns.DropDownList(
                                {
                                    dataSource:arrProjects,
                                    fields:{value: 'sCodigo', text:'sDesc'}
                                }
                            );
                            gridSelectList.appendTo(gridSelectElement);
                        }
                        
                    }
                    
                },


Thank you in advance for you help.

Regards Miguel

Thavasianand Sankaranarayanan [Syncfusion]
Replied On March 26, 2019 05:55 AM UTC

Hi Miguel, 

Greetings from Syncfusion support. 

Based on your query we suspect that you want to get the edited rowIndex when edit a row. You can get the edited rowIndex in  actionComplete event’s argument. 

Refer the below screen shot. 

 


Please let us know if you need further assistance on this. 

Regards, 
Thavasianand S. 


Miguel Varela Rodriguez
Replied On March 27, 2019 08:57 AM UTC

Thank you for your information.

What i want to do is after going into edit mode and selecting a item in the dropdown, is to change a value in another column.

The problem that i have right now with your solution is the following, in the actionComplete Event with the Request type Save and action Edit i got no RowID object.

I attached a screenshot, and full declaration of the Grid Box as file.

Attachment: syncfusion_grid_dropdown_bc2d2163.zip

Thavasianand Sankaranarayanan [Syncfusion]
Replied On March 28, 2019 05:11 AM UTC

Hi Miguel, 

We can achieve your requirement using the change event of DropDownList control.  

In the below code example we have modify the CustomerID column value when we change the dropdown value in edit form. 

[index.js] 

ej.base.enableRipple(true); 
 
 
    var grid = new ej.grids.Grid({ 
        dataSource: window.orderDataSource, 
        editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal', newRowPosition:'Top' }, 
        allowPaging: true, 
        pageSettings: { pageCount: 5 }, 
        toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 
 
        columns: [ 
            { 
                field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'Right', 
                validationRules: { required: true, number: true }, width: 140 
            }, 
            { 
                field: 'CustomerID', headerText: 'Customer ID', 
                validationRules: { required: true }, width: 140 
            }, 
            { 
                field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit', 
                width: 140, format: 'C2', validationRules: { required: true } 
            }, 
            { 
                field: 'OrderDate', headerText: 'Order Date', editType: 'datetimepickeredit', format: { type: 'dateTime', format: 'M/d/y hh:mm a' }, 
                width: 160 
            }, 
            { 
                field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150, 
                edit: { params: { popupHeight: '300px',change:change } } 
            } 
        ], 
    }); 
    grid.appendTo('#Grid'); 
 
    function change(args){ 
      var editColumn = document.getElementById('GridCustomerID'); 
      editColumn.value = "Madhu"; 
    } 



We have prepared a simple sample in the following stackblitz link. 


Refer the help documentation. 




Regards, 
Thavasianand S. 


CONFIRMATION

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

;