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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

130347 May 8,2017 09:11 AM May 10,2017 07:57 AM JavaScript 3
loading
Tags: ejGrid
Luis Carlos
Asked On May 8, 2017 09:11 AM

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 [Syncfusion]
Replied On May 9, 2017 08:42 AM

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. 


Refer the help documentation. 


Regards, 
Thavasianand S. 


Luis Carlos
Replied On May 9, 2017 10:26 AM

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. 


Refer the help documentation. 


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 [Syncfusion]
Replied On May 10, 2017 07:57 AM

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. 


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.

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.

;