PopUp Message when a cell changes

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!

Reply | Reply with quote

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.

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.

Reply | Reply with quote

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!

Reply | Reply with quote

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.

<ejs-grid

ref="grid"

:dataSource="data"

:cellSave="cellSave"

allowPaging="true"

>

<e-columns>

. . . . . . .

</e-columns>

</ejs-grid>

</div>

<div>

<ejs-dialog

ref="modalDialog"

:isModal="isModal"

:header="header"

:width="width"

:content="teststr"

:animationSettings="animationSettings"

:overlayClick="overlayClick"

:created="created"

></ejs-dialog>

</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.

Reply | Reply with quote

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

Reply | Reply with quote

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;

}

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

Regards,
Thavasianand S.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
148141	Oct 8,2019 01:32 AM UTC	Oct 14,2019 01:07 PM UTC	Vue	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US