Splitter How-To and Help

For any questions send us a support request




For any questions send us a support request



1. How to use splitter with treeview?

We have many working examples, including Splitter with Treeview.
You can check integration example of TreeView and Splitter here.
See also tutorial with TreeView and Splitter here.




2. How to run examples? I am new to web programming. 

1. Unzip all files into any location on your computer
2. Run RunExamples.exe to run examples 

Check also how to install Obout Suite for ASP.NET 2.0-3.5.




3. How to use StyleFolder property? 

You can put 'styles' folder anywhere on your web server.
Then set StyleFolder to point to it (use web relative paths).

If the 'styles' folder is placed in the root of your application, use
StyleFolder = "/styles/mystyle"

If 'styles' is in the same folder with your file, use
StyleFolder = "styles/mystyle"

If 'styles' is one level up from your file, use
StyleFolder = "../styles/mystyle"

Also see How to set path for my page?




4. How to add a reference to Splitter in VS? 

To add a reference to Splitter in Visual Studio, do the following:
Go to toolbar menu Website / Project > Add Reference > Click tab 'Browse' >
> Find obout_Splitter2_Net.dll > Click 'OK'




5. How to add Splitter component to the VS toolbox? 

To make the component appear in the toolbox of Visual Studio, do the following:
        
  • From the main menu click Tools : Choose Toolbox Items...
    • 
                
  • Browse for obout_Splitter2_Net.dll and then click 'OK'
    •




6. How to customize the splitter? 

You can use any of the styles from our archive, simply by modifying the StyleFolder (see here how to set it).
Feel free to edit any of the CSS files to get the look you want.

See also how to customize your splitter control tutorial.




7. How to disable the splitter elements scroll? 

You need to modify the splitter element css class in order to disable the scroll.

For example if you are using default style, change, inside styles/default/style.css, 
the splitter element class that you need to disable its scroll bar:
   - for LeftContent element change ob_spl_leftpanelcontent class
   - for TopHeader element change ob_spl_toppanelheader class
   - etc.
from overflow:auto to overflow:hidden.

    /* for left panel content */
    .ob_spl_leftpanelcontent {
        overflow: none;




8. How to use multiple splitters on a page?

<!-- Splitter 1 -->
<spl:Splitter runat="server" StyleFolder="styles/default">
<LeftPanel>
<Content>
... Left Panel content here ...
...

<!-- Splitter 2 -->
<spl:Splitter runat="server" StyleFolder="styles/default">
<LeftPanel>
<Content>
... Left Panel content here ...
...

See also how to use multiple splitters with different styles on the same page.



9. What is the default value for CookieDays property? 

CookieDays represents the number of days to keep the position of the splitter separator in a cookie. 

The position is saved in user's cookie when moving the splitter separator,
so the same position is automatically set on later visits
The default value is 30 days.




10. In Internet Explorer splitter panels are not visible on loading or on resizing. 

In Internet Explorer go to Tools > Internet Options.
Go to Security > Custom Level.
Make sure you set the following options:
 - Scripting > Active Scripting > Enable.
 - ActiveX controls and plug-ins > Binary and script behaviors > Enable.




11. Can splitter panels contain html elements? Why can't I access my element using javascript? 

Yes, the splitter panels can contain any html element.

If the element isn't a server running element then you can access it using javascript like:
        var myElement = document.getElementById('myElementID');

Otherwise, if the element is a server running element (runat = "server"), the client id that you set to it 
might change on client side, so the best way to access it using javascript is like:
        var myElement = document.getElementById('<%=myElementID.ClientID%>')




12. How to enable the collapsing button? Can I customize it? 

You can enable the collapsing button by simply setting the CollpasePanel property.
Accepted values are:
  ·VerticalCollapsePanelType.none, VerticalCollapsePanelType.left, 
	VerticalCollapsePanelType.right for Vertical Splitter.
  ·HorizontalCollapsePanelType.none, HorizontalCollapsePanelType.top, 
	HorizontalCollapsePanelType.bottom for Horizontal Splitter.
Default value is:
  ·VerticalCollapsePanelType.none for Vertical Splitter.
  ·HorizontalCollapsePanelType.none for Horizontal Splitter.
Example code

<obspl:Splitter CollapsePanel="left" id="spl1" runat="server" StyleFolder="styles/default">
<LeftPanel>
<Content>
... Left Panel content here ...
...

VB.NET
spl1.CollapsePanel = VerticalCollapsePanelType.left

spl1.CollapsePanel = VerticalCollapsePanelType.right

C#
spl1.CollapsePanel = VerticalCollapsePanelType.left;

See also collapse panel example.
You can also check how to customize the collapsing button.



13. Can I use nested splitters? 

You can use nested splitters as well.
Example Code:

<!-- Splitter 1 -->
<spl:Splitter runat="server" StyleFolder="styles/default">
<LeftPanel>
<Content>
... Left Panel content here ...
</Content>
</LeftPanel>
<RightPanel>
<Content>
<!-- Splitter 2 - nested inside Splitter 1 Right Panel -->
<spl:HorizontalSplitter runat="server" StyleFolder="styles/default">
<TopPanel>
<Content>
... Top Panel content here ...
...


Please check E-mail Client example.



14. RememberScrollPosition, SynchronizeScroll features are not working. 

Please make sure you set RememberScrollPosition = true. Default value is false.
Example code

<obspl:Splitter RememberScrollPosition="true" id="spl1" runat="server" StyleFolder="styles/default">
<LeftPanel>
<Content>
... Left Panel content here ...
...

VB.NET
spl1.RememberScrollPosition = true
C#
spl1.RememberScrollPosition = true;
 

Please make sure you set SynchronizeScroll = true. Default value is false.
Example code

<obspl:Splitter SynchronizeScroll="true" id="spl1" runat="server" StyleFolder="styles/default">
<LeftPanel>
<Content>
... Left Panel content here ...
...

VB.NET
spl1.SynchronizeScroll = true
C#
spl1.SynchronizeScroll = true;

These features also work in horizontal splitter.
For security reasons both features don't work if inside one of the panels is loaded a page from other domain.



15. How to load one panel from another? 

If in the panel wasn't loaded another page using either URL property of loadPage method,
you can load a page to another panel using loadPage method like this:
JavaScript
spl1.loadPage('RightContent', 'SomePage.html');
 

Otherwise, if in the panel was already loaded another page, you can load a page to another
panel using loadPage method like this:
JavaScript
window.parent.spl1.loadPage('RightContent', 'SomePage.html');



16. Is working perfectly on my development server, but it doesn't work on the production server. 

On the server,

1. Open IIS console and go into properties of your website.
2. Switch to "Home Directory" tab.
3. Click on "Configuration" button under "Application Settings".
4. In the new window go into "Mappings" tab.
5. Copy (into notepad for example) all values for .aspx extension.
6. Click "Add" button to add a new entry.
7. "Executable" field is the same as the path for .aspx extension
(example: c:\windows\microsoft.net\framework\v2.0.50727\aspnet_isapi.dll).
8. "Extension" field must be ".axd".
9. Verbs are limited to "GET,HEAD,POST,DEBUG".
10. Uncheck "Verify that file exists" (important that it is unchecked).

Click OK on all open dialogs. 
This should now reference web resource files correctly.




17. When placing into html container (div, table) the Splitter control is very small. 

We recommend placing the Splitter component directly inside the "body" or "form" html element.
     <body>
        <obspl:Splitter ... 

If you need to place it inside "div" element, or another html element, 
you just need to set specific size for the "div":

    Fixed size
     <div style="width:500px;height:400px">
        <obspl:Splitter ... 
	
    Dynamic size
     <div style="width:70%;height:70%">
        <obspl:Splitter ...




18. How can I prevent ASP.NET from generating a unique ID?

Sample C# Code: 
     private FieldInfo cachedUniqueIDField = 
        typeof(Control).GetField("_cachedUniqueID", BindingFlags.NonPublic | BindingFlags.Instance);
    
    protected void Page_Load(object sender, EventArgs e)
    {
        // txtName is the control you want to keep the id
        cachedUniqueIDField.SetValue(txtName, txtName.ID);
    }




19. Is Splitter control working with master pages?

Yes, check the Splitter working examples with source code.



20. How to add a script to the page load event (when using a Splitter)?

Add this JavaScript function to your page:
    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload();
                }
                func();
            }
        }
    }            

Add a script to the page load event like:
    addLoadEvent(function() {
        alert('page load event')
    });            


For any questions send us a support request

"I have evaluated components from many of your competitors, and am impressed with how easy your controls are to use in comparison. I was able to get them up and running in a fraction of the time."

Lloyd, Douglas E
GE Healthcare