This is a migrated thread and some comments may be shown as answers.

Determine if in line editing has cell open and invalid

10 Answers 357 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Scott Waye
Top achievements
Rank 2
Veteran
Iron
Scott Waye asked on 17 Feb 2017, 09:33 PM

Hi,

I have a grid with inline editing.  Outside of the grid is a submit button.  When clicking submit I want to check that editing is complete and valid before making the ajax call.  For example, the user adds a new row, one of the fields is required, but before filling it in the user clicks Submit.  How can I determine that the current edit cannot be completed as the row is invalid and hence cancel the submit allowing the user to fix the validation error? 

 

Thanks,

Scott

10 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 21 Feb 2017, 01:35 PM
Hello Scott,

In order to add validation to the Grid you can specify DataAnnotation Attributes in the Model. Please examine the article below that describes in more detail how you can setup validation for the model.




Regards,
Viktor Tachev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Scott Waye
Top achievements
Rank 2
Veteran
Iron
answered on 21 Feb 2017, 02:25 PM
HI Victor, This is not related to MVC, and I know how to add validation to the model.  The question is how, from a button click in Kendo UI, to determine if there is a cell in edit which is invalid.  Do you need a dojo?
0
Viktor Tachev
Telerik team
answered on 23 Feb 2017, 11:20 AM
Hi Scott,

Please examine the following thread that discusses similar scenario to the one you have - with an external button and inline editing.


Give the approach a try and see how it works for you.


Regards,
Viktor Tachev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Scott Waye
Top achievements
Rank 2
Veteran
Iron
answered on 23 Feb 2017, 12:38 PM

I;m not being clear.  See this dojo

http://dojo.telerik.com/IluQU

Click to add a new row.  Do not fill the product name field.  Click the submit button.  In the alert where I have "???" I want to show true/false depending on whether the grid is valid, i.e. in this case, as the product name is not valid, it should show false.
0
Viktor Tachev
Telerik team
answered on 27 Feb 2017, 12:11 PM
Hi Scott,

Please examine the modified sample that illustrates the approach you can use. You can search for the k-invalid class that would indicate the Grid is not valid.



Regards,
Viktor Tachev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Scott Waye
Top achievements
Rank 2
Veteran
Iron
answered on 27 Feb 2017, 12:48 PM

Hi Viktor,

This does not work reliably.  Click the Run button in the dojo, click the "Add new Record" button.  Click the submit button.  The message says the grid is valid, although the product name is empty.

0
Viktor Tachev
Telerik team
answered on 28 Feb 2017, 02:28 PM
Hello Scott,

I tested the behavior and the sample works as expected on my end. The message shows false when the input is empty. I also made a short video of the behavior I am observing. Please take a look and let me know if I am missing something.



Regards,
Viktor Tachev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Scott Waye
Top achievements
Rank 2
Veteran
Iron
answered on 28 Feb 2017, 05:28 PM

HI Viktor,

Thanks for the video.  I see that it works fine for you, but I do the same and it doesn't work here.  Looks like you are using Firefox, is that right? 

Here is my video with Firefox: https://www.screencast.com/t/lFnl7yWW

I tried Edge and that works, so perhaps its some race condition.  For info I'm using Firefox 51.0.1 (32-bit) on Windows 10 64 bit.

0
Accepted
Konstantin Dikov
Telerik team
answered on 02 Mar 2017, 12:19 PM
Hello Scott,

I have tested the dojo example in the same version of Firefox and the grid is not valid. Nevertheless, the problem that you are facing seems to be a timing issue caused by some difference in the sequence of events (the blur event of the input element, the setting of the invalid class name and the click of the button). Currently, the only thing that I can suggest to overcome the problem in question is to wrap the logic within the click event handler within a setTimeout function and ensure that the invalid class is included. Can you please give this a try and see if this resolved the issue on your side.

Looking forward to your reply.
 

Regards,
Konstantin Dikov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Scott Waye
Top achievements
Rank 2
Veteran
Iron
answered on 02 Mar 2017, 02:57 PM

yes, adding a timeout does seem to fix the problem:

http://dojo.telerik.com/IluQU/4

I don't like the solution so I'll raise a suggestion to make this less, well, hackish.

Thanks for the help.

Tags
Grid
Asked by
Scott Waye
Top achievements
Rank 2
Veteran
Iron
Answers by
Viktor Tachev
Telerik team
Scott Waye
Top achievements
Rank 2
Veteran
Iron
Konstantin Dikov
Telerik team
Share this question
or