Available in the OSS Version
Tile Manager - Collapsible Splitter
This sample demonstrates the expand/collapse capabilities of the Splitter control.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
The control is used by the tile manager to enhance the layout manipulation experience. The expand and collapse behavior allows fast switching of visibility for related tiles and is very useful for smaller devices. The sample also demonstrates how to easily customize the expand and collapse functionality via additional CSS.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<!-- Modernizr/jQuery/jQuery UI -->
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="/data-files/js-controls.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
<style type="text/css">
#dashboard {
border: 1px solid #bcbcbc;
}
#dashboard .ig-layout-item {
z-index: 2;
}
.minimized-state-header {
font-size: 16px;
margin-bottom: 6px;
}
.minimized-state-body {
font-size: 14px;
}
.maximized-state-header {
font-size: 18px;
margin-bottom: 8px;
}
.maximized-state-body {
font-size: 16px;
}
.ui-igtilemanager.ui-igsplitter .ui-igsplitter-splitbar-vertical,
.ui-igsplitter-splitbar-vertical {
width: 6px;
}
.ui-igtilemanager.ui-igsplitter .ui-igsplitter-collapse-single-button,
.ui-igsplitter-collapse-single-button {
z-index: 1;
width: 25px;
height: 25px;
border: 1px solid #bcbcbc;
border-radius: 20px;
margin-left: -11px;
}
.ui-igsplitter-collapse-single-button .ui-icon-triangle-1-w {
background: url(/images/samples/tile-manager/collapsible-splitter/left-arrow-gray.svg) 0px 0px/16px 16px !important;
}
.ui-igsplitter-collapse-single-button.ui-state-hover .ui-icon-triangle-1-w {
background-image: url(/images/samples/tile-manager/collapsible-splitter/left-arrow-white.svg) !important;
}
.ui-igsplitter-collapse-single-button .ui-icon-triangle-1-e {
background: url(/images/samples/tile-manager/collapsible-splitter/right-arrow-gray.svg) 0px 0px/16px 16px !important;
}
.ui-igsplitter-collapse-single-button.ui-state-hover .ui-icon-triangle-1-e {
background-image: url(/images/samples/tile-manager/collapsible-splitter/right-arrow-white.svg) !important;
}
.ui-igsplitter-collapse-single-button .ui-icon:before,
.ui-igsplitter-collapse-single-button.ui-state-hover .ui-icon:before {
content: '';
}
body .ui-igsplitter-splitbar-vertical:last-child .ui-igsplitter-collapse-single-button {
display: none;
}
</style>
<div id="dashboard">
</div>
<script type="text/javascript">
$(function () {
$('#dashboard').igTileManager({
width: "100%",
height: "500px",
columnWidth: 200,
columnHeight: 200,
marginLeft: 20,
marginTop: 20,
animationDuration: 300,
dataSource: controls,
splitterOptions: {
enabled: true,
collapsed: false,
collapsible: true
},
rendered: function (evt, ui) {
ui.owner.maximize(ui.owner.minimizedTiles().first());
},
minimizedState: "<h3 class='minimized-state-header'>${name}</h3><p class='minimized-state-body'>${description}</p>",
maximizedState: "<h3 class='maximized-state-header'>${name}</h3><p class='maximized-state-body'>${description}</p>"
});
});
</script>
</body>
</html>
var controls = [
{
name: "igGrid",
description: "The igGrid is the fastest jQuery grid on the market and provides line of business features, touch support, and responsive web design features. You can bind the igGrid to a variety of data sources including JSON, XML, HTML tables, .NET collections, and even .NET DataTables. The igGrid works with popular open source libraries including KnockoutJS, History.js, JsRender, and Bootstrap."
},
{
name: "igHierarchicalGrid",
description: "The igHierarchicalGrid is built on top of the fastest jQuery grid on the market, the igGrid. It adds the capability to display hierararchical data sets. You can bind the igHierarchicalGrid to a variety of data sources including JSON, XML, .NET collections, and even .NET DataSets. You can use the load on demand functionality to dynamically download only the data required for the current view."
},
{
name: "igTreeGrid",
description: "The igTreeGrid control is a jQuery widget that displays data in a tree-like tabular structure. The control presents hierarchical data similar to the igHierarhicalGrid control, but the tree grid displays data all in the same columns. Rendering hierarchal data all with the same columns allows the tree grid to have superior render speeds while maintaining low memory and low DOM footprints. Further, the igTreeGrid also supports advanced interactive features that operate in the same way as the igGrid."
},
{
name: "igDataChart",
description: "The igDataChart is an HTML5 chart control built with performance in mind. It can render very large data sets and includes tooltips, crosshairs, gradients, highlighting, and animation functionality."
},
{
name: "igPieChart",
description: "The igPieChart is a charting control for rendering pie charts in HTML5 Web applications and sites. It uses the new HTML5 canvas tag to plot pie charts on web pages. The main features of igPieChart include legend, tooltips based on templates, controlling pie radius, controlling pie label position, start angle, sweep direction, exploded slices and distance from center for exploded slices. See the complete list of samples in the menu."
},
{
name: "igDoughnutChart",
description: "The igDoughnutChart displays data similar to a pie chart and can display multiple sets of data around a common center. You can create a legend for the igDoughnutChart and also define categories, labels, and tooltips."
},
{
name: "igFunnelChart",
description: "The igFunnelChart control is similar to the igPieChart in that it displays values associated with different categories. The igFunnelChart differs because the sum of the displayed values is not necessarily the total of a larger entity. Funnel slices are typically displayed sorted by value, either largest to smallest or in reverse order. The igFunnelChart supports slice selection, tooltips, and bezier curver rendering. See the complete list of samples in the menu."
},
{
name: "igRadialGauge",
description: "The igRadialGauge control is a data visualization tool capable of displaying a gauge containing a number of visual elements, such as a scale with tick marks and labels, a needle, and a number of ranges. Create a scale by supplying minimumValue and maximumValue values and a needle can point to a value by setting the value property. The gauge also supports ranges, which provide visual cues for the scale. See the complete list of samples in the menu."
},
{
name: "igSparkline",
description: "The Sparkline control is a data-intense, design-simple graphic that allows end users to spot trends, variations and patterns in data in a clear and compact representation. It supports the following chart types: line, column, area, and win-loss, and displays more details using markers, tooltips, normal ranges, and trend lines. See the complete list of samples in the menu."
},
{
name: "igHtmlEditor",
description: "The igHtmlEditor control is a jQuery HTML editor control that features standard HTML editing capabilities. Formatting options include font face, font size, text and image alignment and link and table support. You can customize the toolbars and buttons to add additional functionality to the interface. See the complete list of samples in the menu."
},
{
name: "igTree",
description: "The igUpload is an upload control that allows you to upload any type of files, sending them from the browser to the server. It handles single uploads (default) or simultaneous, multiple file uploads. With server-side configuration, the igUpload displays progress information during the file upload operation."
},
{
name: "igNotifier",
description: "Notification widget offers more informative feedback about system state. It can be bound to the igValidator and the igEditors widgets. It has 4 different message states: success, error, warning and info, which can be shown either in inline or popover mode, while auto mode chooses those automatically. The popover mode, on the other hand, also has 4 different directions in which it can be shown - top, left, right or bottom. If there is not enough room for it to be shown in the chosen direction, though, it will be shown in the next available direction, following the order: top > left > right > bottom."
}
];