jQWidgets Forums

jQuery UI Widgets Forums Layouts Splitter layout property inside splitbar changes after collapsed

This topic contains 6 replies, has 2 voices, and was last updated by  teguh 12 years, 4 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • teguh
    Member

    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.


    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    teguh
    Member

    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();
    });

    Create


    Dimitar
    Participant

    Hi teguh,

    Please format your code as explained in the topic Code Formatting.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    teguh
    Member

    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=1

    and 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


    teguh
    Member

    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


    teguh
    Member

    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,

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.