I have a JavaScript function that takes input from a combo box and then based on that input should show a certain datatable. I’ve removed the columns on my datatable(s) to make this post a little more manageable.
As you can see on the page load I call viewChange() with a value =1. This should make my accountDatatable show and set the url for the data store. However when I run this nothing happens. It works properly for showing/hiding my toolbars.
Any help would be very much appreciated.
<body onload="viewChange(1);">
<div id="grid" style="width: 100%; height: 100%;">
<script type="text/javascript" charset="utf-8">
function viewChange(value){
if (value == 8){
$$("devicesToolbar").show();
$$("accountsToolbar").hide();
$$("deviceDatatable").define("url", "inc/template.php?list=device_list");
$$("accountDatatable").hide();
$$("deviceDatatable").show();
}
else if (value == 1) {
$$("devicesToolbar").hide();
$$("accountsToolbar").show();
$$("accountDatatable").define("url", "inc/template.php?list=all_accounts");
$$("deviceDatatable").hide();
$$("accountDatatable").show();
}
else {
webix.message("Value was changed "+value);
}
};
webix.ui({
container:"grid",
rows:[
{
view:"toolbar",
id:"comboToolbar",
hidden: false,
//These are the columns for my toolbar.
cols:[
//This is the combobox on the toolbar
{view:"combo", id:'account_view', label: 'Select View', labelWidth:85, width:250,
value:1,
on:{ "onChange":function(value){viewChange(value);}},
options:[]},
]
},
{
view:"toolbar",
id:"accountsToolbar",
hidden: true,
//These are the columns for my toolbar.
cols:[ ]
},
{
view:"toolbar",
id:"devicesToolbar",
hidden: true,
//These are the columns for my toolbar.
cols:[]
},
{
view:"datatable",
id: "accountDatatable",
select:"row",
hidden: true,
scrollY: true,
scrollX: true,
columns:[],
},
{
view:"datatable",
id: "deviceDatatable",
select:"row",
hidden: true,
scrollY: true,
scrollX: true,
columns:[],
}
]
});