When rendering a comboBox in a grid cell, it does not focus on it

[Arman]

Hi,

I am creating a grid for entering information and different components are used in each of the columns of this grid (DropDown, TextBox, ...) Each of these components is defined by the queryCellInfo attribute defined for the grid I render in each column. As you can see in the submitted images, when we use the DropDown component in the Item column and focus on the cell with the Tab or Arrow buttons, it automatically focuses on the DropDown. I want to use ComboBox instead of DropDown, but as you can see in the image, when we focus on the desired cell with the Tab or Arrow Buttons, the focus is not on ComboBox. Please provide a solution for this.

Thanks

Attachment: ComboBox_Problem_13203e5d.zip

[Shalini Maragathavel]

Hi Arman, 

Thanks for contacting Syncfusion support. 

Based on your query we suspect that you want to set focus for the combo box component while navigating in the Grid using tab/arrow key. You can achieve your requirement using load event of Grid as demonstrated in the below code snippet, 

 

 

export class Default extends SampleBase { 

  constructor() { 

   

  } 

  editTemplate(args) { 

    return ( 

      <ComboBoxComponent id="combo${OrderID}" dataSource={this.sportsData} /> 

    ); 

  } 

 

  load(args) { 

    // bind the mouseover event to the grid 

    debugger; 

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

    grid.element.addEventListener("keydown", function(e) { 

      var i = parseInt(e.target.closest("tr").getAttribute("aria-rowindex")); //current row index 

      var combo = document.getElementsByClassName("e-combobox")[i] 

        .ej2_instances[0]; 

      combo.focusIn();  //focus combobox component 

    }); 

  } 

 

  render() { 

    return ( 

      <div className="control-pane"> 

        <div className="control-section"> 

          <GridComponent 

            dataSource={orderDetails} 

            height="350" 

            load={this.load} 

         

          > 

            <ColumnsDirective> 

              <ColumnDirective 

                headerText="Combobox" 

                width="180" 

                template={this.editTemplate.bind(this)} 

                textAlign="Center" 

              /> 

              

            </ColumnsDirective> 

            <Inject services={[Page]} /> 

          </GridComponent> 

        </div> 

      </div> 

    ); 

 

Please find the  below sample for your reference. 

Sample : https://stackblitz.com/edit/react-3adn6m-pg2kme?file=index.js

API Link: https://ej2.syncfusion.com/react/documentation/api/combo-box/#focusin

Please get back to us if you need further assistance. 

Regards, 

Shalini M.