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.
Many thanks for your help, it was very useful. I got it working and have attached the the relevant JavaScript.
I want to clarify few things.
- Lets start with this that I got different experience from your code snippet than your screenshot. I'm sending you my screenshot, where the scroll is placed where you want to be.
- If you want the grid to have scrollbar, then you have to fix its height, otherwise how the grid will know how tall it should be and where it should start to rely on a scroll?
- If you don't want to set fixed height on the grid, then you can set fixed height on the splitter. The effect will be the same, because the splitter in this case is wrapper of the grid.
- If you do not define the height of the html element, by default it will size as its content allows. If the content is bigger than the browser window height, then the scrollbar will be activate to allow you to see the whole content.
Hope this explains how the desired layout can be achieved.