Temporarily disable grid arrowDown and arrowUp events

[Andrew Mandruk]

I have a grid with rowTemplate, inside rowTemplate component i use dropdown list or multiselect dropdown.

In the grid row open dropdown popup -> press downArrow\upArrow key.

Expected behavior:

Navigating through values in the dropdown.

Actual behavior:

Changing the active grid row and dropdown popup closes. 

Can i temporarily disable a grid arrowDown\arrowUp key events while dropdown popup is shown, so it will not change the grid row, but navigate through the dropdown values by arrowDown and arrowUp keys?

[Manivel Sellamuthu]

Hi Andrew, 

Greetings from Syncfusion support. 

From your requirement we can understand that you want to disable the grid key configurations for up/down arrow. You can achieve your requirement by using the below suggested way. 

Please refer the below code example and sample for more information. 

<template> 

  <div id="app"> 

    <ejs-grid 

      width="auto" 

      ref="grid" 

      :dataBound="dataBound" 

      :rowTemplate="rowTemplate" 

      :pageSettings="{ pageSize: 100 }" 

      :dataSource="data" 

    > 

      <e-columns> 

        <e-column 

          field="OrderID" 

          headerText="Order ID" 

          textAlign="Right" 

          :isPrimaryKey="true" 

          width="100" 

        ></e-column> 

 

        <e-column 

          field="CustomerID" 

          headerText="Customer ID" 

          width="120" 

        ></e-column> 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

 

<script> 

 . . . 

 

export default { 

  data() { 

    return { 

      data: [ 

        { OrderID: 10248, CustomerID: "VINET", Numbers: 32532 }, 

        { OrderID: 10249, CustomerID: "TOMSP", Numbers: 90476 }, 

        { OrderID: 10250, CustomerID: "HANAR", Numbers: 94564 }, 

        { OrderID: 10251, CustomerID: "VICTE", Numbers: 76522 }, 

        { OrderID: 10252, CustomerID: "SUPRD", Numbers: 24763 }, 

      ], 

      rowTemplate: function () { 

        return { 

          template: Vue.component("rowTemplate", { 

            template: `<tr> 

     

 . . . 

        </td> 

    </tr>`, 

            data: function () { 

              return { 

                data: {}, 

              }; 

            }, 

            computed: {}, 

            methods: {}, 

          }), 

        }; 

      }, 

    }; 

  }, 

  methods: { 

    dataBound: function () { 

      //it will helps to remove the keyConfigs initially 

      this.$refs.grid.ej2Instances.keyConfigs.downArrow = ""; 

      this.$refs.grid.ej2Instances.keyConfigs.upArrow = ""; 

    }, 

  }, 

}; 

</script> 

Sample: https://codesandbox.io/s/159381-rowtemplate-e62xf?file=/src/App.vue 

Please let us know, if you need further assistance. 

Regards, 

Manivel 

[Andrew Mandruk]

Thank you for solution. Now everything work 

[Manivel Sellamuthu]

Hi Andrew, 

Thanks for your update. 

We are glad to hear that the provided solution helped resolve your query. 

Please let us know, if you need further assistance. 

Regards, 

Manivel