Use of Splitter in pages with Master page.

[JKANNANParticipant]

Hi,

I am not able to get the splitter feature working in a page that contains master page.

If I remove the master page, the code works.

Can you please provide me a sample how to get the splitter functionality to work in a page that contains master page?

Thanks

Kannan

[DimitarParticipant]

Hi Kannan,

Unfortunately, we do not have such an example. Please share if there are any errors thrown in your browser’s console. Make sure you have included the scripts necessary for jqxSplitter and that you are using the latest version of jQWidgets (3.9.1). Please also take a look at our help topic Loading Widgets in ASP.NET User Controls, which may be helpful to you.

Best Regards,
Dimitar

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

[JKANNANParticipant]

Hi Dimitar,

Thanks for your response. The following is the error displayed in the browser’s console

Uncaught Invalid HTML Structure! jqxSplitter requires 1 container DIV tag and 2 nested DIV tags.

I have included all the required scripts for the jqxSplitter.

The following is the code from the aspx page.

<%@ Page Title=”” Language=”C#” MasterPageFile=”~/MasterPage.master” AutoEventWireup=”true” CodeFile=”JQSplitterToggleWithMasterPage.aspx.cs” Inherits=”JQWidgets_JQSplitterToggleWithMasterPage” %>

<asp:Content ID=”Content1″ ContentPlaceHolderID=”head” runat=”Server”>
</asp:Content>
<asp:Content ID=”Content2″ ContentPlaceHolderID=”ContentPlaceHolder1″ runat=”Server”>

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”scripts/demos.js”></script>
<script type=”text/javascript” src=”scripts/JQDateTimeInputUtils.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtooltip.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/globalization/globalize.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxsplitter.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/jqxgrid.columnsresize.js”></script>

<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>

<script type=”text/javascript” src=”jqwidgets/jqxsplitter.js”></script>

<script type=”text/javascript” src=”jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxnavigationbar.js”></script>

<script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtree.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxpanel.js”></script>

<script type=”text/javascript”>

$(document).ready(function () {

$(‘#mainSplitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, orientation: ‘vertical’, panels: [{ size: 300, collapsible: false }] });

$(‘#firstNested’).jqxSplitter({ width: ‘100%’, height: ‘100%’, orientation: ‘horizontal’, panels: [{ size: 300, collapsible: false }] });

$(‘#secondNested’).jqxSplitter({ width: ‘100%’, height: ‘100%’, showSplitBar: true, orientation: ‘vertical’, panels: [{ size: 150 }] });

$(‘#thirdNested’).jqxSplitter({ width: ‘100%’, height: ‘100%’, orientation: ‘vertical’, panels: [{ size: 150, collapsible: false }] });

});

</script>

<div id=”mainSplitter”>

<div>

<div id=”thirdNested”>

<div>

<span>Panel 4</span>
</div>

<%– <div>

<span>Panel 5</span>

</div>–%>
</div>

</div>

<div>

<div id=”firstNested”>

<div>

<div id=”secondNested”>

<div>

<span>Panel 1</span>
</div>

<div>

<span>Panel 2</span>
</div>

</div>

</div>

<div>

<span>Panel 3 </span>
</div>

</div>

</div>

</div>
</asp:Content>
<asp:Content ID=”Content3″ ContentPlaceHolderID=”ContentPlaceHolder2″ runat=”Server”>
</asp:Content>

The above code works when I remove the master page and place it in the regular aspx page.

I am currently using JQWIDGETS version 3.5.0

Any help would be appreciated.

Thanks

Kannan

[DimitarParticipant]

Hi Kannan,

The error “Uncaught Invalid HTML Structure! jqxSplitter requires 1 container DIV tag and 2 nested DIV tags.” is thrown because of the invalid HTML structure of thirdNested if Panel 5 is not added for some reason (the inline code in <% %>). Please make sure that by the time you call the splitters initialization code, the HTML structure is as follows:

<div id="mainSplitter">
    <div>
        <div id="thirdNested">
            <div>
                <span>Panel 4</span>
            </div>
            <div>

                <span>Panel 5</span>

            </div>
        </div>
    </div>
    <div>
        <div id="firstNested">
            <div>
                <div id="secondNested">
                    <div>
                        <span>Panel 1</span>
                    </div>
                    <div>
                        <span>Panel 2</span>
                    </div>
                </div>
            </div>
            <div>
                <span>Panel 3 </span>
            </div>
        </div>
    </div>
</div>

Best Regards,
Dimitar

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

[JKANNANParticipant]

Thanks Dimitar.

That worked.

It is really strange having a commented div tag is causing an issue when placed in the content place holder.

The same code works without any issue when placed in a regular aspx page.

I am having a different issue when setting the height to 100%.

In the following code when I set the height for the mainSplitter to 100%, I am not able to see the panels displayed.

If the set the height other than 100% it works perfectly.

<asp:Content ID=”Content2″ ContentPlaceHolderID=”ContentPlaceHolder1″ runat=”Server”>

<script type=”text/javascript”>

$(document).ready(function () {

$(‘#mainSplitter’).jqxSplitter({ width: ‘100%’, height: 500, orientation: ‘vertical’, resizable: false, panels: [{ size: 150, min: 150, collapsible: false }] });

$(‘#contentSplitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, orientation: ‘horizontal’, resizable: true, panels: [{ size: ‘60%’, collapsible: false }] });

});

</script>

<div id=”mainSplitter”>
<div>
Left Panel
</div>

<div>
<div id=”contentSplitter”>
<div class=”feed-item-list-container” id=”feedUpperPanel”>
Grid Summary
</div>

<div id=”feedContentArea”>
Grid Details
</div>
</div>

</div>
</div>

</asp:Content>

Thanks for your help.

Kannan

[DimitarParticipant]

Hi Kannan,

Please make sure the container of the splitter has its height set, too. This is a general CSS principle. You can read more about it here: http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window.

Best Regards,
Dimitar

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

[JKANNANParticipant]

Hi Dimitar,

The Splitter control is not working with IE9.

It works fine in IE 10+, Chrome and Firefox.

Can you please let me know if this control has a limitation in IE9?

Thanks

Kannan

[Peter StoevKeymaster]

Hi Kannan,

There is no issue with jqxSplitter in IE9. Please, review your HTML and debug your code. Our demos are tested and work fine with IE7, IE8 and IE9 so it’s not an issue on our side.

Best Regards,
Peter Stoev

[JKANNANParticipant]

Hi Peter,

The issue is when setting the height to 100%.

For example in the following code, setting the height for $(‘#mainSplitter’) to 100% and running in IE9, the panel does not display.

Just a single line is displayed.

<script type=”text/javascript”>

$(document).ready(function () {

$(‘#mainSplitter’).jqxSplitter({ width: ’100%’, height: ’100%’, orientation: ‘vertical’, resizable: false, panels: [{ size: 150, min: 150, collapsible: false }] });

$(‘#contentSplitter’).jqxSplitter({ width: ’100%’, height: ’100%’, orientation: ‘horizontal’, resizable: true, panels: [{ size: ‘60%’, collapsible: false }] });

});

</script>

<div id=”mainSplitter”>
<div>
Left Panel
</div>

<div>
<div id=”contentSplitter”>
<div class=”feed-item-list-container” id=”feedUpperPanel”>
Grid Summary
</div>

<div id=”feedContentArea”>
Grid Details
</div>
</div>

</div>
</div>

Thanks for your help.

Kannan

[Peter StoevKeymaster]

Hi Kannan,

Most probably your page is missing settings like “height” for the DIV/Body tag that is parent of the Splitter’s tag. As you may know, the default height of HTML Elements is “auto” so when your Splitter’s height is 100% and it’s parent height is “auto”, the result of line should be expected. Look at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/splitter-with-size-in-percentages.htm?arctic to learn how to use Splitter with fluid size.

Best Regards,
Peter Stoev

[JKANNANParticipant]

Hi Peter,

Thanks for your response.

It appears that we need to set the height 100% for the form tag also in order to work in IE9.

Thanks

Kannan

[Author]

Posts