grid in jqxwindow
bug Get grid's height
by mogador
HTML
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<button id="bt_changeHeader">change columns header in main window</button>
<button id="bt_window">change columns header in dialog window</button>
<br><br>
<div id="jqxgrid"></div>
<br>
<div id="window">
<div id="windowHeader">Title
</div>
<div id="windowContent">
<div id="jqxgrid_window"></div>
</div>
</div>
JavaScript
$('#window').jqxWindow({
autoOpen: false,
height: 300,
width: 500,
});
$('#bt_window').click(function() {;
$('#window').jqxWindow('open');
$('#jqxgrid_window').jqxGrid('setcolumnproperty', 'firstname', 'text', 'foo');
$('#jqxgrid_window').jqxGrid('setcolumnproperty', 'lastname', 'text', 'bar');
});
$('#bt_changeHeader').click(function() {
$('#jqxgrid').jqxGrid('setcolumnproperty', 'firstname', 'text', 'foo');
$('#jqxgrid').jqxGrid('setcolumnproperty', 'lastname', 'text', 'bar');
});
var data2 = generatedata(2);
var source2 = {
localdata: data2,
datafields: [{
name: 'firstname',
type: 'string'
}, {
name: 'lastname',
type: 'string'
}],
datatype: "array"
};
var adapter2 = new $.jqx.dataAdapter(source2);
$("#jqxgrid").jqxGrid({
width: 200,
theme: 'energyblue',
autoheight: true,
source: adapter2,
sortable: true,
columns: [{
text: 'First Name',
datafield: 'firstname',
width: 90
}, {
text: 'Last Name',
datafield: 'lastname',
width: 90
}]
});
var data50 = generatedata(3);
var source50 = {
localdata: data50,
datafields: [{
name: 'firstname',
type: 'string'
}, {
name: 'lastname',
type: 'string'
}],
datatype: "array"
};
var adapter50 = new $.jqx.dataAdapter(source50);
$("#jqxgrid_window").jqxGrid({
width: 200,
theme: 'energyblue',
autoheight: true,
source: adapter50,
sortable: true,
columns: [{
text: 'First Name',
datafield: 'firstname',
width: 90
}, {
text: 'Last Name',
datafield: 'lastname',
width: 90
}]
});