jQWidgets Forums

This topic contains 8 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 4 months ago.

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

Author

Splitter With a Child Tab and Child tab have a Child Splitter Posts

October 24, 2012 at 12:14 pm Splitter With a Child Tab and Child tab have a Child Splitter #9980

Participant

Hello Sir:

With my previous question which is found in Splitter, I discovered something that when Splitter have a child Tab and Child Tab have a Child Splitter it does not work properly. the problem appears when selecting other tab and selecting back a tab with splitter child.

Please test the code below:

In this sample is demonstrated how to add a Vertical Splitter
inside a split panel of a Horizontal Splitter

html, body
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}

$(document).ready(function () {
var theme = getTheme();
var fullWidth = $(window).width();
var fullHeight = $(window).height();
$(‘#splitContainer’).jqxSplitter({ height: ‘100%’, width: ‘100%’, orientation: ‘horizontal’, theme: theme, panels: [{ size: ‘15%’ }, { size: ‘70%’}] });
$(‘#splitTabContainer’).jqxSplitter({ height: ‘100%’, width: ‘100%’, orientation: ‘horizontal’, theme: theme, panels: [{ size: ‘100%’ }] });
$(‘#nestedSplitter’).jqxSplitter({ height: ‘100%’, width: ‘100%’, theme: theme, panels: [{ size: ‘20%’ }, { size: ‘60%’}, { size: ‘20%’}] });
$(‘#jqxtabs’).jqxTabs({ width: ‘100%’, height: ‘100%’ });
$(‘#jqxtabs’).bind(‘selected’, function (event) {
var item = event.args.item;
var title = $(‘#jqxtabs’).jqxTabs(‘getTitleAt’, item);
alert(title);
});
});

North

West

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5

Center North

Center South

Content 2

Content 3

Content 4

Content 5

East

South

The idea of the code above is like Outlook, where splitter is divided into two, which north and south. In the north part, grid is there. and no south part is details.

thanks

October 24, 2012 at 12:29 pm Splitter With a Child Tab and Child tab have a Child Splitter #9981

Peter Stoev

Keymaster

Hi merdjpatts,

1. As you are hosting widgets inside Tabs, see this sample which demonstrates how to do it: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/integration.htm?classic

2. Please, use the button to format your code before posting it or use this tool: http://jqwidgets.com/codeformatter/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 6, 2012 at 1:51 pm Splitter With a Child Tab and Child tab have a Child Splitter #10587

merdjpatts

Participant

Hello Peter,

Sorry for very late reply, I was in vacation,

I checked the sample link you provided http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/integration.htm?classic, I found this one good. Basing on the link you provided I want to have tab which have splitter inside. First part of the splitter is like grid and the second part is detail info of the grid. For example, I clicked a grid row, it will show me the detail of the selected row in second splitter.

this is very crucial to my project and I need your help badly for this push through.

big thanks

merdj

November 7, 2012 at 11:01 am Splitter With a Child Tab and Child tab have a Child Splitter #10634

merdjpatts

Participant

Hello Peter,

please try the code below:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample is demonstrated how to add a Vertical Splitter
        inside a split panel of a Horizontal Splitter</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <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/jqxsplitter.js"></script>
	<script type="text/javascript" src="../../scripts/gettheme.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
        
    <style type="text/css">
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var fullWidth = $(window).width();
            var fullHeight = $(window).height();
            $('#splitContainer').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal', theme: theme, panels: [{ size: '15%' }, { size: '70%'}] });
			$('#splitTabContainer').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal', theme: theme, panels: [{ size: '100%' }] });
            $('#nestedSplitter').jqxSplitter({ height: '100%', width: '100%', theme: theme, panels: [{ size: '20%' }, { size: '60%'}, { size: '20%'}] });
			$('#jqxtabs').jqxTabs({ width: '100%', height: '100%' });
            $('#jqxtabs').bind('selected', function (event) {
                var item = event.args.item;
                var title = $('#jqxtabs').jqxTabs('getTitleAt', item);
                alert(title);
            });
        });
    </script>
</head>
<body class='default'>
    <div id="splitContainer">
        <div>
            North
        </div>
        <div id="nestedSplitter">
            <div class="splitter-panel">
                West
            </div>
            <div class="splitter-panel">
				<div id='jqxtabs'   style="overflow:hidden;">
					<ul style='margin-left: 20px;'>
						<li>Tab 1</li>
						<li>Tab 2</li>
						<li>Tab 3</li>
						<li>Tab 4</li>
						<li>Tab 5</li>
					</ul>
					<div>
						<div id="splitTabContainer">
						    <div>
								Center North
							</div>
							<div>
								Center South
							</div>
						</div>
					</div>
					<div>
						Content 2
					</div>
					<div>
						Content 3
					</div>
					<div>
						Content 4
					</div>
					<div>
						Content 5
					</div>
				</div>
            </div>
            <div class="splitter-panel">
                East
            </div>
        </div>
        <div>
            South
        </div>
    </div>
</body>
</html>

look how it works, this is your reference on what I am saying about in my previous post.

big thanks

November 7, 2012 at 4:24 pm Splitter With a Child Tab and Child tab have a Child Splitter #10643

Peter Stoev

Keymaster

Hi merdjpatts,

My idea was to use the initTabContent callback function.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample is demonstrated how to add a Vertical Splitter
        inside a split panel of a Horizontal Splitter</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <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/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var fullWidth = $(window).width();
            var fullHeight = $(window).height();
            $('#splitContainer').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal', theme: theme, panels: [{ size: '15%' }, { size: '70%' }] });      
            $('#nestedSplitter').jqxSplitter({ height: '100%', width: '100%', theme: theme, panels: [{ size: '20%' }, { size: '60%' }, { size: '20%' }] });
            // init widgets.
            var initWidgets = function (tab) {
                switch (tab) {
                    case 0:
                        $('#splitTabContainer').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal', theme: theme, panels: [{ size: '50%' }] });
                        break;
                    case 1:
                        break;
                }
            }
            $('#jqxtabs').jqxTabs({ width: '100%', height: '100%', initTabContent: initWidgets });
        });
    </script>
