jQWidgets Forums
jQuery UI Widgets › Forums › Layouts › Splitter › layout property inside splitbar changes after collapsed
Tagged: jqxsplitter, splitter
This topic contains 6 replies, has 2 voices, and was last updated by teguh 12 years, 4 months ago.
-
Author
-
I created window popup that called from a splitter (right side of splitter). There is tab widget inside window widget and also second splitter widget inside this tab widget.
Inside this second splitter widget, i put listbox in left side and grid in right side. Grid content appear when we click listbox item.
On first loading, window popup, especially second splitter widget can function properly. But after i collapsed splitbar on first splitter, the window popup still function properly except the grid widget on second splitter disappear.
I debug the html code with firebug, and below is part of the result ::: code before splitter collapsed
div tag class=”jqx-splitter-panel-wrapper jqx-splitter-panel-wrapper-” style=”height: 100%;width: 100%”
div tag class=”jqx-splitter-panel jqx-widget-content jqx-splitter-panel- jqx-widget-content-” style=”width: 150px;float: left;height: 100%”
div tag class=”jqx-splitter-splitbar-vertical jqx-fill-state-normal jqx-splitter-splitbar-vertical- jqx-fill-state-normal-” style=”height: 300px;float: left;width: 5px”
div tag class=”jqx-splitter-panel jqx-widget-content jqx-splitter-panel- jqx-widget-content-” style=”width: 623px;float: left;height: 100%”>:: code after splitter collapsed
div tag class=”jqx-splitter-panel-wrapper jqx-splitter-panel-wrapper- jqx-splitter-panel-wrapper–” style=”height: 100%;width: 100%”
div tag class=”jqx-splitter-panel jqx-widget-content jqx-splitter-panel- jqx-widget-content- jqx-splitter-panel– jqx-widget-content–” style=”width: 150px;float: left;height: 100%”
div tag class=”jqx-splitter-splitbar-vertical jqx-fill-state-normal jqx-splitter-splitbar-vertical- jqx-fill-state-normal- jqx-splitter-splitbar-vertical– jqx-fill-state-normal–” style=”height: 300px;float: left;width: 5px”
div tag class=”jqx-splitter-panel jqx-widget-content jqx-splitter-panel- jqx-widget-content- jqx-splitter-panel– jqx-widget-content–” style=”width: 0px;float: left;height: 100%”the difference between two code is :
style=”width: 623px; float: left; height: 100%;”VS
style=”width: 0px; float: left; height: 100%;”
I change this width manually from firebug to test and succesed.
Anyone have idea to solve this problem? thank’s.Hello teguh,
Please provide us with a code sample so that we may be able to determine the source of the issue.
On a side note, please format your code before posting it using the { } button.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/below is part of my code :
#createWindow { display: none; }
#listBoxContent { display: none; }
#listBoxContent1 { display: none; }var customDemo = (function() {
function _addEventListeners() {
$(‘#jqxTree’).bind(‘select’, function (event) {
var args = event.args;
var item = $(‘#jqxTree’).jqxTree(‘getItem’, args.element);
var leveldB = [ “”,”Root”,”Komplek”,”Building”,”Floor”,”Zones”,”Spaces”,”Room” ];
$(‘#jqxgrid1’).hide();
$(‘#jqxgrid2’).hide();
$(‘#jqxgrid’).show();
_displayGrid(item.value,leveldB[item.level+1]);
$(“#jqxgrid”).jqxGrid(‘render’);
});$(‘#bkkIutilListrik’).click(function(){
$(‘#jqxgrid’).hide();
$(‘#jqxgrid1’).hide();
$(‘#jqxgrid2’).show();
$(‘#jqxgrid3’).hide();
_getBuktiKasI()
$(“#jqxgrid2”).jqxGrid(‘render’);
});
$(‘#bkkIIutilListrik’).click(function(){
$(‘#jqxgrid’).hide();
$(‘#jqxgrid1’).hide();
$(‘#jqxgrid2’).hide();
$(‘#jqxgrid3’).show();
_getBuktiKasII()
$(“#jqxgrid3”).jqxGrid(‘render’);
});$(‘#createWindow’).on(‘open’, function (event) {
_initTabWidget();
$(‘#GraphicsPopupTab’).jqxTabs(‘select’, 0);
$(‘#listbox’).jqxListBox(‘selectIndex’, 0);
});$(‘#splitter’).on(‘expanded’, function (event) {
$(‘#listBoxContent’).jqxGrid(‘refresh’);
});$(‘#splitter’).on(‘collapsed’, function (event) {
$(‘#listBoxContent’).jqxGrid(‘refresh’);
});$(“#listbox”).bind(‘select’, function(event){
var args = event.args;
var item = $(“#listbox”).jqxListBox(‘getItem’, args.index);
if(item != null){
if(item.label == ‘Account PLN’){
$(‘#listBoxContent1’).hide();
$(‘#listBoxContent’).show();
initGrid()
}
if(item.label == ‘kWHmeter’){
$(‘#listBoxContent1’).hide();
$(‘#listBoxContent’).show();
initGrid()
}
if(item.label == ‘Bukti Kas’){
$(‘#listBoxContent1’).hide();
$(‘#listBoxContent’).show();
initGrid();
}
}
});$(‘#GraphicsPopupTab’).on(‘tabclick’, function (event) {
var clickedItem = event.args.item;
if(clickedItem == ‘3’){
$(‘#listbox’).jqxListBox(‘clearSelection’);
$(‘#listBoxContent’).hide();
}
});_inputAreaEventHandlers();
_inputAreaBuktiKasEventHandlers();
};var _initTabWidget = function(tab){
if(tab == ‘3’){
var tinggiTab = $(‘#GraphicsPopupTab’).height();
var lebarTab = $(‘#GraphicsPopupTab’).width();
tinggiTab = tinggiTab – 50;
$(“#splitterTab”).jqxSplitter({ theme: customDemo.config.theme, width: ‘99%’, height: tinggiTab, splitBarSize: 5, panels: [{ min: 150, size: 150, collapsible: false, collapsed: false }, { collapsible: false, collapsed: false }] });
var listBoxItem = [“Account PLN”,”kWHmeter”,”Bukti Kas”];
$(‘#listbox’).jqxListBox({ source: listBoxItem, theme: customDemo.config.theme, width: ‘100%’, height: tinggiTab });
$(‘#listbox’).jqxListBox(‘clearSelection’);
};
}var initGrid = function () {
var source =
{
datatype: “csv”,
datafields: [
{ name: ‘Date’ },
{ name: ‘S&P 500’ },
{ name: ‘NASDAQ’ }
],
url: ‘nasdaq_vs_sp500_2.txt’
};
var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });
$(“#listBoxContent”).jqxGrid(
{
width: ‘100%’,
height: ‘100%’,
showtoolbar: true,
showstatusbar: true,
statusbarheight: 39,
source: dataAdapter,
theme: customDemo.config.theme,
scrollmode: ‘logical’,
columns: [
{ text: ‘Date’, datafield: ‘Date’, cellsformat: ‘d’ },
{ text: ‘S&P 500’, datafield: ‘S&P 500’ },
{ text: ‘NASDAQ’, datafield: ‘NASDAQ’ }
],
rendertoolbar: function (toolbar) {
var me = this;
var container = $(““);
var tambah = $(““);
var hapus = $(““);
toolbar.append(container);
container.append(hapus);
container.append(tambah);tambah.bind(‘click’,function(){
});
hapus.bind(‘click’,function(){});
}
});
}function _displayGrid(value,level) {
var source =
{
datatype: “json”,
datafields: [ { name: ‘no’ }, { name: ‘id’}, { name: ‘name’}, { name: ‘description’} ],
url: ‘remote.cfc?method=getKomplek’,
data: { categoryLabel: value, categoryLevel: level },
addrow: function (rowid, rowdata, position, commit) {
alert(rowdata[‘table’] + ‘\r\n’ + rowdata[‘table_record’] + ‘\r\n’ + rowdata[‘name’] + ‘\r\n’ + rowdata[‘description’] + ‘\r\n’ + rowdata[‘country’] + ‘\r\n’ + rowdata[‘province’]);
commit(true);
},
deleterow: function (rowid, commit) { commit(true); },
updaterow: function (rowid, newdata, commit) { commit(true); }
};var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true });
dataAdapter.dataBind();$(“#jqxgrid”).jqxGrid(
{
width: ‘100%’,
height: ‘100%’,
source: dataAdapter,
theme: customDemo.config.theme,
selectionmode: ‘singlerow’,
sortable: true,
columnsresize: true,
pagerheight: 40,
editable: false,
showtoolbar: true,
showstatusbar: true,
columns: [
{ text: ‘No’, datafield: ‘no’, width: 40, cellsalign: ‘right’ },
{ text: ‘Name’, datafield: ‘name’ },
{ text: ‘Description’, datafield: ‘description’ }
],
rendertoolbar: function (toolbar) {
var me = this;
var container = $(““);
var addSpan = $(““);
var editSpan = $(““);
var trashSpan = $(““);
var tripNumberInput = $(“”);
toolbar.append(container);
container.append(addSpan);
container.append(editSpan);
container.append(trashSpan);var offset = $(“#jqxgrid”).offset();
addSpan.bind(‘click’,function(){
$(‘#GraphicsPopupTab’).jqxTabs(‘select’, 0);
$(‘#listBoxContent’).jqxGrid(‘updatebounddata’);
var item = $(‘#jqxTree’).jqxTree(‘getSelectedItem’);
var leveldB = [ “Root”,”Komplek”,”Gedung”,”Lantai”,”Zones”,”Spaces”,”Room” ];
var row = {};$(“#createWindow”).jqxWindow({
position: { x: parseInt(offset.left) + 10, y: parseInt(offset.top) + 10},
title: ‘Tambah Record ‘ + leveldB[item.level+1] + ‘ untuk ‘ + leveldB[item.level] + ‘ : ‘ + item.label,
width: 800,
theme: customDemo.config.theme,
isModal: true,
modalOpacity: 0.01,
autoOpen: false,
okButton: $(‘#PSave’),
cancelButton: $(‘#PCancel’),
initContent: function(){
$(‘#GraphicsPopupTab’).jqxTabs({ initTabContent: _initTabWidget });
$(‘#GraphicsPopupTab’).jqxTabs(‘select’, -1);
$(‘#listbox’).jqxListBox(‘selectIndex’, 0);
$(‘#GraphicsPopupTab’).jqxTabs({ width: ‘100%’ });
}
});$(“#createWindow”).jqxWindow(‘open’);
});editSpan.bind(‘click’,function() {
$(‘#GraphicsPopupTab’).jqxTabs(‘select’, 0);
$(‘#listBoxContent’).jqxGrid(‘refresh’);
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
if (selectedrowindex == -1) {
alert(‘Pilih record terlebih dahulu!’);
}
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var idrow = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
}
var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', selectedrowindex);
var dataState = $("#jqxgrid").jqxGrid('getstate');
var item = $('#jqxTree').jqxTree('getSelectedItem');
var leveldB = [ "","Root","Komplek","Gedung","Lantai","Zones","Spaces","Room" ];
var idrecord = $().val(dataRecord.id);$("#createWindow").jqxWindow({
position: { x: parseInt(offset.left) + 10, y: parseInt(offset.top) + 10},
title: 'Edit ' + leveldB[item.level+2] +' untuk ' + leveldB[item.level+1] + ' : ' + item.label,
width: 800,
theme: customDemo.config.theme,
isModal: true,
modalOpacity: 0.01,
autoOpen: false,
okButton: $('#PUpdate'),
cancelButton: $('#PCancel'),
initContent: function(){
$('#GraphicsPopupTab').jqxTabs({ initTabContent: _initTabWidget });
$('#GraphicsPopupTab').jqxTabs({ width: '100%' });
}
});$("#createWindow").jqxWindow('open');
});trashSpan.bind('click',function(){
// code for delete item
});
}
});
};function _createElements() {
var tinggi = screen.availHeight – 230;
var lebar = screen.availWidth – 310;
var availTinggi = screen.availHeight – 225;
var dataTree =
{
datatype: "json",
datafields: [ { name: 'id' },{ name: 'text' },{ name: 'parentid' },{ name: 'value' } ],
id: 'id',
url: 'remote.cfc?method=getMenuKomplek'
}
var dataAdapter = new $.jqx.dataAdapter(dataTree, { async: false, autoBind: true });
dataAdapter.dataBind();
var theme = getTheme();
var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'value', map: 'value'},{name: 'text', map: 'label'}]);
$('#jqxTree').jqxTree({ source: records, theme: theme, height: '100%', width: '100%' });
$("#splitter").jqxSplitter({ theme: theme, width: '100%', height: availTinggi, panels: [{ size: 250}] });
$("#jqxMenu").jqxMenu({ width: '100%', height: 30 });
$("#jqxdatetime").jqxDateTimeInput({ width: '250px', height: '25px', theme: theme });
$('#GraphicsPopupTab').jqxTabs({ width: '100%' });
};return {
config: { theme: null },
init: function() {
_createElements();
_addEventListeners();
_initAddWindow();
}
};
}());$(document).ready(function () {
customDemo.config.theme = getTheme();
customDemo.init();
});CreateHi teguh,
Please format your code as explained in the topic Code Formatting.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/I’m sorry Dimitar,
I’ve a screenshot of window popup before splitbar collapsed at
https://docs.google.com/drawings/d/1rHSAYvsODZ7CBZ642FthWQnsdmOFVh_Z1DtP_RkjUVE/edit?pli=1and below is part of my code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Corporate Facility Management Information System</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" media="screen" href="../common/css/jquery-ui-1.8.21.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="../common/js/jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="../common/jquery/jquery-1.7.2.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxgrid.grouping.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxgrid.aggregates.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxexpander.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxsplitter.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/jqxdocking.js"></script> <script type="text/javascript" src="../common/js/jqwidgets/globalization/jquery.global.js"></script> <script type="text/javascript" src="../common/js/gettheme.js"></script> <style type="text/css" title="currentStyle"> #createWindow { display: none; } #buktiKKIWindow { display: none; } #testWindow { display: none; } #jqxdatetime { display: none; } #listBoxContent { display: none; } #listBoxContent1 { display: none; } </style> <script type="text/javascript"> var customDemo = (function() { function _addEventListeners() { $('#jqxTree').bind('select', function (event) { var args = event.args; var item = $('#jqxTree').jqxTree('getItem', args.element); var leveldB = [ "","Root","Komplek","Building","Floor","Zones","Spaces","Room" ]; $('#jqxgrid1').hide(); $('#jqxgrid2').hide(); $('#jqxgrid').show(); _displayGrid(item.value,leveldB[item.level+1]); $("#jqxgrid").jqxGrid('render'); }); $('#bkkIutilListrik').click(function(){ $('#jqxgrid').hide(); $('#jqxgrid1').hide(); $('#jqxgrid2').show(); $('#jqxgrid3').hide(); _getBuktiKasI() $("#jqxgrid2").jqxGrid('render'); }); $('#bkkIIutilListrik').click(function(){ $('#jqxgrid').hide(); $('#jqxgrid1').hide(); $('#jqxgrid2').hide(); $('#jqxgrid3').show(); _getBuktiKasII() $("#jqxgrid3").jqxGrid('render'); }); $('#createWindow').on('open', function (event) { _initTabWidget(); $('#GraphicsPopupTab').jqxTabs('select', 0); $('#listbox').jqxListBox('selectIndex', 0); }); $('#splitter').on('expanded', function (event) { $('#listBoxContent').jqxGrid('refresh'); }); $('#splitter').on('collapsed', function (event) { $('#listBoxContent').jqxGrid('refresh'); }); $("#listbox").bind('select', function(event){ var args = event.args; var item = $("#listbox").jqxListBox('getItem', args.index); if(item != null){ if(item.label == 'Account PLN'){ $('#listBoxContent1').hide(); $('#listBoxContent').show(); initGrid() } if(item.label == 'kWHmeter'){ $('#listBoxContent1').hide(); $('#listBoxContent').show(); initGrid() } if(item.label == 'Bukti Kas'){ $('#listBoxContent1').hide(); $('#listBoxContent').show(); initGrid(); } } }); $('#GraphicsPopupTab').on('tabclick', function (event) { var clickedItem = event.args.item; if(clickedItem == '3'){ $('#listbox').jqxListBox('clearSelection'); $('#listBoxContent').hide(); } }); _inputAreaEventHandlers(); _inputAreaBuktiKasEventHandlers(); }; var _initTabWidget = function(tab){ if(tab == '3'){ var tinggiTab = $('#GraphicsPopupTab').height(); var lebarTab = $('#GraphicsPopupTab').width(); tinggiTab = tinggiTab - 50; $("#splitterTab").jqxSplitter({ theme: customDemo.config.theme, width: '99%', height: tinggiTab, splitBarSize: 5, panels: [{ min: 150, size: 150, collapsible: false, collapsed: false }, { collapsible: false, collapsed: false }] }); var listBoxItem = ["Account PLN","kWHmeter","Bukti Kas"]; $('#listbox').jqxListBox({ source: listBoxItem, theme: customDemo.config.theme, width: '100%', height: tinggiTab }); $('#listbox').jqxListBox('clearSelection'); }; } var initGrid = function () { var source = { datatype: "csv", datafields: [ { name: 'Date' }, { name: 'S&P 500' }, { name: 'NASDAQ' } ], url: 'nasdaq_vs_sp500_2.txt' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); $("#listBoxContent").jqxGrid( { width: '100%', height: '100%', showtoolbar: true, showstatusbar: true, statusbarheight: 39, source: dataAdapter, theme: customDemo.config.theme, scrollmode: 'logical', columns: [ { text: 'Date', datafield: 'Date', cellsformat: 'd' }, { text: 'S&P 500', datafield: 'S&P 500' }, { text: 'NASDAQ', datafield: 'NASDAQ' } ], rendertoolbar: function (toolbar) { var me = this; var container = $("<div style='margin:5px;'></div>"); var tambah = $("<a href='#'><input class='jqx-button jqx-widget-content jqx-rc-all' type='button' value='Add' id='addButton' style='height: 23px; float: right; margin-right: 5px; width: 80px;' /></a>"); var hapus = $("<a href='#'><input class='jqx-button jqx-widget-content jqx-rc-all' type='button' value='Remove' id='removeButton' style='height: 23px; float: right; margin-right: 5px; width: 80px;' /></a>"); toolbar.append(container); container.append(hapus); container.append(tambah); tambah.bind('click',function(){ }); hapus.bind('click',function(){ }); } }); } function _displayGrid(value,level) { var source = { datatype: "json", datafields: [ { name: 'no' }, { name: 'id'}, { name: 'name'}, { name: 'description'} ], url: 'remote.cfc?method=getKomplek', data: { categoryLabel: value, categoryLevel: level }, addrow: function (rowid, rowdata, position, commit) { alert(rowdata['table'] + '\r\n' + rowdata['table_record'] + '\r\n' + rowdata['name'] + '\r\n' + rowdata['description'] + '\r\n' + rowdata['country'] + '\r\n' + rowdata['province']); commit(true); }, deleterow: function (rowid, commit) { commit(true); }, updaterow: function (rowid, newdata, commit) { commit(true); } }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true }); dataAdapter.dataBind(); $("#jqxgrid").jqxGrid( { width: '100%', height: '100%', source: dataAdapter, theme: customDemo.config.theme, selectionmode: 'singlerow', sortable: true, columnsresize: true, pagerheight: 40, editable: false, showtoolbar: true, showstatusbar: true, columns: [ { text: 'No', datafield: 'no', width: 40, cellsalign: 'right' }, { text: 'Name', datafield: 'name' }, { text: 'Description', datafield: 'description' } ], rendertoolbar: function (toolbar) { var me = this; var container = $("<div style='margin:4px;'></div>"); var addSpan = $("<a href='#' title='Add' id='addRecord'><span class='ui-icon ui-icon-plus' style='display:inline-block;float: left; margin-top: 0px; margin-left: 10px;'></span></a>"); var editSpan = $("<a href='#' id='editRecord' title='Edit'><span class='ui-icon ui-icon-pencil' style='display:inline-block;float: left; margin-top: 0px; margin-left: 10px;'></span></a>"); var trashSpan = $("<a href='#' id='delRecord' title='Delete'><span class='ui-icon ui-icon-trash' style='display:inline-block;float: left; margin-top: 0px; margin-left: 10px;'></span></a>"); var tripNumberInput = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchTripNumber' type='text' style='height: 23px; float: right; width: 79px;margin-top: 1px;margin-left:145px;' />"); toolbar.append(container); container.append(addSpan); container.append(editSpan); container.append(trashSpan); var offset = $("#jqxgrid").offset(); addSpan.bind('click',function(){ $('#GraphicsPopupTab').jqxTabs('select', 0); $('#listBoxContent').jqxGrid('updatebounddata'); var item = $('#jqxTree').jqxTree('getSelectedItem'); var leveldB = [ "Root","Komplek","Gedung","Lantai","Zones","Spaces","Room" ]; var row = {}; $("#createWindow").jqxWindow({ position: { x: parseInt(offset.left) + 10, y: parseInt(offset.top) + 10}, title: 'Tambah Record ' + leveldB[item.level+1] + ' untuk ' + leveldB[item.level] + ' : ' + item.label, width: 800, theme: customDemo.config.theme, isModal: true, modalOpacity: 0.01, autoOpen: false, okButton: $('#PSave'), cancelButton: $('#PCancel'), initContent: function(){ $('#GraphicsPopupTab').jqxTabs({ initTabContent: _initTabWidget }); $('#GraphicsPopupTab').jqxTabs('select', -1); $('#listbox').jqxListBox('selectIndex', 0); $('#GraphicsPopupTab').jqxTabs({ width: '100%' }); } }); $("#createWindow").jqxWindow('open'); }); editSpan.bind('click',function() { $('#GraphicsPopupTab').jqxTabs('select', 0); $('#listBoxContent').jqxGrid('refresh'); var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex'); if (selectedrowindex == -1) { alert('Pilih record terlebih dahulu!'); } var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount; if (selectedrowindex >= 0 && selectedrowindex < rowscount) { var idrow = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex); } var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', selectedrowindex); var dataState = $("#jqxgrid").jqxGrid('getstate'); var item = $('#jqxTree').jqxTree('getSelectedItem'); var leveldB = [ "","Root","Komplek","Gedung","Lantai","Zones","Spaces","Room" ]; var idrecord = $().val(dataRecord.id); $("#createWindow").jqxWindow({ position: { x: parseInt(offset.left) + 10, y: parseInt(offset.top) + 10}, title: 'Edit ' + leveldB[item.level+2] +' untuk ' + leveldB[item.level+1] + ' : ' + item.label, width: 800, theme: customDemo.config.theme, isModal: true, modalOpacity: 0.01, autoOpen: false, okButton: $('#PUpdate'), cancelButton: $('#PCancel'), initContent: function(){ $('#GraphicsPopupTab').jqxTabs({ initTabContent: _initTabWidget }); $('#GraphicsPopupTab').jqxTabs({ width: '100%' }); } }); $("#createWindow").jqxWindow('open'); }); trashSpan.bind('click',function(){ // code for delete item }); } }); }; function _createElements() { var tinggi = screen.availHeight - 230; var lebar = screen.availWidth - 310; var availTinggi = screen.availHeight - 225; var dataTree = { datatype: "json", datafields: [ { name: 'id' },{ name: 'text' },{ name: 'parentid' },{ name: 'value' } ], id: 'id', url: 'remote.cfc?method=getMenuKomplek' } var dataAdapter = new $.jqx.dataAdapter(dataTree, { async: false, autoBind: true }); dataAdapter.dataBind(); var theme = getTheme(); var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'value', map: 'value'},{name: 'text', map: 'label'}]); $('#jqxTree').jqxTree({ source: records, theme: theme, height: '100%', width: '100%' }); $("#splitter").jqxSplitter({ theme: theme, width: '100%', height: availTinggi, panels: [{ size: 250}] }); $("#jqxMenu").jqxMenu({ width: '100%', height: 30 }); $("#jqxdatetime").jqxDateTimeInput({ width: '250px', height: '25px', theme: theme }); $('#GraphicsPopupTab').jqxTabs({ width: '100%' }); }; return { config: { theme: null }, init: function() { _createElements(); _addEventListeners(); _initAddWindow(); } }; }()); $(document).ready(function () { customDemo.config.theme = getTheme(); customDemo.init(); }); </script></head><body class="default"><div id="content"><div id="header" style="margin:0 11px 0 0px;border-bottom:solid 0px #D4D4D4"> <div id='jqxMenu' style="margin:6px 0px;padding-left:10px"> <cfinclude template="headerMenu.cfm"> </div></div><div id="splitter"> <div> <div style="border: none;" id='jqxTree'></div> </div> <div id="ContentPanel"> <div style="float: left;" id="jqxgrid"></div> <div style="float: left;" id="jqxgrid1"></div> <div style="float: left;" id="jqxgrid2"></div> <div style="float: left;" id="jqxgrid3"></div> </div></div><div id="footer" style="font-size:12px;font-family: arial;margin:0 20px 0 20px;padding:2px; text-align: center"> <div> <p></p> </div></div><div id="createWindow"> <div>Create</div> <div style="overflow: hidden"> <div style="padding-bottom: 4px"> </div> <div id="GraphicsPopupTab" style="height: 350px"> <ul style="margin-left: 30px;"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div></div> <div></div> <div></div> <div id="splitterTab" style="margin: 5px"> <div> <div style="border: none;" id="listbox"></div> </div> <div> <div style="border: none;width: 100%; height: 100%; overflow: hidden" id="listBoxContent"></div> <div style="border: none;width: 100%; height: 100%; overflow: hidden" id="listBoxContent1"></div> </div> </div> <div></div> <div></div> <div></div> </div> </div></div></div></body></html>
thanks a lot
Hi,
I added a screenshot of window popup with firebug after splitbar collapsed
https://docs.google.com/drawings/d/1Rk4HD6AL77-1W1U2bXoYmcgu2bKW0jB7RlaD86pYOts/edit?usp=sharing
thanks for any help
Hi,
I got solution for this problem, i added “min: ” and “size: ” property to the right panel of splitter (second splitter), in this case i add codes below :
var _initTabWidget = function(tab){ if(tab == '3'){ // var lbrRightSplitter = lebarTab - 150 - 17; tinggiTab = tinggiTab - 50; $("#splitterTab").jqxSplitter({ theme: customDemo.config.theme, width: '99%', height: tinggiTab, splitBarSize: 5, panels: [{ min: 150, size: 150, collapsible: false, collapsed: false }, { min: lbrRightSplitter, size: '100%', collapsible: false, collapsed: false }] }); // }
thanks for your attention Dimitar,
-
AuthorPosts
You must be logged in to reply to this topic.