We Keep Coding

Accessing the TitleBar close event from a grid button

I am launching a shieldwindow from shield Tree View.
The shieldwindow has a single ‘close’ button on the TitleBar as per code below:
var dbwindow = $("#mapworkpanel").shieldWindow({
width: "60%",
height: "100%",
appendToBody:false,
draggable: false,
position: { left: 700, top: 0 },
title: "Dictionary Definitions",
titleBarButtons: [ 'close' ],
events: {
close: function(e) {
//
}
},
content: {
remote: {
url:thisurl,
iframe: true,
}
},
modal: false,
}).swidget();
The URL launches a shield UI grid with a few buttons including a Close Button.
When I click the “x” button on the Titlebar the form closes with no issues.
How can I access the TitleBar close button from the Close Button on the grid?
I appreciate any suggestions.
Thanks,
Mario

Hopefully I'm understanding your question correctly, but I'm not sure why you need access to the actual title bar's close button. In the case you're just looking to close the window an additional way, there's an API function in the Shield Window widget for that. Assuming your dbwindow reference is available, you should just be able to call dbwindow.close() in the event handler for your grid's close button.

how to give values for jquery ui dialog attributes when we open the dialog?

I have a javascript function, which is opening a jquery dialog:
function new_popup() {
var editor = "victorio"; //want to give
var sex = "male"; //want to give
$("#new-dialog-form").dialog({
autoOpen: false,
height: 700,
width: 800,
modal: true,
title: "New Dialog",
buttons: { //.....buttons whatever.....
},
close: function() {
}
});
$("#new-dialog-form").load('<%=newPopupUrl%>').dialog('open');
}
I want to give the editor and the sex values for the new dialog, which opens the "new_frame.jsp", which has two labels with the IDs:
<label class="form_label" id="editor"/>
<label class="form_label" id="sex"/>
So when we open the new dialog, these 2 labels will be auto completed with the given values.
How can I give the values for the dialog, and how and where can I get and set the given values in the new jsp? Thank you for your helping!

Adding multiple Kendo windows with a text area

I am trying to create a small window with a text area inside every time the click of a button happens. However when I click the button more than once, a new window is created but only the first window contains the text area. Can anyone help?
var noteNumber = 0;
$("#createNoteButton").click(function () {
var noteWindowDivId = "noteWindow" + noteNumber;
$("<div id=noteWindowDivId />").appendTo(document.body).kendoWindow ({
draggable: true, resizable: true, width: "480px",
height: "100px", title: "Note",
scrollable: false,
modal: false, actions: ["Close"]
});
$("#noteWindowDivId").data("kendoWindow").content("<textarea id=noteNumber style='width: 100%; height: 100%'> </textarea>");
noteNumber++;
}
);

Jqueryui dialog "resizeable: false" not working?

Below is my code. When it opens the modal, it IS resizeable even though it's set to false. This is not expected. All other parameters work as expected (height, width, position, draggable, modal).
//MODAL IFRAME POPUP FOR EDITS/adds
$("#modalDiv").dialog({
modal: true,
autoOpen: false,
height: '400',
width: '400',
position: ['150','200'],
draggable: true,
resizeable: false,
title: ''
});
//catch a click on an item with the class "add" open modal div.
$('.add').live('click', function () {
var thing = $(this).attr('add')
url = 'add/' + thing + '.aspx?appid=' + $('.lblAppID').html();
$('#modalIFrame').attr('src', url);
$('#modalDiv').dialog('open');
return false;
});
However, if I call the following code from within the modal iframe, it makes it unresizeable (as expected).
window.parent.$("#modalDiv").dialog("option", "resizable", false);
This works, but preferably I'd like to know what I'm missing... I'm sure it's something stupid. Help?

It's resizable, not resizeable.

You're spelling the word two different ways :-)

Problem with dialog box using Jquery UI

dial and place are the two divisions which exist in the html code that calls the function.
I am able to open up both of them but not able to embed the graph using plot in the 'place' division after it is opening up via the 'Draw' button.
It works fine only when I open both the boxes initially.
function abcd (dial,place,xrange){
var dial = conv(dial)
var xr = document.getElementById("xrange");
var yr = document.getElementById("yrange");
var gtype = document.getElementById("pattern");
xr.value = ""; yr.value = ""; gtype.value = "Line" ;
var place = conv(place);
$(dial).dialog("close");
$(dial).dialog("open");
$(place).dialog({
autoOpen: false,
show: 'Explode',
height: 500,
width: 450,
modal: true})
$(dial).dialog({
autoOpen: false,
show: 'Explode',
height: 300,
width: 350,
modal: false,
buttons :
{ "Draw" : function() {
$((place)).dialog("open");
$(function () {
//manipulate input values to plot data
$.plot(document.getElementById(plac2), [ {data:d1roe,label:"abc"},
{data:d1roa, label:"xyz"} ], {
series: {stack: 0},
xaxis: {ticks: ticks},
ticks: ticks
});
});
//function open(xyz) {$(xyz).dialog("open");}
function conv (myid) {
return ( '#' + myid );
}

I figured out a quick fix for it.
The problem was that the dialog will open but will not be manipulated by flot because it was unable to extract the width and height of the dialog box. So before opening the dialog we can fix the height and width.
Specifying height in the style sheet of html did not work in my case.
$(dial).dialog({
autoOpen: false,
show: 'Explode',
height: 300,
width: 350,
modal: false,
buttons :
{ "Draw" : function() {
$(place).width(500); // can take this as an input as well
$(place).height(500);
$(place).dialog("open");
//ploting code
}})}

The key thing you need for flot to work is for your plac2 div to have a width and height, and be visible (i.e. drawn to the screen). So before you plot, try alerting whether your div has width and height:
var placeholder = document.getElementById(plac2);
alert($(placeholder).width()+','+$(placeholder).height());
//plotting code here
Let us know what happens.