Window Popup

[GaryParticipant]

I’m not getting the result I would expect when formatting my edit popup window with the following controls:

jqxDateTimeInput

jqxNumberInput

JqxComboBox

Following is the code I have used to set control definitions. No calendar icon, no spin buttons, no drop downlist.

$(“#TransDate”).jqxDateTimeInput({ width: ‘205px’, height: ’25px’, formatString: ‘d’, showCalendarButton: true, theme: theme });

$(#AcctName”).addClass(‘jqx-input’);

$(“#AcctName”).addClass(‘jqx-rc-all’);

$(“#Payment”).addClass(‘jqx-input’);

$(“#AcctName”).jqxInput({ width: ‘205px’, height: ’25px’});

$(“#Num”).jqxInput({ height: ’25px’, width: ‘205px’, theme: theme });

$(“#Description”).jqxInput({ height: ’25px’, width: ‘205px’, theme: theme });

$(“#CategoryName”).jqxComboBox({ source: droplistSource, height: ’25px’, width: ‘205px’, theme: theme });

$(“#Memo”).jqxInput({ height: ’25px’, width: ‘205px’, theme: theme });

$(“Tag”).jqxInput({ height: ’25px’, width: ‘205px’, theme: theme });

$(“#Status”).jqxInput({ height: ’25px’, width: ‘205px’, theme: theme });

$(“#Payment”).jqxNumberInput({ height: ’25px’, width: ‘205px’, inputMode: ‘simple’, symbol: “$”, min: 0, spinButtons: true });

$(“#Deposit”).jqxNumberInput({ height: ’25px’, width: ‘205px’, inputMode: ‘simple’, symbol: “$”, min: 0, theme: theme, spinButtons: true });

if (theme.length > 0) {

$(“#AcctName”).addClass(‘jqx-input-‘ + theme);

$(“#AcctName”).addClass(‘jqx-rc-all-‘ + theme);

$(“#Payment”).addClass(‘jqx-input-‘ + theme);

};

Thanks,

Gary

[Peter StoevKeymaster]

Hi Gary,

Do you initialize these in the way demonstrated in jqxWindow’s samples i.e in the iniContent callback of jqxWindow?

For more information visit: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxwindow/defaultfunctionality.htm?classic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[GaryParticipant]

Hello Peter,

I had not followed the initContent, however when I added in context of the sample still no change. I’m sure it is something I’m missing.

Below in the function I call for the creation of the Popup window for edit.

// ***************************
// handle context menu clicks.
// ***************************

$(“#contextmenu”).on(‘itemclick’, function (event) {

var args = event.args;

var rowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);

if ($.trim($(args).text()) == “Edit Selected Row”) {

editrow = rowindex;

var offset = $(“#jqxgrid”).offset();

$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 450, y: parseInt(offset.top) + 120 } });
$(“#popupWindow”).jqxWindow({ width: ‘370px’, height: ‘400px’, cancelButton: $(“#Cancel”), });
$(“#popupWindow”).jqxWindow({ theme: theme, resizable: false, isModal: true, modalOpacity: 0.3, title: ‘Transaction Edit’,});
$(“#popupWindow”).jqxWindow({ initContent: function() {

$(“#TransDate”).jqxDateTimeInput({ width: ‘205px’, height: ’25px’, formatString: ‘d’, showCalendarButton: true, theme: theme });
$(“#AcctName”).addClass(‘jqx-input’);
$(“#AcctName”).addClass(‘jqx-rc-all’);
$(“#Payment”).addClass(‘jqx-input’);
$(“#AcctName”).jqxInput({ width: ‘205px’, height: ’25px’ });
$(“#Num”).jqxInput({ height: ’25px’, width: ‘205px’, theme: theme });
$(“#Description”).jqxInput({ height: ’25px’, width: ‘205px’, theme: theme });
$(“#CategoryName”).jqxComboBox({ source: droplistSource, height: ’25px’, width: ‘205px’, theme: theme });
$(“#Memo”).jqxInput({ height: ’25px’, width: ‘205px’, theme: theme });
$(“#Tag”).jqxInput({ height: ’25px’, width: ‘205px’, theme: theme });
$(“#Status”).jqxInput({ height: ’25px’, width: ‘205px’, theme: theme });
$(“#Payment”).jqxNumberInput({ height: ’25px’, width: ‘205px’, inputMode: ‘simple’, symbol: “$”, min: 0, spinButtons: true });
$(“#Deposit”).jqxNumberInput({ height: ’25px’, width: ‘205px’, inputMode: ‘simple’, symbol: “$”, min: 0, theme: theme, spinButtons: true });

if (theme.length > 0) {
$(“#AcctName”).addClass(‘jqx-input-‘ + theme);
$(“#AcctName”).addClass(‘jqx-rc-all-‘ + theme);
$(“#Payment”).addClass(‘jqx-input-‘ + theme);

};

}
});

$(“#Cancel”).jqxButton({ theme: theme });
$(“#Save”).jqxButton({ theme: theme });

// get the clicked row’s data and initialize the input fields.

var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);

$(“#TransactionID”).val(dataRecord.TransactionID);

var year = dataRecord.TransDate.getFullYear();
var day = dataRecord.TransDate.getDate();
var month = dataRecord.TransDate.getMonth() + 1;

$(“#TransDate”).val(month + ‘/’ + day + ‘/’ + year);

//$(“#TransDate”).val(dataRecord.TransDate);

$(“#AcctName”).val(dataRecord.AcctName);

$(“#Num”).val(dataRecord.Num);

$(“#Description”).val(dataRecord.Description);

$(“#CategoryName”).val(dataRecord.CategoryName);

$(“#Memo”).val(dataRecord.Memo);

$(“#Tag”).val(dataRecord.Tag);

$(“#Status”).val(dataRecord.Status);

$(“#Payment”).val(dataRecord.Payment);

$(“#Deposit”).val(dataRecord.Deposit);

// show the popup window.

$(“#popupWindow”).jqxWindow(‘show’);
$(“#popupWindow”).jqxWindow(‘focus’);

}

else {

var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowid = selectedrowindex;
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
var commit = $("#jqxgrid").jqxGrid('deleterow', id);
getaggregatedData();
}

}
});

[Peter StoevKeymaster]

Hi Gary,

As I see from your code, you try to use the Window with jqxGrid. Here’s a sample with jQWidgets 2.8, which demonstrates that: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/popupediting.htm?classic.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[GaryParticipant]

Hello Peter,

My problem was I had my HTML using in the row definition. I changed to

and everything is working as I would expect.

Thanks,
Gary

[Author]

Posts