Handle event onBlur on cell of column in edit mode DATAGRID

[Alberto]

Hello,
I want trigger a custom function when an user have pointer on a cell of row. On blur event of cell of row I want trigger a function.
I used the followed events but nothing happens:

• cellDeselected
• cellDeselecting
• cellEdit
• cellSave
• cellSaved
• cellSelected
• cellSelecting

Do you some idea ?

[Rajapandiyan Settu]

Alberto,

Thanks for contacting Syncfusion support.

By using column.edit.params property, you can bind blur event to the edit components.

editParams: https://ej2.syncfusion.com/vue/documentation/grid/editing/edit-types/#customize-editors-using-params

blur: https://ej2.syncfusion.com/javascript/documentation/api/textbox#blur

[App.vue]

 

<template>

  <div id="app">

    <ejs-grid

      ref="grid"

      id="grid"

      :dataSource="data"

      :allowPaging="true"

      :editSettings="editSettings"

      :toolbar="toolbar"

    >

      <e-columns>

        <e-column

          field="OrderID"

          headerText="Order ID"

          width="120"

          textAlign="Right"

          :isPrimaryKey="true"

          :validationRules="orderidrules"

          :edit="textboxParams"

        ></e-column>

        <e-column

          field="CustomerID"

          headerText="Customer ID"

          width="120"

          :edit="textboxParams"

        ></e-column>

        <e-column

          field="Freight"

          headerText="Freight"

          width="180"

          format="C2"

          textAlign="Right"

          editType="numericedit"

          :edit="numericTextboxParams"

        ></e-column>

        <e-column

          field="OrderDate"

          headerText="Order Date"

          width="130"

          editType="datetimepickeredit"

          :format="formatoptions"

          textAlign="Right"

          :edit="datePickerParams"

        ></e-column>

        <e-column

          field="ShipCountry"

          headerText="Ship Country"

          width="150"

          editType="dropdownedit"

          :edit="ddParams"

        ></e-column>

      </e-columns>

    </ejs-grid>

  </div>

</template>

<script>

import Vue from "vue";

import { GridPlugin, Edit, Page, Toolbar } from "@syncfusion/ej2-vue-grids";

import { gridData } from "./data";

 

Vue.use(GridPlugin);

 

export default {

  data() {

    return {

      -----

      textboxParams: { params: { blur: this.textboxBlur } },

      numericTextboxParams: { params: { blur: this.numericTextboxBlur } },

      datePickerParams: { params: { blur: this.datePickerBlur } },

      ddParams: { params: { blur: this.ddBlur } },

    };

  },

  methods: {

    textboxBlur: function (args) {

      console.log("textbox blured");

    },

    numericTextboxBlur: function (args) {

      console.log("numericTextbox blured");

    },

    datePickerBlur: function (args) {

      console.log("datePicker blured");

    },

    ddBlur: function (args) {

      console.log("dropdown blured");

    },

  },

 provide: {

    grid: [Page, Edit, Toolbar],

  },

};

</script>

 

Sample: https://codesandbox.io/s/vue-template-forked-nfec7n?file=/src/App.vue

Regards,
Rajapandiyan S

[Alberto]

Wow!
It works!

Thank you

[Alberto]

Hello guys,

Now, when I focus or I blur on input field it trigger my custom event.
My custom event opens a modal(bootstrap-vue modal). But when modal is opened and grid is in edit mode, the datasource is totally deleted.

I want open a modal when I have focus on input field.

Now the modal opens but my datasource will be deleted.

Some suggestions?

thank you

[Rajapandiyan Settu]

Alberto,

Kindly share the below details to proceed further with your query.

1. Explain your requirement in detail with video demo.
2. Why do you want to show the model popup when focusing out the input field?
3. What are the actions you need to do with modal popup?
4. Share the issue reproducible sample which will be very helpful to resolve it earlier.

Regards,
Rajapandiyan S

[Alberto]

Hello,
thank you for the answer.

Now I'm not able to to a video demo.

But I can explain better what I want.
In a column on edit mode I want a input field text with a button, when I click on a button a modal popup will be open. And inside a modal I need custom code with some fields and API REST call.

Some suggestions?

thank you

[Rajapandiyan Settu]

Alberto,

By using editTemplate feature of Grid, you can render an input element with a custom button. In that button click, you can show a modal popup as you want. Please find the below sample for your reference.

editTemplate: https://ej2.syncfusion.com/vue/documentation/grid/editing/edit-types/#using-template

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue_grid_editTemplate_button131520187.zip

 

[App.vue]

      editTemplate: function() {

        return {template: Vue.component('datePicker', {

          template: `<span><input name="CustomerID" :value="data.CustomerID"/><input type="button" value="More" v-on:click="btnClick"/></span>`,

          data() {

              return {data:{}}

          },

          methods:{

            btnClick: function (args){

              // show your modal popup here

              alert("button clicked");

            }

          }

      })}

Still, if you face the issue, kindly share the issue reproducible sample and try to replicate the issue in the given sample.

Regards,
Rajapandiyan S