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

Select a value in the Grid Cell Edit

Hello, 


There is something that needs to be solved when modifying the grid

 

I have two questions


editselection.png

 
1. I hope the text is automatically selected when I start editing.
 
2. I hope that the edit mode does not turn off even if the mouse cursor deviates when dragging in the edit mode.
 
<ejs-grid gridLines="Both" allowTextWrap="false" allowSelection="false" rowHeight="30" created="DesignGridBinding" toolbar="@(new List<string>() {"Update", "Cancel" })" queryCellInfo="DesignQueryCellEvent" cellEdit="DesignCellEdit">
           <e-grid-editsettings allowAdding="false" allowEditing="true" allowDeleting="false" mode="Batch" ></e-grid-editsettings>
           <e-grid-selectionsettings type="Single"></e-grid-selectionsettings>
           <e-grid-columns>
               <e-grid-column field="ITEM" headerText="ITEM" width="50" headerTextAlign="Center" textAlign="Left" allowEditing="false"></e-grid-column>
               <e-grid-column field="DESCRIPTION" headerText="DESCRIPTION" width="50" headerTextAlign="Center" textAlign="Left"></e-grid-column>
               <e-grid-column field="VALUE" headerText="VALUE" width="50" headerTextAlign="Center" textAlign="Center" edit="@(new { create = "Val_Create", read = "Val_Read", destory = "Val_Destory", write = "Val_Write" })"></e-grid-column>
           </e-grid-columns>
       </ejs-grid>

I'd appreciate it if you could tell me how to do it


Attachment: Grid_cell_edit_9f7e9835.zip

1 Reply 1 reply marked as answer

PS Pavithra Subramaniyam Syncfusion Team December 6, 2022 01:39 PM UTC

Hi TaeWook Kang,


Query#1: I hope the text is automatically selected when I start editing.


If you want to select the text while editing a string type column in batch mode, we suggest the batcheditform-rendered internal event in which you can get the edit form element and call the “select” method for the input.


function editFormRendered(args) {

  if (args.columnName == 'CustomerID') {

    args.cell.querySelector('input').select();

  }

}

function load(e) {

  var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0];

  // added the call back for the “batcheditform-rendered” event

  grid.on('batcheditform-rendered', editFormRendered);

}

 


Query#2: I hope that the edit mode does not turn off even if the mouse cursor deviates when dragging in the edit mode.


By default, the edit mode will be maintained while you drag inside the current editing cell. While you drag outside of the edited cell it will end the batch editing. This is the default behavior of the Grid component.


Regards,

Pavithra S


Marked as answer
Loader.
Up arrow icon