jQWidgets Forums
jQuery UI Widgets › Forums › Dialogs and Notifications › Window › windows closes when you pick a date within a grid
Tagged: datetimeinput, edit, grid, navigationbar, window
This topic contains 8 replies, has 2 voices, and was last updated by spirit 12 years, 8 months ago.
-
Author
-
Hello,
I have a window:
$(‘#patientwindow’).jqxWindow({
isModal: true,
modalOpacity: 0.3,
resizable: false,
draggable: false,
autoOpen: true,
width: $(window).width()-10,
maxWidth: $(window).width()-10,
maxHeight: $(window).width()-10,
minHeight: $(window).height()-10,
minWidth: $(window).width()-10,
height: $(window).height()-10
});inside the window there is a a navigationbar. One of the elements of the navigationabr has a grid which is editable. One column of the grid is a date. When you doubleclick to edit the jqxdatetimeinput shows up as expected, and the calendar pops up to pick a date. The moment you select the date, or even if you click to close the calendar the window disappears. The window has modalOpacity:0.3 so the window disappears but everything remains grey.
Any ideas? I am using jqxgrid 2.4
Thank you in advance!
Hi spirit,
Unfortunately, I am unable to reproduce the reported issue.
Here’s a working sample of the described scenario:
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxnavigationbar.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getTheme(); // prepare the data var data = generatedata(200); var source = { localdata: data, datatype: "array", updaterow: function (rowid, rowdata) { // synchronize with the server - send update command } }; var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, editable: true, theme: theme, selectionmode: 'singlecell', columns: [ { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 }, { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 }, { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 177 }, { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 }, { text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 90, cellsalign: 'right', cellsformat: 'd', validation: function (cell, value) { var year = value.getFullYear(); if (year >= 2013) { return { result: false, message: "Ship Date should be before 1/1/2013" }; } return true; } }, { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput', validation: function (cell, value) { if (value < 0 || value > 150) { return { result: false, message: "Quantity should be in the 0-150 interval" }; } return true; }, initeditor: function (row, cellvalue, editor) { editor.jqxNumberInput({ decimalDigits: 0, digits: 3 }); } }, { text: 'Price', datafield: 'price', width: 65, cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput', validation: function (cell, value) { if (value < 0 || value > 15) { return { result: false, message: "Price should be in the 0-15 interval" }; } return true; }, initeditor: function (row, cellvalue, editor) { editor.jqxNumberInput({ digits: 3 }); } } ] }); $("#jqxNavigationBar").jqxNavigationBar({ width: 800, height: 750, sizeMode: 'fitAvailableHeight', theme: theme }); $("#jqxWidget").jqxWindow({resizable: false, draggable: false, width: 800, height: 800, isModal: true, modalOpacity: 0.3 }); }); </script></head><body class='default'> <div id='jqxWidget'> <div> Title</div> <div> <div id="jqxNavigationBar"> <div> Header 1</div> <div> <div id="jqxgrid"> </div> </div> <div> Header 2</div> <div> <div id="Div1"> </div> </div> </div> </div> </div></body></html>
As I am unable to reproduce your application scenario locally, I would like to ask you to send us a sample(if applicable) which demonstrates it to support@jqwidgets.com.
Best Wishes,
Peter StoevjQWidgets Team
http://www.jqwidgets.comthis function creates the window when you click the button (patientwindow.js):
var patientwindow = function (pid) {
var wintitle = ‘Patient ‘ + pid + ‘‘;
var windiv = ‘\‘ + wintitle + ‘\
\\RNA\
\
\\
\
\
‘;
$(‘body’).append(windiv);
$(‘#patientwindow’).jqxWindow({
isModal: true,
modalOpacity: 0.3,
resizable: false,
draggable: false,
autoOpen: true,
width: $(window).width()-10,
maxWidth: $(window).width()-10,
maxHeight: $(window).width()-10,
minHeight: $(window).height()-10,
minWidth: $(window).width()-10,
height: $(window).height()-10
});$(‘#patientwindow’).bind(‘close’, function (event) {
$(‘#patientwindow’).remove();
});$(“#jqxNavigationBar”).jqxNavigationBar({
width: $(‘#patientwindow’).width,
expandMode: ‘multiple’,
expandedIndexes: [0]
});init_rnagrid(pid);
}
Hi spirit,
Please, see this topic for code formatting: http://www.jqwidgets.com/community/topic/code-formatting in the forum.
Best Wishes,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHello,
Thank you very much for the reply! I am still getting the error and i dont know why. you will find the code attached please let me know if you see any error. I will make 3 posts. one with each of the files.
try2.html
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /><script type="text/javascript" src="../../scripts/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxnavigationbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="patientwindow.js"></script> <script type="text/javascript" src="init_rnagrid.js"></script> <script type="text/javascript"> var theme = ''; $(document).ready(function () { $("#jqxButton").jqxButton({ width: '150', height: '25', roundedCorners: 'top-left' }); $("#jqxButton").bind('click', function () { patientwindow(72880); }); }); </script></head><body class='default'> <div id='testing'> <input type="button" value="Button" id='jqxButton' /> </div> <div class="extrastuff" id="extrastuff"></div> </body></html>
this function creates the window when you click the button (patientwindow.js):
var patientwindow = function (pid) { var wintitle = '<span>Patient ' + pid + '</span>'; var windiv = '<div id="patientwindow"> \ <div id="patientwindowHeader">' + wintitle + '</div>\ <div id="jqxNavigationBar"> \ <div id="patientrnapanel"> \ <div style="margin-left: 4px; float: left;"> RNA </div> \ </div> \ <div id="patientrnacontent"> \ <div id="patientrnagrid"></div> \ </div> \ </div> \ </div>'; $('body').append(windiv); $('#patientwindow').jqxWindow({ isModal: true, modalOpacity: 0.3, resizable: false, draggable: false, autoOpen: true, width: $(window).width()-10, maxWidth: $(window).width()-10, maxHeight: $(window).width()-10, minHeight: $(window).height()-10, minWidth: $(window).width()-10, height: $(window).height()-10 }); $('#patientwindow').bind('close', function (event) { $('#patientwindow').remove(); }); $("#jqxNavigationBar").jqxNavigationBar({ width: $('#patientwindow').width, expandMode: 'multiple', expandedIndexes: [0] }); init_rnagrid(pid);}
this function creates the grid within the window (init_rnagrid.js):
var init_rnagrid = function(pid){ var data = '[{\"rnaid\":\"3959\",\"date_received\":\"2009-06-05\",\"date_processed\":\"2009-06-05\"},\ {\"rnaid\":\"3960\",\"date_received\":\"2009-06-05\",\"date_processed\":\"2009-06-05\"}]'; // prepare the data var patientrnasource = { datatype: "json", datafields: [ { name: 'rnaid'}, { name: 'date_received', type:'date'}, { name: 'date_processed', type:'date'} ], id: 'rnaid', localdata: data }; var rnadataAdapter = new $.jqx.dataAdapter(patientrnasource); $('#patientrnagrid').jqxGrid({ width: $('#patientwindow').width(), source: rnadataAdapter, altrows: true, filterable: false, groupable: false, autoHeight: true, editable: true, selectionmode: 'singlecell', columnsresize: true, columns: [{ text: 'RNA ID', datafield: 'rnaid', editable: false },{ text: 'Date Received', datafield: 'date_received', columntype: 'datetimeinput', cellsformat: 'd' },{ text: 'Date Processed', datafield: 'date_processed', columntype: 'datetimeinput', cellsformat: 'yyyy-MM-dd' }] }); }
Hi spirit,
I tested your code and found out that the issue is in the patientwindow.js. Let me describe what happens:
1. The jqxDateTimeInput and jqxWindow have an event called ‘close’.
2. When the jqxDateTimeInput raises the ‘close’ event, it bubbles up to the document.
3. The jqxWindow is a parent of jqxDateTimeInput and it also receives the ‘close’ event and bubbles it up.
4. The issue is that you handle the ‘close’ event in the patientwindow.js and remove the jqxWindow’s HTML element. However, the event is not raised by the window itself, but by the jqxDateTimeInput.The solution is:
Use the jqxWindow’s closed event.
$('#patientwindow').bind('closed', function (event) { $('#patientwindow').remove();});
Best Wishes,
Peter StoevjQWidgets Team
http://www.jqwidgets.comWow I wouldnt be able to figure this out. Thank you very much, I appreciate your help and I apologize for not knowing how to post the code!
-
AuthorPosts
You must be logged in to reply to this topic.