We're sorry but this site requires JavaScript.

Version

Is this content useful?

Thank you for your feedback!

Thank you for your feedback! You have rated this topic in the last 30 days.

Adding igSplitter

Topic Overview

Purpose

This topic demonstrates, with code examples, how to add the igSplitter™ control to an HTML page in either JavaScript or ASP.NET MVC.

Required background

The following table lists the concepts and topics required as a prerequisite to understanding this topic.

Topics

Using JavaScript Resouces in Ignite UI for jQuery: This topic explains how to manage the required resources to work with Ignite UI for jQuery® within a Web application.
igSplitter Overview: This topic provides conceptual information about the igSplitter control including its main features, minimum requirements, and user functionality.

In this topic

This topic contains the following sections:

Adding igSplitter – Conceptual Overview

Adding igSplitter summary

The igSplitter is control that initialize on DIV element with two child DIV elements with some content. You can set up the control without configuring any options. In this case, however, igSplitter will occupy the entire browser window so, unless this is exactly what you want, you should set container width and height to configure igSplitter to the desired size.

The width and height calls specify the size of the splitter on the page and their values can be specified in any unit of measure available in CSS.

Requirements

The following table summarizes the requirements for igSplitter control.

Requirement / Required Resource Description What you need to do

jQuery and jQuery UI JavaScript resources

Ignite UI for jQuery is built on top of these frameworks:

jQuery
jQuery UI

Add script references to both libraries in the head section of your page.

Modernizr library (Optional)

The Modernizr library is used by the igSplitter to detect browser and device capabilities. It is not mandatory and if not included the control will behave as if it works in a normal desktop environment with HTML5 compatible browser.

Modernizr

Add a script reference to the library in the head section of your page.

igSplitter JavaScript resources

The igSplitter functionality of the Ignite UI for jQuery library is distributed across several files. You can load the required resources in one of the following ways:

(Recommended) Use the Infragistics® Loader (igLoader™). You only need to include a script reference to igLoader on your page.
Load the required resources manually. You need to use the dependencies listed in the table below.

The following table lists the Ignite UI for jQuery library dependences related to the igSplitter control. These resources need to be referred to explicitly if you chose to load resources manually (i.e. not to use igLoader).

JS Resource	Description
infragistics.ui.splitter-en.js	The igSplitter control’s language file
infragistics.util.js infragistics.util.jquery.js	Ignite UI for jQuery utilities
infragistics.ui.splitter.js	The igSplitter control

Add one of the following:

A reference to igLoader
A reference to all the required JavaScript files (listed in the table on the left).

IG theme (Optional) This theme contains the visual styles for the Ignite UI for jQuery library. The theme file is: {IG CSS root}/themes/Infragistics/infragistics.theme.css

igSplitter structure The styles from the following CSS file are used for rendering various elements of the control: {IG CSS root}/structure/modules/infragistics.ui.splitter.css Add style reference to the file in your page.

Note: It is recommended to use the igLoader component to load JavaScript and CSS resources. For information on how to do this, refer to the Using Infragistics Loader topic. In addition to that, in the online Ignite UI for jQuery Samples Browser, you can find some specific examples on how to use the igLoader with the igSplitter component.

Steps

Following are the general conceptual steps for adding igSplitter to an HTML page.

Adding references to required resources
Adding the igSplitter control

Adding igSplitter in JavaScript – Procedure

Introduction

This procedure guides you through the steps of adding an igSplitter control with basic functionality to an HTML page using a pure HTML/JavaScript implementation. It uses the Infragistics Loader component to load all Ignite UI for jQuery resources needed by the igSplitter control.

Preview

The following screenshot is a preview of the final result.

Steps

The following steps demonstrate how to add a basic igSplitter control to a web page.

Add references to required resources.
1. Organize the required files.
  
  A. Add the jQuery, jQueryUI, and Modernizr JavaScript resources to a folder named Scripts in the directory where your web page resides.
  
  B. Add the Ignite UI for jQuery CSS files to a folder named Content/ig (For details, see the Styling and Theming Ignite UI for jQuery topic).
  
  C. Add the Ignite UI for jQuery JavaScript files to a folder named Scripts/ig in your web site or application (For details, see the Using JavaScript Resources in Ignite UI for jQuery topics).
2. Add the references to the required JavaScript libraries.
  
  Add references to the jQuery, jQuery UI and Modernizr libraries to the head section of your page:
  
  In HTML:
```
 <script  type="text/javascript" src="Scripts/jquery.js"></script>
 <script  type="text/javascript" src="Scripts/jquery-ui.js"></script>
 <script  type="text/javascript" src="Scripts/modernizr.js"></script>
```
3. Add a reference to igLoader.Include the igLoader script in the page:
  
  In HTML:
```
 <script  type="text/javascript" src="Scripts/ig/infragistics.loader.js"></script>
```
4. Load the required resources.
  
  Instantiate igLoader:
  
  In HTML:
```
 <script type="text/javascript">
     $.ig.loader({
         scriptPath: "Scripts/ig/",
         cssPath: "Content/ig/",
         resources: "igSplitter"
     });
 <script>
```

Add the igSplitter control.

Add an HTML element to host igSplitter.

Add an HTML div element to host igSplitter on the HTML page.

In HTML:

 <div id="splitter">
     <div>
         First panel with grid example: <br />
         <div id="grid"></div>
     </div>
     <div>
         Second panel with html editor example: <br />
         <div id="htmlEditor"></div>
     </div>
 </div>

Instantiate igSplitter.

Add the initialization code to a script element in the HTML page. The initialization code creates igSplitter instance in the div element added earlier.

The following code creates an instance of the igSplitter control without specifying its container’s size.

In JavaScript:
```
 $.ig.loader(function () {
     // Create a basic igSplitter control
     $("#splitter").igSplitter({
     });
 });
```
In most cases, you might want to specify the size of the instance. The following code configures the igSplitter container to be 400 x 600 pixels (width x height).
```
 $.ig.loader(function () {
  // Create a basic igSplitter control
  $("#splitter").igSplitter({
      width: 400,
      height: 600 });
  });
```

Adding igSplitter in ASP.NET MVC – Procedure

Introduction

This procedure guides you through the steps of adding an igSplitter with basic functionality to an ASP.NET MVC view. The example uses the ASP.NET MVC syntax together with the required Loader configuration.

Preview

The following screenshot is a preview of the final result.

Steps

The following steps demonstrate how to add a basic igSplitter control to an ASP.NET MVC application.

Add references to required resources.
1. Organize the required files.
  
  A. Add the jQuery, jQueryUI, and Modernizr JavaScript resources to a folder named Scripts in the directory where your web page resides.
  
  B. Add the Ignite UI for jQuery CSS files to a folder named Content/ig (For details, see the Styling and Theming Ignite UI for jQuery topic).
  
  C. Add the Ignite UI for jQuery JavaScript files to a folder named Scripts/ig in your web site or application (For details, see the Using JavaScript Resources in Ignite UI for jQuery topics).
2. Add the references to the required JavaScript libraries.Add references to the jQuery, jQuery UI and Modernizr libraries to the head section of your page:
  
  In HTML:
```
 <script  type="text/javascript" src="Scripts/jquery.js"></script>
 <script  type="text/javascript" src="Scripts/jquery-ui.js"></script>
 <script  type="text/javascript" src="Scripts/modernizr.js"></script>
```
3. Add a reference to igLoader.Include the igLoader script in the page:
  
  In HTML:
```
 <script  type="text/javascript" src="Scripts/ig/infragistics.loader.js"></script>
```
4. Adding the Loader MVC helper configuration for igSplitter.
  
  Add the following code to your ASP.NET MVC view.
  
  In ASPX:
```
 @(Html.Infragistics()
     .Loader()
     .ScriptPath("http://localhost/ig_ui/js/")
     .CssPath("http://localhost/ig_ui/css/")
     .Render()
 )
```

Add the igSplitter control.

Add an HTML element to host igSplitter.

Add an HTML div element to host igSplitter on the HTML page.

In HTML:

 <div id="splitter">
     <div>
         First panel with grid example: <br />
         <div id="grid"></div>
     </div>
     <div>
         Second panel with html editor example: <br />
         <div id="htmlEditor"></div>
     </div>
 </div>

Instantiate igSplitter. The following code creates an instance of the igSplitter control without specifying its container’s size.

 @(Html.Infragistics()
     .Splitter()
     .ID("splitter")
     .Height("300px")
     .Width("900px")
     .SplitterPanelSettings(p =>
     {
         p.AddPanel().Size("300px").Min("30px").Max("300px");
         p.AddPanel().Size("500px").Collapsible(true);
     })
     .Render()
 )

