We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

PopUp Message when a cell changes

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!

5 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team October 8, 2019 02:52 AM

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.  


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

Regards, 
Thavasianand S. 



CA Carlos Alarcon October 8, 2019 09:03 AM

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!


TS Thavasianand Sankaranarayanan Syncfusion Team October 9, 2019 05:43 AM

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(); 
      } 
    } 


Regards, 
Thavasianand S. 



CA Carlos Alarcon October 12, 2019 05:56 PM

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




TS Thavasianand Sankaranarayanan Syncfusion Team October 14, 2019 05:07 AM

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; 
      } 
    } 


Regards,
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon