jQWidgets Forums

This topic contains 10 replies, has 3 voices, and was last updated by jon.moon 12 years, 5 months ago.

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

Author

Splitter on Tab control, layout does not persist Posts

October 22, 2012 at 6:06 pm Splitter on Tab control, layout does not persist #9870

Antony

Member

In my page layout I have a tab control having multiple tabs and each tab having one or more splitters on it. I notice that when I switch from one tab to another, the splitter layout is lost. Please help me to rectify this situation.

October 22, 2012 at 6:31 pm Splitter on Tab control, layout does not persist #9873

Peter Stoev

Keymaster

Hi Antony,

Please, take a look at this sample: integration.htm. It demonstrates how to use jqxTabs with other widgets hosted inside the tabs.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 22, 2012 at 6:42 pm Splitter on Tab control, layout does not persist #9876

Antony

Member

Thank you very much for your quick reply. This demo does not have splitter control. Problem is that splitter layout does not persist when there are splitters on multiple tabs of a tab control. Please help.

October 23, 2012 at 4:36 am Splitter on Tab control, layout does not persist #9887

Peter Stoev

Keymaster

Hi Antony,

The example demonstrates how to use any widget inside jqxTabs. To add Splitter inside a Tab, use the same approach.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 23, 2012 at 5:44 am Splitter on Tab control, layout does not persist #9899

Antony

Member

Adding splitter inside a Tab control is working fine. There is no issue on that. Problem is that splitter layout does not persist when there are splitters on multiple tabs of the same tab control. Please help.

October 23, 2012 at 5:55 am Splitter on Tab control, layout does not persist #9901

Peter Stoev

Keymaster

Please, see how the sample that I posted is implemented.

Here’s the sample’s code:


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo shows how to integrate jqxTabs with other widgets.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var initGrid = function () {
                var source =
               {
                   datatype: "csv",
                   datafields: [
                        { name: 'Date' },
                        { name: 'S&P 500' },
                        { name: 'NASDAQ' }
                    ],
                   url: '../sampledata/nasdaq_vs_sp500.txt'
               };
                var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
                $("#jqxGrid").jqxGrid(
                {
                    width: '100%',
                    height: '84%',
                    source: dataAdapter,
                    theme: theme,
                    columns: [
                        { text: 'Date', datafield: 'Date', cellsformat: 'd', width: 250 },
                        { text: 'S&P 500', datafield: 'S&P 500', width: 150 },
                        { text: 'NASDAQ', datafield: 'NASDAQ' }
                    ]
                });
            }
            var initChart = function () {
                // prepare the data
                var source =
               {
                   datatype: "csv",
                   datafields: [
                        { name: 'Date' },
                        { name: 'S&P 500' },
                        { name: 'NASDAQ' }
                    ],
                   url: '../sampledata/nasdaq_vs_sp500.txt'
               };
                var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
                var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                // prepare jqxChart settings
                var settings = {
                    title: "U.S. Stock Market Index Performance (2011)",
                    description: "NASDAQ Composite compared to S&P 500",
                    enableAnimations: true,
                    showLegend: true,
                    padding: { left: 10, top: 5, right: 10, bottom: 5 },
                    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                    source: dataAdapter,
                    categoryAxis:
                    {
                        dataField: 'Date',
                        formatFunction: function (value) {
                            return months[value.getMonth()];
                        },
                        toolTipFormatFunction: function (value) {
                            return value.getDate() + '-' + months[value.getMonth()];
                        },
                        type: 'date',
                        baseUnit: 'month',
                        showTickMarks: true,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        showGridLines: true,
                        gridLinesInterval: 3,
                        gridLinesColor: '#888888',
                        valuesOnTicks: false
                    },
                    colorScheme: 'scheme04',
                    seriesGroups:
                    [
                        {
                            type: 'line',
                            valueAxis:
                            {
                                unitInterval: 500,
                                minValue: 0,
                                maxValue: 3000,
                                displayValueAxis: true,
                                description: 'Daily Closing Price',
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'S&P 500', displayText: 'S&P 500' },
                                    { dataField: 'NASDAQ', displayText: 'NASDAQ' }
                                ]
                        }
                    ]
                };
                // setup the chart
                $('#jqxChart').jqxChart(settings);
            }
            // init widgets.
            var initWidgets = function (tab) {
                switch (tab) {
                    case 0:
                        initGrid();
                        break;
                    case 1:
                        initChart();
                        break;
                }
            }
            $('#jqxTabs').jqxTabs({ width: 600, height: 560, theme: theme, initTabContent: initWidgets });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id='jqxTabs'>
            <ul>
                <li style="margin-left: 30px;">
                    <div style="height: 20px; margin-top: 5px;">
                        <div style="float: left;">
                            <img width="16" height="16" src="../../images/catalogicon.png" />
                        </div>
                        <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;">
                            US Indexes</div>
                    </div>
                </li>
                <li>
                    <div style="height: 20px; margin-top: 5px;">
                        <div style="float: left;">
                            <img width="16" height="16" src="../../images/pieicon.png" />
                        </div>
                        <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;">
                            NASDAQ compared to S&P 500</div>
                    </div>
                </li>
            </ul>
            <div style="overflow: hidden;">
                <div id="jqxGrid">
                </div>
                <div style="margin-top: 10px; height: 15%;">
                    The S&P 500 index finished 2011 less than a point away from where it ended 2010
                    -- 0.04 points down to be exact. That's the smallest annual change in history. At
                    its peak in April, the S&P had climbed more than 8%. But by October, at the lowest
                    levels of the year, it was down more than 12%. The Nasdaq, meanwhile, lost 1.8%
                    for the year.</div>
            </div>
            <div style="overflow: hidden;">
                <div id='jqxChart' style="width: 100%; height: 100%">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

The important part is

  var initWidgets = function (tab) {
                switch (tab) {
                    case 0:
                        initGrid();
                        break;
                    case 1:
                        initChart();
                        break;
                }
            }

When the first tab is selected, initialize the first content. When the second tab is selected, initialize the second widget and so on. This is valid for Splitters, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 29, 2012 at 2:29 pm Splitter on Tab control, layout does not persist #11717

jon.moon

Participant

I am having the same problem as Antony, and this solution didn’t fix it. The tab initially loads correctly, but when you switch to a different tab, the width of all of the panels in the splitter are set to 0. So when you switch back to the tab, everything is collapsed. Any ideas on what is happening? I can provide code if needed.

Jon

November 29, 2012 at 2:50 pm Splitter on Tab control, layout does not persist #11722

Peter Stoev

Keymaster

Hi Jon,

There’s no such issue on our side or at least we can’t reproduce it. Please, post a sample code if you are able to reproduce it with jQWidgets 2.5.5 and also make sure that you initialize the widgets using the same approach I posted in my previous post.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 29, 2012 at 3:08 pm Splitter on Tab control, layout does not persist #11728

jon.moon

Participant

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Administrator</title>
<link href="/jqwidgets/styles/jqx.base.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/jqwidgets/styles/jqx.ui-redmond.css" media="screen" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="/jqwidgets/jqx-all.js"></script>
<script type="text/javascript" src="/jqwidgets/globalization/jquery.global.js"></script>
<script>
var theme = 'ui-redmond';
$(document).ready(
	function () 
	{
		$("#mainMenu.jqxMenu").jqxMenu({width:$("body").width()-3, height: '30px', autoOpen: true, theme:theme});
		$(".jqxTabs .jqxMenu").jqxMenu({width:$("body").width()-10, height: '30px', autoOpen: true, theme:theme});
		$(".jqxTabs").jqxTabs({width:$("body").width()-3,height: $("body").height() - 144,theme:theme,initTabContent:initTabContent});
	}
);
function initializeSplitter()
{
	$("#editorContent").jqxSplitter({height: $("body").height()-220,orientation:'vertical', theme:theme, panels:[{size:400},{}]});
}
function initializeGrid()
{
	$(".jqxGrid").jqxGrid({width:$("body").width()-9,height: $("body").height() - 220,theme:theme});
}
function initTabContent(tab)
{
	switch(tab)
	{
		case 0:
			initializeSplitter();
			break;
		case 1:
			initializeGrid();
			break;
	}
}
</script>
<style>
html, body {
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
}
</style>
</head>
<body>
<div id="topheader" class="topheader" style="padding-top:0px;padding-bottom:0px;background: #CCC url(https://huss.covenant.edu/common/img/headerbg.jpg) center top;">
        <a href="/">
            <img style="border: 0px solid white;height:69px;width:278px" class="headerimage" src="https://huss.covenant.edu/common/img/header_covenant-college-logo.png"/>
        </a>
    
        <div style='float:right;color:white;cursor:pointer;padding-right:10px;padding-top:10px'>
            <div id="toolbarTextSpace" style='float:right;padding-top:8px'></div>
        </div>
    </div>
    <div id="footer" class="footer" style="font-size:8pt;padding:5px 0px;position:absolute;bottom:0px;left:0px;background-color:#87BEF0;width:100%;padding-top:5px;padding-bottom:5px;">
        <div class="footertext" style='float:left;margin: 0px 20px;'>
            Scots Portal v2.0<br />
            Technology Services
        </div>
        <div class="footertext" style='float:left'>
            Problems or Questions?<br />
            <a href="https://techsupport.covenant.edu" target="_blank">Contact Us</a>
        </div>
    </div>