</head>
<body class='default'>
    <div id="splitContainer">
        <div>
            North
        </div>
        <div id="nestedSplitter">
            <div class="splitter-panel">
                West
            </div>
            <div class="splitter-panel">
                <div id='jqxtabs' style="overflow: hidden;">
                    <ul style='margin-left: 20px;'>
                        <li>Tab 1</li>
                        <li>Tab 2</li>
                        <li>Tab 3</li>
                        <li>Tab 4</li>
                        <li>Tab 5</li>
                    </ul>
                    <div>
                        <div style="border: none; overflow: hidden;" id="splitTabContainer">
                            <div>
                                Center North
                            </div>
                            <div>
                                Center South
                            </div>
                        </div>
                    </div>
                    <div>
                        Content 2
                    </div>
                    <div>
                        Content 3
                    </div>
                    <div>
                        Content 4
                    </div>
                    <div>
                        Content 5
                    </div>
                </div>
            </div>
            <div class="splitter-panel">
                East
            </div>
        </div>
        <div>
            South
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 8, 2012 at 8:04 am Splitter With a Child Tab and Child tab have a Child Splitter #10659

merdjpatts

Participant

Hello Peter,

thanks for your reply and it is working, though, have little issues when I do resize the browser. redrawing of splitter does not show display correctly. When I resize it from bigger to smaller, it is working fine, but when i resize it from smaller to bigger the splitter is not resized, instead it is simply stuck-up.

When this part is finished then I can make my hands dirty with your components.

big thanks

November 10, 2012 at 9:44 am Splitter With a Child Tab and Child tab have a Child Splitter #10821

merdjpatts

Participant

Hello Peter,

any news of my inquiry above?

big thanks

November 13, 2012 at 11:40 am Splitter With a Child Tab and Child tab have a Child Splitter #10959

merdjpatts

Participant

Hello Sir,

it seems you are very quiet with my issues? any news?
thanks

November 13, 2012 at 12:01 pm Splitter With a Child Tab and Child tab have a Child Splitter #10961

Peter Stoev

Keymaster

Hi merdjpatts,

Thank you for the feedback.

We will investigate the reported behavior from your post. In case we reproduce it, we will create a work item about it. Unfortunately, I am unable to provide you additional details at present.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.