ejGrid editMode batch. Different cell type depends on adding or editing.

[Luis Carlos]

I must use the component "ejGrid" with editMode = "batch".

I would like to know if I can change the edit type ("dropdownedit" or "stringedit") when I am editing a cell value.

I need to use edit type "drowdownedit" when the cell value already exists. However, if cell value does not exist yet (it was added but it was not saved yet), I need  use edit type "stringedit".

Is there any way to know if cell value belongs to a new row or a row that already exists?

Thank you in advance for your time.

Best regards,

Luis Carlos Díaz.

[Thavasianand Sankaranarayanan]

Hi Luis, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you want render the dropdownlist when the cell has value, otherwise it will maintain as string edit. We have achieved the same using the cellEdit event of ejGrid control. 

For an example we have change “EmployeeID” column, normal text box into ejDropDownList when the cell has the value. 

Refer the below code example. 

<script type="text/javascript"> 

      var Data = [ 

         { OrderID: '10248', CustomerID: 'VINET', EmployeeID:'1', Employee:{Address:'India'},Freight:'33.38',ShipName:'Alfreds Futterkiste',ShipCountry:'Brazil'}, 

             

              -------------------  

       ]; 

          var data = ej.DataManager(Data).executeLocal(ej.Query().select("EmployeeID")); 

        $(function () { 

            $("#Grid").ejGrid({ 

                dataSource: Data, 

                allowPaging: true, 

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "batch" }, 

                 

                columns: [ 

                          

                     ------------------ 

 

               ], 

       cellEdit: function(e){ 

                                   

           if(e.columnName == "EmployeeID" && !(e.value == "")) 

                                          

              setTimeout(function (e) { 

 

               if($('.e-ejinputtext').val() != "") 

 

                    $('.e-ejinputtext').ejDropDownList({dataSource:data,value:$('.e-ejinputtext').val()}); //Change the input text box into ejDropDownList when cell has value   

                }, 2); 

                                   

                           } 

            }); 

        }); 

    </script> 

We have prepared a JsPlayground sample in the following link. 

Sample: https://jsplayground.syncfusion.com/rpcns14h 

Refer the help documentation. 

Link: https://help.syncfusion.com/api/js/ejgrid#events:celledit 

Regards, 

Thavasianand S. 

[Luis Carlos]

Hi Luis, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you want render the dropdownlist when the cell has value, otherwise it will maintain as string edit. We have achieved the same using the cellEdit event of ejGrid control. 

For an example we have change “EmployeeID” column, normal text box into ejDropDownList when the cell has the value. 

Refer the below code example. 

<script type="text/javascript"> 

      var Data = [ 

         { OrderID: '10248', CustomerID: 'VINET', EmployeeID:'1', Employee:{Address:'India'},Freight:'33.38',ShipName:'Alfreds Futterkiste',ShipCountry:'Brazil'}, 

             

              -------------------  

       ]; 

          var data = ej.DataManager(Data).executeLocal(ej.Query().select("EmployeeID")); 

        $(function () { 

            $("#Grid").ejGrid({ 

                dataSource: Data, 

                allowPaging: true, 

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "batch" }, 

                 

                columns: [ 

                          

                     ------------------ 

 

               ], 

       cellEdit: function(e){ 

                                   

           if(e.columnName == "EmployeeID" && !(e.value == "")) 

                                          

              setTimeout(function (e) { 

 

               if($('.e-ejinputtext').val() != "") 

 

                    $('.e-ejinputtext').ejDropDownList({dataSource:data,value:$('.e-ejinputtext').val()}); //Change the input text box into ejDropDownList when cell has value   

                }, 2); 

                                   

                           } 

            }); 

        }); 

    </script> 

We have prepared a JsPlayground sample in the following link. 

Sample: http://jsplayground.syncfusion.com/rpcns14h 

Refer the help documentation. 

Link: https://help.syncfusion.com/api/js/ejgrid#events:celledit 

Regards, 

Thavasianand S. 

Hi.

Thank you for your reply.

I'm sorry, I didn't explain well ...  I don't want to render as a dropdownlist when the cell has value. 

I would like to render as a dropdownlist if cell value wasn't saved. For instance: This cell contains a red corner because it wasn't saved yet.

Also I would like to render as a string edit if cell value was already saved. For instance: This cell doesn't contain red corner because it was already saved.

In sum up, both cells contain value, however one of them was saved (there is not any red corner) and another wasn't saved yet (there is a red corner).thank you again for your time.

Best regards, 

Luis Carlos Díaz.

[Thavasianand Sankaranarayanan]

Hi Luis, 

We have analyzed your query and we suspect that you want to render the ejDropDownList when the cell wasn’t saved. We have achieved the same by using the cellSave event of ejGrid control. 

Refer the below code example. 

$("#Grid").ejGrid({ 

                // the datasource "window.gridData" is referred from jsondata.min.js 

         dataSource: Data, 

         allowPaging: true, 

         allowScrolling: true, 

         editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true , editMode:"batch"}, 

         toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }, 

         columns: [ 

                ------------- 

                 

                { field: "EmployeeID", headerText: 'Employee ID', editType: ej.Grid.EditingType.Dropdown, textAlign: ej.TextAlign.Right, width: 80 }, 

 

 

                ], 

    cellSave: function(e){ 

 

       if (e.columnName == "EmployeeID") //for EmployeeID column  

            

           setTimeout(function (e) { 

 

           if ($('.e-grid .e-gridcontent tr td.e-selectionbackground').hasClass("e-updatedtd")) // If the cell has the red corner updatetd { 

            var inputelement = ej.buildTag("input#" + ".dropdownsave" ); 

            inputelement.attr('type', 'text'); 

           var data = ej.DataManager(Data).executeLocal(ej.Query().select("EmployeeID")); 

            var selectedDropDown = $('.e-grid .e-gridcontent tr').find("td.e-updatedtd.e-selectionbackground");  

            selectedDropDown.empty(); 

            selectedDropDown.append(inputelement); 

            selectedDropDown.find('.dropdownsave').ejDropDownList({ dataSource: data, value: args.value,width:selectedDropDown.width() });  //appended input element changed to ejDropDownList 

        

         } 

       }, 2); 

 

    } 

}); 

We have prepared a JsPlayground sample in the following link. 

Sample: https://jsplayground.syncfusion.com/y20hah3i 

Refer the help documentation. 

Link: https://help.syncfusion.com/api/js/ejgrid#events:cellsave 

Regards, 

Thavasianand S.