Row level validation of mandatory cells in Data table upon clicking "Enter" button

Webix JS
1

In Data table: I have a scenario where validation has to be performed, if the mandatory cells of the selected row are empty and user clicks enter to save the record/update. Then a pop-up has to appear asking whether save the changes or discard the changes.

If user selects “save the changes” then user can go ahead for other rows. But when clicks on “Discard changes” then need to keep focus on the empty cell.

Please help me on implementing this logic.

2

Hello,

You can catch the onBeforeEditStop event of the datatable and call the confirm window to apply or discard the changes.

Please, check the related snippet: https://webix.com/snippet/60f0c996

3

Hello Helga,

Thanks for your reply.

But here I have to do validation only on the particular column of the data table like “Title” should never be empty.
And the confirm window has to come on the press of enter button after reaching the last cell of the selected row.

Please help me on this.

Thanks in advance

4

Do you mean row editing when multiple editors are opened for a row?

During row editing, the onBeforeEditStop event fires for each cell in a row consquently, so to avoid repetitive calls you need to show the confirm window only for the last column’s editor: https://webix.com/snippet/f4716ce2

But does it make sense to close editors if another cell is focused? The empty value will be saved, and such behaviour is not desired.

5

Yes Helga,

I understand your point but here the requirement is as such for us and need to bring the focus back to the empty mandatory cell on selecting cancel.

Thanks a lot for your help and it is meeting the 75% of the requirement.

Thanks again.

6

The point is that you can validate the column itself regardless whether users have reached the last cell in row or not.

And the code is simpler and more reliable: https://webix.com/snippet/c70158ba

7

Yes Helga,

It’s perfect and need to know how to get the focus to the empty cell (here title)when user clicks “cancel” button.

Thanks in advance

8

Just apply editor.focus() in the callback function of a confirm window: https://webix.com/snippet/c49c4c54

9

Thanks a lot… :slight_smile:
It’s now working …

10

Hi Helga,

Sorry for disturbing you again and again,

I have some small issue like "I make the mandatory field as empty and click Ok in the confirm window. If i click on the same cell, again the confirm window is getting triggered. "

Please find the code snippet for your reference:

onItemClick:function(id){
this.editRow(id);
},
onBeforeEditStop:function(values, editor){

			      if(editor.column == "title" && !values.value){    
			      	//debugger;
			        webix.confirm({
			          text:"The value is empty. Do you want to save it anyway?",
			           callback:webix.bind(function(res){ 
			            this.blockEvent();
			            if(res)  
			            	this.editStop();
			            else
			             editor.focus();
			            this.unblockEvent();    
			          }, this)
			        });
			        return false;
			      }
			    }

Please help me on understanding this issue.

Thanks in advance.

11

onItemClick:function(id){
this.editRow(id);
},
onBeforeEditStop:function(values, editor){

			      if(editor.column == "title" && !values.value){    
			      	//debugger;
			        webix.confirm({
			          text:"The value is empty. Do you want to save it anyway?",
			           callback:webix.bind(function(res){ 
			            this.blockEvent();
			            if(res)  
			            	this.editStop();
			            else
			             editor.focus();
			            this.unblockEvent();    
			          }, this)
			        });
			        return false;
			      }
			    }
12

Hello Helga,

I got the issue fixed which i mentioned in the previous comment.

How can we have multiple columns as mandatory field for validation?

Thanks in advance,

13

How to have a single confirm message when all the mandatory fields of the data table are empty. And focus to the first mandatory cell of the data table.

Please share an idea.

14

How to avoid the editing of next row unless the mandatory fields of the current row are satisfied in the data-table.

Please help me on this.

Thanks in advance

15

Please respond for this issue as this is very much critical for us.
4