Develop Reference

How to make kendo popup editor AUTO-CLOSE when click outside of the popup window?

I use kendo ui popup editor in this way：
editable: {
mode: "popup",
window: {
actions: [],
title: false,
modal: false,
resizable: false,
animation: false,
clickOutside: true
}
I don`t know if i can make the popup window auto-close through the editable configuration.
I have tried to add autoHide:true, autoClose: true configurations, but it doesn`t work.

I know this is an old question but maybe someone can benefit from this:
$("#btnSave").kendoButton({
click: function (e) {
e.preventDefault();
var dialog = $("#dialog").data("kendoWindow");
dialog.center();
dialog.open();
}
});
$("#dialog").kendoWindow({
width: 225,
height: 70,
modal: true,
visible: false,
title: false,
actions: [],
open: function() {
setTimeout(function () {
$("#dialog").data("kendoWindow").close();
}, 2000);
},
animation: {
open: { effects: "fade:in"},
close: { effects: "fade:out"}
}
});

Just in case any one feel lazy, here is how popup edit window could be closed:
$(document).on('click', function (e) {
//kendo popup edit window selector
var windowCont = $('.k-popup-edit-form.k-window-content');
//if it was first click on kendo grid edit button exit function
//otherwise popup window will be closed immidiatelly
if ($('.k-grid-edit').is(e.target))
return;
//if click was outside popup window, trigger close button
if (!windowCont.is(e.target) && windowCont.has(e.target).length === 0)
windowCont.find('.k-grid-cancel').click();
})

jquery dialog - cannot disable button on open

I want to disable some buttons (with some additional conditions) on jquery dialog show and I am unable to do this. I tried many different ways and none of them worked. I am out of ideas.
Example code attached (in coffeescript):
$('#messages').dialog({
height: 500,
width: 800,
resizable: false,
modal: true,
show: 'fade',
hide: 'clip',
buttons: [
{
id: "msg-close",
text: "Close",
click: ->
$('#msg-close').prop('disabled', true) //this one works
}
],
open: ->
$('#msg-close').prop('disabled', true) //this one doesnt work
});
$('#msg-close').prop('disabled', true) //this one doesnt work

open expects a function like this
open: function () {
$('#msg-close').prop('disabled', true);
}

using jquery dialog multiple times with slightly different parameters

I have a site in which there are alot of confirm pages and need for a dialog window. Im am wondering if there is a better way to write my code so that i dont have to spell out all of the dialog parameters every single time. Each dialog may have 1 thing different. usually the complete button is different function.
for example:
$('#dialogA').dialog(
{
autoOpen:false,
width: 800,
modal: true,
resizable: false,
closeOnEscape: false,
buttons:
{
"Complete": function()
{
//DO SOMETHING FOR A(possible print results of something)
}
}
});
and another
$('#dialogB').dialog(
{
autoOpen:false,
width: 800,
modal: true,
resizable: false,
closeOnEscape: false,
buttons:
{
"Complete": function()
{
//DO SOMETHING FOR B (possibly some ajax call)
}
}
});
so the only thing that changes is what the Complete button does. in laymen's terms i guess is I want to set a variable the contains all the dialog parameters....

Extend jQuery:
(function ($) {
$.fn.extend({
confirmDialog: function (options) {
var defaults = {
autoOpen:false,
width: 800,
modal: true,
resizable: false,
closeOnEscape: false,
buttons:
};
var options = $.extend(defaults, options);
$(this).dialog(options);
}
}
})(jQuery);
and call it like this:
$('#dialogB').dialog({Complete: function() { … }; });
You can also override the defaults when call the dialog...

Maintain scroll position when opening jquery dialog

I am using Jquery UI Dialog to display a popup box
I have a page with a grid on. Each row has an icon to open a dialog box
If there are lots of rows and you need to scroll down and click a row at the bottom, then when the dialog box opens it also scrolls the page to the top again
Is there any way to prevent this happening?
I just want the dialog box to be opened and the scroll position of the page to be maintained
$('#AmendLineDialogBox').dialog({
autoOpen: true,
modal: true,
closeOnEscape: true,
buttons:
{
'Ok': function () {
// ...snip
$(this).dialog("close");
},
'Cancel': function () {
$(this).dialog("close");
}
},
position: 'center',
title: 'Amendment'
});

You can do chaining like this:
$('#AmendLineDialogBox').click(function(e){
e.preventDefault(); //<--------------^-------prevent the default behaviour
}).dialog({
autoOpen: true,
modal: true,
closeOnEscape: true,
buttons:
{
'Ok': function () {
// ...snip
$(this).dialog("close");
},
'Cancel': function () {
$(this).dialog("close");
}
},
position: 'center',
title: 'Amendment'
});

Jquery Dialog..What am I doing wrong?

I am not sure what I am doing wrong. The dialog box comes but it does not follow any of the settings I specified.
function voteToday(id,userid){
$(".pleaseLogin").dialog({
autoOpen:false,
bgiframe: true,
resizable: false,
width:200,
height:75,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
}
});
$(".pleaseLogin").dialog('open');
}

You generate two different dialogs, one doesn't open but has options, one does open but has no options.
If you give more information where you got this dialog from, I could answer how to fix it.
EDIT
I was wrong, but found out that this code works fine. The only option that doesn't seem to work is autoOpen: false, but you open the box after you give that option.
function voteToday(id,userid){
$(".pleaseLogin").dialog('open');
}
$(document).ready(function(){
$(".pleaseLogin").dialog({
autoOpen: false,
bgiframe: true,
resizable: false,
width:500,
height:75,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
}
});
$('.something').click(voteToday);
});

why not use the autoOpen: true setting? seems like the problem stems from calling .dialog() twice. You'll want to create the dialog when the DOM is ready, and then simply call the open method on it within your voteToday function.