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

Kendo Window confirmation OK or Cancel

7 Answers 1528 Views
Window
This is a migrated thread and some comments may be shown as answers.
Jamie
Top achievements
Rank 1
Jamie asked on 26 Oct 2012, 06:38 PM
Customer wants a popup when performing a batch inline edit on the grid for column X value to be checked and either cause a validation error or not depending on clicking Yes or No on a confirmation popup.  

Basically:  if x == 40 then ask "This could be conflicting, do you want to update any way? Yes or No"  
if yes then continue (allow them to save)
                        if no then set validation error  (for them to change it before saving)

I've tried using confirm() and alert() however there is a bug that causes the e.sender.editor in my Save event to become null after the alert/confirm popup occurs (I'm guessing timing, because this is inconsistent).  This looses all my grid updates (no more modified triangle).  I am not that savvy at debugging actual javascript, so I went down another path of trying to replace them with the Kendo UI Window.  Now my problem is that I need the script to pause for an answer from the Ok or the Cancel so that I can present the proper validation error (or not) in the grid.

If I setup an event for on "No", it triggers after the grid stops edit mode and I can't be sure which field was being edited since the names/id/class are all the same post edit mode.

Any ideas/suggestions?

7 Answers, 1 is accepted

Sort by
0
Jamie
Top achievements
Rank 1
answered on 29 Oct 2012, 12:19 PM
I've made this to showcase what my goal is: http://jsfiddle.net/H5kmX/7/

It's definitely light weight, but I have been able to confirm after several changes that the e.sender.editable is sometimes null after an alert.   I put two alerts in there to try an up the frequency of failure.

0
Alexander Valchev
Telerik team
answered on 31 Oct 2012, 01:27 PM
Hi Jamie,

I would recommend using the set event of the model. The set event is raised before the field value is updated which is why it is suitable for performing validations.
function edit(e) { //edit event of the grid
    e.model.one("set", function(e) {
        if(!confirm("You entered: " + e.field + " = " + e.value)) {
            e.preventDefault();
        }
    }); 
}

For convenience I updated your example: http://jsfiddle.net/valchev/H5kmX/11/
As an alternative you may consider using custom validation rules.

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jamie
Top achievements
Rank 1
answered on 01 Nov 2012, 01:05 PM
Thank you Alexander, I will try your alternative approach.  One other note is that I've isolated this mainly to Firefox.  IE, Chrome, and Safari appears to handle the alerts without breaking the Kendo grid data. Edit: In Opera editing is completely broken in both of our jsfiddle examples.
0
Jamie
Top achievements
Rank 1
answered on 01 Nov 2012, 06:14 PM
I've added more of my working code to a jsFiddle example and can now duplicate the failure in Firefox using keycode D right away.  Remember use Firefox.
http://jsfiddle.net/Tevyn/Fzrbf/1/

Sometimes I can get it to duplicate on the other alert boxes, but it is consistent with the confirm alert.  IE and Chrome test fine.  Opera is a complete bust as it doesn't work at all (thinking something with the navigable setting).
0
Alexander Valchev
Telerik team
answered on 06 Nov 2012, 10:52 AM
Hi Jamie,

I tested your example in latest version of Firefox (16.0.2) but did not managed to reproduce the JavaScript error. Could you please check the screen cast and let me know what I am missing?

What version of Firefox you use and can you reproduce the same problem in the jsFiddle that I provided in my previous post? Also could you please test your code with latest internal build as it fully supports jQuery 1.8.2?

We are aware of the navigatable problem in Opera - it seems to be caused by erroneous behavior of Opera browser. The change event of input element in Opera is triggered after keydown (and event keypress) finishes. However once the Grid detects Enter/Tab key inside keydown handler it repaints the cell.

We will definitely do our best to provide workaround for this case, however at the moment I am not able to give you concrete timeline when this will be available.
Please accept my apology for the inconvenience caused.

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jamie
Top achievements
Rank 1
answered on 06 Nov 2012, 02:57 PM
I spotted the diffierence.  The problem lies within keyboard navigation.   I am using tab, enter, and arrow keys to navigate away from the KeyCode field, on the video you are using the mouse click (mainly I used tab).  On the Q3 2012 Beta Release it surpresses the error message of d.editor == null, but the problem still remains that it clears out the dirty flag and validation errors making the grid unsavable.  Thanks for your effort, I really appreciate it.
0
Alexander Valchev
Telerik team
answered on 09 Nov 2012, 01:29 PM
Hi Jamie,

I was able to reproduce the error that you mentioned in Firefox but as you can see the it is already fixed in the Q3 beta.

I am still not sure what exactly is the other problem that you described. What do you mean by "validation errors making the grid unsavable"?
The dirty flag is cleared because after the change Grid gets rebound.

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Window
Asked by
Jamie
Top achievements
Rank 1
Answers by
Jamie
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or