In most cases, you might want to specify the size of the instance. The following code configures the igSplitter container to be 400 x 600 pixels (width x height).

 @(Html.Infragistics()
     .ID("splitter")
     .Height("400")
     .Width("600")
     .Render()
 )

Adding igSplitter using TypeScript – Procedure

Introduction

The sample will demonstrate how to use the vertical igSplitter control to manage page's layout in TypeScript. The first container contains a igTree control with countries and continents defined as TypeScript classes. When a node is clicked, the description for the selected item is shown in the right panel.

Preview

The following screenshot is a preview of the final result.

Steps

The following steps demonstrate how to add a basic igSplitter control using TypeScript.

Add references to required resources.

Include the Ignite UI for jQuery theme and structural files:

In HTML:

 <!-- Ignite UI for jQuery Required Combined CSS Files -->
 <link href="http://cdn-na.infragistics.com/igniteui/2020.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
 <link href="http://cdn-na.infragistics.com/igniteui/2020.1/latest/css/structure/infragistics.css" rel="stylesheet" />

Add the JavaScript libraries (modernizr is optional):

In HTML:

 <!-- JavaScript Library Dependencies -->
 <script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

Include Ignite UI for jQuery scripts. Preferably use a custom download, but you can also check "Using JavaScript Resources in Ignite UI for jQuery" topic for other methods.

In HTML:

 <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
 <script src="http://cdn-na.infragistics.com/igniteui/2020.1/latest/js/infragistics.core.js"></script>
 <script src="http://cdn-na.infragistics.com/igniteui/2020.1/latest/js/infragistics.lob.js"></script>

Add reference path to where the TypeScript file for your application is located or external resources:

In HTML:

 <script src="./TypeScript/sampleApp.js"></script>

In HTML:

 <script src="http://www.igniteui.com/data-files/continents-with-countries-and-cities.js"></script>
 <script src="http://www.igniteui.com/TypeScriptSamples/splitter/typescript.js"></script>

Add the igSplitter control.

Add an HTML element to host igSplitter.

Add an HTML div element to host igSplitter on the HTML page.

In HTML:

 <div id="splitter">
     <div style="overflow: auto">
         <ul id="tree"></ul>
     </div>
     <div><p>Select a destination from tree.</p></div>
 </div>

Add data source

 var continentsWithCountries = [{
     "Text": "Europe",
     "Description": "Europe is..",
     "Countries": [{ "Text": "Bulgaria", "Description": "Bulgaria, officially .." }]
 }, {
     "Text": "Asia",
     "Description": "Asia is the world's largest..",
     "Countries": [{ "Text": "Japan", "Description": "Japan is an island.." }, { .. }]
 }, {
     "Text": "North America",
     "Description": "North America..",
     "Countries": [{ "Text": "United States", "Description": "The United States.." }]
 }];

Add ts implementation code and include the reference paths to the Ignite UI for jQuery and jQuery type definitions for TypeScript:

In TypeScript:

 /// <reference path="http://www.igniteui.com/js/typings/jquery.d.ts" />
 /// <reference path="http://www.igniteui.com/js/typings/jqueryui.d.ts" />
 /// <reference path="http://www.igniteui.com/js/typings/igniteui.d.ts" />
 declare var continentsWithCountries;

 $(function () {
     $("#splitter").igSplitter({
         height: "300px",
         panels: [{ size: 160, min: 100, max: 250 }]
     });
     $("#tree").igTree({
         dataSource: continentsWithCountries,
         bindings: {
             textKey: "Text",
             valueKey: "Text",
             childDataProperty: "Countries"
         }
     });
     $("#tree").on("igtreeselectionchanged", function (sender, eventArgs) {
         var node = eventArgs.selectedNodes[0];
         if (node.data.Description) {
             (<JQuery>$("#splitter").igSplitter("secondPanel")).html(node.data.Description);
         } else {
             (<JQuery>$("#splitter").igSplitter("secondPanel")).html("No information found.");
         }
     });
 });

Ignite UI | Help Topics

Adding igSplitter

Topic Overview

Purpose

Required background

In this topic

Adding igSplitter – Conceptual Overview

Adding igSplitter summary

Requirements

Steps

Adding igSplitter in JavaScript – Procedure

Introduction

Preview

Steps

Adding igSplitter in ASP.NET MVC – Procedure

Introduction

Preview

Steps

Adding igSplitter using TypeScript – Procedure

Introduction

Preview

Steps

Related Content

Topics

Samples