I have an igsplitter, which has an iggrid as the left child and some html content as the right child. I want the igsplitter to take the available browser height (and width). As the browser is resized, the igspillter should resize to take the available space. When the content does not fit on the browser's page, the vertical scrollbar should appear on the iggrid.
I've tried a number of things, but am I'm having problems hitting on the right solution. Below is what I have so far. Any help you could give would be great.
<!DOCTYPE html>
<html>
<head>
<!-- Ignite UI Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.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>
<!-- Ignite UI Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.lob.js"></script>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#splitter{
</style>
<script type="text/javascript">
var nwCustomersWithOrders = [
{ "ID": "ANTON1", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTON2", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTON3", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTON4", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTON5", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTON6", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTON7", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTON8", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTON9", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTON0", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONA", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONB", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONC", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTOND", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONE", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONF", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONG", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONH", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONI", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONJ", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONK", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONL", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONM", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONN", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONO", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONP", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONQ", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONR", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONS", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONT", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONU", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONV", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONW", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONX", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONY", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },
{ "ID": "ANTONZ", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" }
];
</script>
</head>
<body>
<div id="splitter" style="height:100%;border:0;">
<div>
<table id="mainGrid"></table>
</div>
<label>Label:</label> Value<br />
<script>
$(function () {
$("#splitter").igSplitter({ height: "100%", orientation: "vertical", panels: [{ min: 250, collapsed: false, collapsible: false }, { min: 250, size: 350, collapsed: false, collapsible: false }] });
$("#mainGrid").igGrid({
width: "100%",
height: "100%",
autoGenerateColumns: false,
dataSource: nwCustomersWithOrders,
columns: [{
headerText: "ID",
key: "ID"
}, {
headerText: "Company Name",
key: "CompanyName"
headerText: "Contact Name",
key: "ContactName"
headerText: "Contact Title",
key: "ContactTitle"
}],
features: [{
name: "Selection",
mode: "row",
rowSelectionChanged: function (ui, args) {
}]
});
</body>
</html>
Hi Tory Eneboe,
I'm not pretty sure what do you try to achieve. Could you please send me step to reproduce, where the desired behavior is described in details? Also, when we are talking of layout issue, screenshots with instructions (like current and expected behavior) will be appreciated.
Keep in mind that attached file is better option than pasted code, because it lose its format.
Hi Petko,
I have attached a screenshot, which hopefully will help you understand my issue better. My grid contains a lot of rows, which requires vertical scrolling. Currently, the grid makes itself big enough to show all rows. As a result, the scrollbar appears on the browser window.
My desired behavior is for the grid to take only the space available to it, and if all of the rows can't be displayed, then the scrollbar would appear on the grid itself (instead of on the browser window). I don't want to fix the height of the igGrid to say 500px. Instead, I want the igGrid height to be 100% of the space available to it.
Does this help?
Tory.