<div id='mainMenu' class='jqxMenu'>
    <ul>
        <li>Forms
            <ul>
                <li>Admissions
                    <ul>
                        <li>Net Price Calculator</li>
                        <li>Request Information</li>
                    </ul>
                </li>
                <li>Education
                    <ul style='width:250px'>
                        <li>2013 Career Summit Registration</li>
                        <li>2013 Educators Conference Registration</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
<div id='mainTabs' class='jqxTabs'>
	<ul>
    	<li>Edit Form</li>
        <li>View Form Submissions</li>
    </ul>
    <div id='formEditor'>
    	<div id='editorToolbar' class='jqxMenu'>
        	<ul>
            	<li>File
                	<ul>
                        <li>Preview Form</li>
                    	<li>Save</li>
                    </ul>
                </li>
            	<li>Change Page
                	<ul>
                    	<li>Page 1</li>
                        <li>Page 2</li>
                        <li>Page 3</li>
                        <li>Confirmation</li>
                    </ul>
                </li>
            </ul>
        </div>
        <div id='editorContent'>
        	<div id='leftSide' style='width:400px'></div>
            <div id='rightSide'></div>
        </div>
    </div>
    <div id='formSubmissions'>
    	<div id='submissionToolbar' class='jqxMenu'></div>
        <div id='submissionGrid' class='jqxGrid'></div>
    </div>
</div>
</body>
</html>

The initial loading of the tabs works fine, but when you switch back to the first tab, the first panel is always collapsed. I was logging in the console a bit and found that when you switch off a tab which has a splitter, then the widths of all of the panels gets set to 0. When you switch back, it does not change the size of all of them correctly so that the first one is set to 0 and the second is set to the full width (at least in this case).

Thanks.

Jon

November 29, 2012 at 3:35 pm Splitter on Tab control, layout does not persist #11736

Peter Stoev

Keymaster

Hi jon.moon,

You should note that the widgets are expected to be initialized by ID, not by ClassName. The Split Panels Size shouldn’t be set in the HTML, too. It is expected to be set during the jqxSplitter’s initialization using the panel’s ‘size’ property as shown in the documentation and samples. In your code, you also missed to set the width property of jqxSplitter.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 29, 2012 at 3:42 pm Splitter on Tab control, layout does not persist #11737

jon.moon

Participant

Thanks. Setting the width for the splitter was the piece I was missing.

Jon

Author

Posts

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

You must be logged in to reply to this topic.