PopUp Message when a cell changes

[Carlos Alarcon]

Is it possible to launch a pop up message when a cell change? 

I'd like to implement a custom cell(colum) validation when the cell changes using a pop up dialog.  

Many thanks!

[Thavasianand Sankaranarayanan]

Hi Carlos, 

Greetings from Syncfusion support. 

Based on your query, we suspect that you want to use custom validation while editing grid columns. We have already discussed about this topic in our documentation. Please find the below documentation link for more information.  

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/edit/#custom-validation 

If we misunderstood your query, then could you please share your exact requirement with brief explanation. 

Regards, 

Thavasianand S. 

[Carlos Alarcon]

Hi, thanks for your reply.

I saw the example you mention, but I'd like to display a pop up message according to some special rules I have to implement. 

That example is like an "inline message".

Many thanks!

[Thavasianand Sankaranarayanan]

Hi Carlos, 

Based on your query we have prepared a sample and achieved your requirement by using cellSave event. We have rendered dialog component to validate the cell values. Please refer the below code example and sample link for more information. 

<template> 

  <div id="app"> 

    <div id="test"> 

      <ejs-grid 

        ref="grid" 

        :dataSource="data" 

        :cellSave="cellSave" 

        allowPaging="true" 

      > 

        <e-columns> 

          .       .       .       .       .      .       .  

        </e-columns> 

      </ejs-grid> 

    </div> 

    <!-- Render modal Dialog --> 

    <div> 

      <ejs-dialog 

        ref="modalDialog" 

        :isModal="isModal" 

        :header="header" 

        :width="width" 

        :content="teststr" 

        :animationSettings="animationSettings" 

        :overlayClick="overlayClick" 

        :created="created" 

      ></ejs-dialog> 

    </div> 

  </div> 

</template> 

  methods: { 

    cellSave: function(e) { 

      if (e.value.length >= 5) { 

        this.$refs.modalDialog.$el.ej2_instances[0].content = 

          "Your cell was saved"; 

        this.$refs.modalDialog.show(); 

      } else if (e.value.length < 5) { 

        this.$refs.modalDialog.$el.ej2_instances[0].content = 

          "Need atleast 5 letters"; 

        this.$refs.modalDialog.show(); 

      } 

    } 

Sample: https://codesandbox.io/s/146774-dynamic-grid-modified-nz7ln 

Regards, 

Thavasianand S. 

[Carlos Alarcon]

Thanks again..

The example works, but if I press Update I can save the row with errors..

Example:

Edit customer id with one character

Press update

[Thavasianand Sankaranarayanan]

Hi Carlos, 

Sorry for the inconvenience. 

Based on your query we have prepared a sample and achieved your requirement in cellSave event. In this event we prevent the cellsave action with cancel arguments. we suggest you to follow the below way to achieve your requirement. Please find the below code example and sample for more information. 

       cellSave: function(e) { 

      if (e.value.length >= 5) { 

        this.$refs.modalDialog.$el.ej2_instances[0].content = 

          "Your cell was saved"; 

        this.$refs.modalDialog.show(); 

      } else if (e.value.length < 5) { 

        this.$refs.modalDialog.$el.ej2_instances[0].content = 

          "Need atleast 5 letters"; 

        this.$refs.modalDialog.show(); 

        e.cancel = true; 

      } 

    } 

Sample: https://codesandbox.io/s/146774-dynamic-grid-modified-f19f9 

Regards,
Thavasianand S.