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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

PopUp Message when a cell changes

Thread ID:

Created:

Updated:

Platform:

Replies:

148141 Oct 8,2019 01:32 AM UTC Oct 14,2019 01:07 PM UTC Vue 5
loading
Tags: Data Grid
Carlos Alarcon
Asked On October 8, 2019 01:32 AM UTC

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 [Syncfusion]
Replied On October 8, 2019 10:52 AM UTC

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. 


Carlos Alarcon
Replied On October 8, 2019 05:03 PM UTC

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 [Syncfusion]
Replied On October 9, 2019 01:43 PM UTC

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. 


Carlos Alarcon
Replied On October 13, 2019 01:56 AM UTC

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 [Syncfusion]
Replied On October 14, 2019 01:07 PM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon