Configuring igSplitter

Topic Overview

Purpose

This topic explains how to configure different features and behavior of the igSplitter™ control.

Required background

The following topics are prerequisites to understanding this topic:

• igSplitter Overview: This topic provides conceptual information about the igSplitter control including its features and user functionality.

• Adding igSplitter: This topic demonstrates, with code examples, how to add the igSplitter control to an HTML page in either JavaScript and ASP.NET MVC.

In this topic

This topic contains the following sections:

• igSplitter Configuration Overview
  • igSplitter configuration summary
  • igSplitter configuration summary chart
• Configuring the Initial States of the Panels (Collapsed/Expanded)
  • Overview
  • Property settings
  • Example
• Configuring the Initial Size of the Panels
  • Overview
  • Property settings
  • Example
• Configuring the Panels’ Resizing Limits
  • Overview
  • Property settings
  • Example
• Configuring the Orientation of the Splitter Bar
  • Overview
  • Property settings
  • Example
• Configuring the User Interaction Capabilities
  • Overview
  • Property settings
  • Example
• Related Content
  • Topics
  • Samples

igSplitter Configuration Overview

igSplitter configuration summary

Configuring the igSplitter control includes specifying the splitter orientation, setting the sizes of its container and panels, configuring some default settings, and controlling the user’s ability to interact with the control (allowing/disallowing the user to expand/collapse or resize the panels). For details, refer to igSplitter configuration summary chart.

igSplitter configuration summary chart

The following table explains briefly the configurable aspects of the igSplitter control and maps them to the properties that configure them. Further details are available after the table.

Configuring the Initial States of the Panels (Collapsed/Expanded)

Overview

The initial state (collapsed/expanded) of the panels is configurable through the collapsed property of either of the panels. Setting this property configures the respective panel to the desired state and the other panel – to the opposite state. You need to set the property for only one of the panels. If the properties for both panels are set, the setting for the left/top panel override the setting for the right/bottom panel. (So, if, for example, both panels are set as collapsed, then the left/top panel will be collapsed and the right/bottom panel will be expanded.

Default value is false.

Property settings

The following table maps the desired configuration to its respective property settings. Note that you can achieve the same result by setting the collapsed property of any of the panels.

Example

The screenshot below demonstrates collapsed left panel and expanded right panel as a result of the following settings:

Following is the code that implements this example.

In JavaScript:

$("#splitter").igSplitter({
     width: 700,
     panels: [{ collapsed: true }] 
});

Configuring the Initial Size of the Panels

Overview

The panels’ initial size is configurable through the size property of each panel. Setting this property configures the respective panel to the desired width (when the splitter bar is vertical) or height (when the splitter bar is horizontal) in pixels and the other panel occupies the remaining space to the rim of the igSplitter container. You need to set the property for only one of the panels. If the properties for both panels are set, the setting for the left/top panel override the setting for the right/bottom panel. (So, if, for example, both panels are set to be 100 pixels wide/high in an igSplitter instance, then the left/top panel will be sized to 100 pixels and the right/bottom panel will occupy the remaining space between the splitter bar and the rim of the container. The panel size settings should not exceed the size the related dimension of the container (width with vertical splitter bar and height with horizontal splitter bar). The valid format of the values is integer number (indicating either pixels or percentages)..

By default, the panels have no set size are equal in size with the splitter bar positioned in the middle if the igSplitter container.

Property settings

The following table maps the desired configuration to its respective property settings.

Example

The screenshot below demonstrates an igSplitter control with its left panel set to be 100 pixels wide and Its right panel – 600 pixels wide as a result of the following settings:

Following is the code that implements this example.

In JavaScript:

$("#splitter").igSplitter({    width: 700,    panels: [{ size: 100 }]                 });

Configuring the Panels’ Resizing Limits

Overview

The limits within which the splitter bar can be moved by the user are configurable. Resize limits are needed to ensure that the splitter bar could not be moved over desired position in the container. For example, you may want to set resizing limits to ensure that the content in a panel in that way it will not be hidden entirely from view.

Resizing limits are defined in pixels relative to the momentary position of the splitter bar. (The momentary position is the position in which the splitter bar is at the moment the limits are enforced.) There are two resizing limits, one for each direction in which the splitter bar can move, and respectively, a couple of corresponding properties that implement it:

• The left/top resizing limit is defined as an outset to the left/top relative to the momentary position of the splitter bar. This limit allows user to move the splitter bar only as far left/up as the outset is from the bar’s momentary position. The left/top resizing limit is implemented by setting the min property of any of the panels.
• The right/bottom resizing limit is defined as an outset to the right/bottom relative to the momentary position of the splitter bar. This limit allows user to move the splitter bar only as far right/down as the outset is from the bar’s momentary position. The right/bottom resizing limit is implemented by setting the max property of the panel.

When configuring the resizing limits, you need to set the min and max properties of only one of the panels. If the properties for both panels are set, the setting for the left/top panel override the setting for the right/bottom panel.

By default, no resizing limits are set.

Property settings

The following table maps the desired configuration to its respective property settings.

Example

The code below demonstrates a configuration in which the user will be able to move the splitter bar in a 400-pixel range between (100 pixels to the left and 300 pixels ro the right relative to the default position of the splitter bar (which the in the middle of the container). This configuration is achieved with the following settings:

Following is the code that implements this example.

In JavaScript:

$("#splitter").igSplitter({     panels: [{ min: 100, max: 300 }]              });

Configuring the Orientation of the Splitter Bar

Overview

The splitter bar orientation is managed through a dedicated property.

Property settings

The following table maps the desired configurations to its respective property settings.

Example

The screenshot below demonstrates how the igSplitter control looks as a result of the following settings:

Following is the code that implements this example.

In JavaScript:

$("#splitter").igSplitter({                     
    orientation: "horizontal"
});

Configuring the User Interaction Capabilities

Overview

Users’ interaction capabilities are configurable, meaning that you can allow or prevent users from resizing and/or expanding/collapsing of the panels. By default, expanding/collapsing is disabled and resizing is enabled.

When resizing is disabled, users cannot move the splitter bar within igSplitter’s container.

When expanding/collapsing is disabled, users cannot expand/collapse igSplitter’s panels and the collapse/expand buttons are not available on the splitter bar.

You enable/disable users to resize and/or expand/collapse panels, respectively, with the resizable and collapsible panel properties. You need to set the property for only one of the panels. If the properties for both panels are set, the setting for the left/top panel override the setting for the right/bottom panel.

Property settings

The following table maps the desired configuration to property settings.

Example

The code below demonstrates an igSplitter control with resizing disabled, as a result of the following settings:

Following is the code that implements this example.

In JavaScript:

$("#splitter").igSplitter({ 
     panels: [{          
        resizable: false     
     }]
});

Related Content

Topics

The following topics provide additional information related to this topic.

• Handling Events (igSplitter): The topics provide information and examples about the handling events of the igSplitter control.

• Accessibility Compliance (igSplitter): This topic explains the accessibility features of the igSplitter control and provides advice on how to achieve accessibility compliance for pages containing this control.

• Known Issues and Limitations (igSplitter): This topic provides information about the known issues and limitations of the igSplitter control.

• jQuery and MVC API Links (igSplitter): This topic provides links to the API documentation for the jQuery and its ASP.NET MVC helper class for the igSplitter control.

Samples

The following samples provide additional information related to this topic.

• Basic Vertical Splitter: This sample demonstrates how to use the Splitter control to manage a page's vertical layout. The first container contains a Tree control with continents and countries. The left vertical panel has maximum and minimum ranges that a user can resize the panel. When a node is clicked, the description for the selected item is in the right panel.

• Basic Horizontal Splitter: This sample demonstrates how to use the Splitter control to manage master/detail grid with horizontal layout. The first container contains a master grid with customers. After a row is clicked in master grid, in the second container is shown grid with orders that are made by this customer.

• Nested Spitters: This sample demonstrates how to manage layout with nested splitters. The panel contains a Tree with continents, countries and cities. When you click on a node the map in the second splitter is centered according node's coordinates. If a country is selected, then a grid is displayed under the map with cities in that country. Panels are not resizable by default.

• ASP.NET MVC Basic Usage: This example demonstrates how you can utilize the ASP.NET MVC helper for the igSplitter.

• Splitter API and Events: This sample demonstrates how to handle events in the igSplitter control and API usage.