If I put a datatable on a page and a pager and assign them to two divs everything works beautifully like so:
The code is as follows:
<div id='commercial'></div>
<div id="page_section"></div>
<script type="text/javascript" charset="utf-8">
webix.ready(function(){
grida = webix.ui({
container:"commercial",
view:"datatable",
editable: true,
navigation: true,
pager: {
template:"{common.prev()} {common.pages()} {common.next()}",
container: "page_section",
size: 15,
group: 5
},
columns:[
{ id:"PKey", header:"", hidden:true},
{ id:"SiteName", header:"Site", width:250},
{ id:"PercentageChange",header:"% Change", width:100, editor: "text"},
{ id:"kWChange", header:"kW Change", width:100, editor: "text"}
],
autoheight:true,
autowidth:true,
select:"row",
save: "data/gasforecastdata_save.php",
url: "data/gasforecastdata.php"
});
});
</script>
But if I add header in the layout like so:
<div id='commercial'></div>
<div id="page_section"></div>
<script type="text/javascript" charset="utf-8">
webix.ready(function(){
grida = webix.ui({
rows: [
{type:"header", template:"Manual Edit"},
{container:"commercial",
view:"datatable",
editable: true,
navigation: true,
pager: {
template:"{common.prev()} {common.pages()} {common.next()}",
container: "page_section",
size: 15,
group: 5
},
columns:[
{ id:"PKey", header:"", hidden:true},
{ id:"SiteName", header:"Site", width:250},
{ id:"PercentageChange",header:"% Change", width:100, editor: "text"},
{ id:"kWChange", header:"kW Change", width:100, editor: "text"}
],
autoheight:true,
autowidth:true,
select:"row",
save: "data/gasforecastdata_save.php",
url: "data/gasforecastdata.php"}]
});
});
</script>
The pager appears at the top: http://imgur.com/2zThSRs
I tried adding another div and setting the container property of the header but this made no difference. Any ideas?
p.s. loving the framework!