Grid cell focused instead of dropdownlist search input when using column template

[Md. Sujon]

i I have used column template to display searchable dropdownlist in grid cell but when clicking on on drop down it should focus on search input. but it focus on the cell . My code:

<ejs-grid id="gridSection" height="100%" width="100%" ref="gridSection"

                                :dataSource="procurementClassifications" :toolbar='toolbar' :allowEditing="false"

                                :allowSorting="true" :allowResizing='true'

                                :locale="locale" :rowHeight='30'>

<e-columns>

   <e-column :allowEditing="false" :headerText="$t('supplierGrouping')" type="string"

                                        field='groupName' width='200'></e-column>

  <e-column type="string" autocomplete="off" :headerText="$t('mainClassification')"

                                        :template="'mainClassificationTemplate'" field='mainClassificationName'

                                        width='200' :allowEditing="false">

                                        <template v-slot:mainClassificationTemplate="{ data }">

                                            <div>

                                                <ejs-dropdownlist :id='"mainClassificationdropdownlist_" + data.id'

                                                    :dataSource='mainClassifications' :allowFiltering="true"

                                                    v-model="data['mainClassificationId']" popupWidth='auto'

                                                    :showClearButton="true" :fields="classificationField"

                                                    :change="mainClassificationDropDownChange.bind(e, data)">

                                                </ejs-dropdownlist>

                                            </div>

                                        </template>

  </e-column>

</e-columns>

</ejs-grid>

[Aishwarya Rameshbabu]

Hi Md. Sujon,

Greetings from Syncfusion support.

We have developed a sample based on the provided code example. The reported issue concerning the focus not being properly set on the search input of the DropDownList component occurs only at random times. Therefore, we recommend using the following code lines to address this issue. Please refer to the code example below, where we set the focus on the search element of the DropDownList component during its open event to prevent the focus from shifting to the Grid cell.

App.vue

    <ejs-grid  id="gridSection" height="100%" width="100%" ref="gridSection" :dataSource='data' :allowSorting="true" :allowResizing='true' :toolbar='toolbar' :locale="locale" :rowHeight='30' >

        <e-columns>

          …………….

            <e-column headerText='Order Status' type="string" :template="'mainClassificationTemplate'" width=200 :allowEditing="false"></e-column>

        </e-columns>

        <template v-slot:mainClassificationTemplate="{data}">

          <div><ejs-dropdownlist :id='"mainClassificationdropdownlist_" + data.OrderID' :dataSource='dropData' :allowFiltering="true" 

       :fields="classificationField" popupWidth='auto' :open="onDropDownOpen" :showClearButton="true"> </ejs-dropdownlist></div>

        </template>

    </ejs-grid>

 

  onDropDownOpen(args) { 

    const searchInput = args.popup.element.querySelector('.e-input-filter'); 

    if (searchInput) {

      searchInput.focus();

    }

  },

 

Sample: Yrfnk7 (forked) - StackBlitz

Screenshot:

Additionally, from the shared code example, we noticed that you are using the allowEditing property directly in the Grid. This property should be defined within the editSettings property of the Grid. Furthermore, the 'mainClassificationName' column includes a property autocomplete="off", which is not a defined property of Syncfusion Grid columns. Please refer to the API documentation below to learn more about the properties and methods of Syncfusion Grid.

API Links:

Grid

Columns

Open-Event-Of-DropDownList

Regards

Aishwarya R