jqxGrid in jqxWindow in jqxPanel

[NetManParticipant]

Hello,

Trying to display a jqxGrid in a jqxWindow which is within a jqxPanel but the grid never displays within the panel. The modal window is for showing the whole document. The code here has been modified for security and brevity to show the problem. Have tried other sources other than local. Appreciate any advice.

<div id=”customWindowContent” style=”display:none;”>
<table>
**** html ****
</table>
<div id=”jqxGrid”></div>
</div>

<div id=”customWindow”>
<div id=”customWindowHeader”></div>
<div class=”content”></div>
</div>

<div id=”modalWindow”>
<div></div>
<div>
<div style=”height:99%;” class=”content”></div>
</div>
</div>

<div id=”docking”>
<div></div>
</div>

<script language=”javascript” type=”text/javascript”>

$(document).ready(function () {

$(‘#docking’).jqxDocking({ orientation: ‘horizontal’, width: ‘100%’, height: 430, mode: ‘docked’, theme: ‘ui-sunny’ });
$(‘#customWindow’).jqxWindow({ showCloseButton: false, showCollapseButton: true, theme: ‘ui-sunny’, height: 420 });

var data = generatedata(500);
var source = {
localdata: data,
datafields: [{
name: ‘firstname’,
type: ‘string’
}, {
name: ‘lastname’,
type: ‘string’
}, {
name: ‘productname’,
type: ‘string’
}, {
name: ‘date’,
type: ‘date’
}, {
name: ‘quantity’,
type: ‘number’
}, {
name: ‘price’,
type: ‘number’
}],
datatype: “array”
};

var adapter = new $.jqx.dataAdapter(source);
$(“#jqxGrid”).jqxGrid({
width: 800,
theme: ‘ui-sunny’,
source: adapter,
columns: [
{ text: ‘First Name’, datafield: ‘firstname’, columngroup: ‘Name’, width: 90 },
{ text: ‘Last Name’, columngroup: ‘Name’, datafield: ‘lastname’, width: 90 },
{ text: ‘Product’, datafield: ‘productname’, width: 380 },
{ text: ‘Order Date’, datafield: ‘date’, width: 160, cellsformat: ‘dd-MMMM-yyyy’ },
{ text: ‘Quantity’, datafield: ‘quantity’, width: 80, cellsalign: ‘right’ },
{ text: ‘Unit Price’, datafield: ‘price’, cellsalign: ‘right’, cellsformat: ‘c2’ }
]
});

$(‘#customWindow’).jqxWindow(‘setContent’, $(‘#customWindowContent’).html());

$(‘#docking’).jqxDocking(‘addWindow’, ‘customWindow’, ‘default’, 0, 1);

$(‘#modalWindow’).jqxWindow({
height: ‘99%’, width: ‘60%’, resizable: false, isModal: true, draggable: false, position: ‘center, center’, modalOpacity: 0.3,
theme: ‘ui-sunny’, maxHeight: ‘99%’, maxWidth: ‘60%’, autoOpen: false
});

$(‘.content’).jqxPanel({ height: ‘100%’, width: ‘100%’, theme: ‘ui-sunny’ });
$(“#modalWindow .content”).html($(‘#customWindowContent’).html());

});

$(‘#customWindow’).on(‘collapse’, function (event) {
$(‘#modalWindow’).jqxWindow(‘open’);
});

$(‘#modalWindow’).on(‘close’, function (event) {
$(‘#customWindow’).jqxWindow(‘expand’);
$(‘#modalWindow’).hide();
});

</script>

[NetManParticipant]

Never mind, found solution.

Regards,
NetMan

[Author]

Posts