Available in the OSS Version
Splitter - Splitter API and Events
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
First Panel
Second Panel
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
This sample demonstrates how to handle events in the Splitter control and API usage.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<!-- Used to style the API Viewer and Explorer UI -->
<link href="/css/apiviewer.css" rel="stylesheet" type="text/css" />
<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>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
<!-- Used to add markup and provide logging
functionality for the API Explorer and API Viewer UI -->
<script src="/js/apiviewer.js"></script>
</head>
<body>
<div id="splitter">
<div>First Panel</div>
<div>Second Panel</div>
</div>
<div class="api-explorer">
<fieldset>
<legend>Splitter API settings</legend>
<input type="button" id="igButtonSplitterFirstPanelCollapse" value="Collapse First Panel" style="margin-bottom: 20px;" />
<input type="button" id="igButtonSplitterFirstPanelExpand" value="Expand First Panel" style="margin-bottom: 20px;" />
<input type="button" id="igButtonSplitterSecondPanelCollapse" value="Collapse Second Panel" style="margin-bottom: 20px;" />
<input type="button" id="igButtonSplitterSecondPanelExpand" value="Expand Second Panel" style="margin-bottom: 20px;" />
<br />
Change content with <input type="text" id="firstPanelText"/> at the <input type="button" id="igButtonSplitterFirstPanel" value="First Panel" style="margin-bottom: 20px;" />
<br />
Change content with <input type="text" id="secondPanelText"/> at the <input type="button" id="igButtonSplitterSecondPanel" value="Second Panel" style="margin-bottom: 20px;" />
<br />
Enter new panel size <input type="text" id="firstPanelSize"/> e.g. 100px <input type="button" id="igButtonSplitterFirstPanelSize" value="First Panel" style="margin-bottom: 20px;" />
<br />
Enter new panel size <input type="text" id="secondPanelSize"/> e.g. 100px <input type="button" id="igButtonSplitterSecondPanelSize" value="Second Panel" style="margin-bottom: 20px;" />
</fieldset>
</div>
<br />
<div class="api-viewer"></div>
<script>
$(function () {
// Used to show output in the API Viewer at runtime,
// defined in external script 'apiviewer.js'
var apiViewer = new $.ig.apiViewer();
/*----------------- Method & Option Examples -------------------------*/
// process events of buttons
$('#igButtonSplitterFirstPanelCollapse').on({
click: function () {
$("#splitter").igSplitter("collapseAt", 0);
}
});
$('#igButtonSplitterSecondPanelCollapse').on({
click: function () {
$("#splitter").igSplitter("collapseAt", 1);
}
});
$('#igButtonSplitterFirstPanelExpand').on({
click: function () {
$("#splitter").igSplitter("expandAt", 0);
}
});
$('#igButtonSplitterSecondPanelExpand').on({
click: function () {
$("#splitter").igSplitter("expandAt", 1);
}
});
$('#igButtonSplitBarButtons').on({
click: function () {
$("#splitter").igSplitter("splitBar").children("div").remove();
}
});
$('#igButtonSplitterFirstPanel').on({
click: function () {
$("#splitter").igSplitter("firstPanel").text($("#firstPanelText").val());
}
});
$('#igButtonSplitterSecondPanel').on({
click: function () {
$("#splitter").igSplitter("secondPanel").text($("#secondPanelText").val());
}
});
$('#igButtonSplitterFirstPanelSize').on({
click: function () {
$("#splitter").igSplitter("setFirstPanelSize", $("#firstPanelSize").val());
}
});
$('#igButtonSplitterSecondPanelSize').on({
click: function () {
$("#splitter").igSplitter("setSecondPanelSize", $("#secondPanelSize").val());
}
});
/*----------------- Event Examples -------------------------*/
$("#splitter").on("igsplitterresizestarted", function (evt, ui) {
var message = "igsplitterresizestarted";
apiViewer.log(message);
});
$("#splitter").on("igsplitterresizing", function (evt, ui) {
var message = "igsplitterresizing";
apiViewer.log(message);
});
$("#splitter").on("igsplitterresizeended", function (evt, ui) {
var message = "igsplitterresizeended";
apiViewer.log(message);
});
$("#splitter").on("igsplittercollapsed", function (evt, ui) {
var message = "igsplittercollapsed panel: " + ui.index;
apiViewer.log(message);
if (ui.index === 0) {
$("#igButtonSplitterFirstPanelExpand").attr("disabled", false);
$("#igButtonSplitterFirstPanelCollapse").attr("disabled", true);
$("#igButtonSplitterSecondPanelCollapse").attr("disabled", true);
} else {
$("#igButtonSplitterSecondPanelExpand").attr("disabled", false);
$("#igButtonSplitterFirstPanelCollapse").attr("disabled", true);
$("#igButtonSplitterSecondPanelCollapse").attr("disabled", true);
}
});
$("#splitter").on("igsplitterexpanded", function (evt, ui) {
var message = "igsplitterexpanded panel: " + ui.index;
apiViewer.log(message);
if (ui.index === 0) {
$("#igButtonSplitterFirstPanelExpand").attr("disabled", true);
$("#igButtonSplitterFirstPanelCollapse").attr("disabled", false);
$("#igButtonSplitterSecondPanelCollapse").attr("disabled", false);
} else {
$("#igButtonSplitterSecondPanelExpand").attr("disabled", true);
$("#igButtonSplitterFirstPanelCollapse").attr("disabled", false);
$("#igButtonSplitterSecondPanelCollapse").attr("disabled", false);
}
});
/*----------------- Instantiation -------------------------*/
$("#splitter").igSplitter({ height: 300, panels: [{ collapsible: true }, { collapsible: true}] });
$("#igButtonSplitterFirstPanelExpand").attr("disabled", true);
$("#igButtonSplitterSecondPanelExpand").attr("disabled", true);
});
</script>
</body>
</html>