Hi I am having some issues with a grid within a splitter. I have three panes and the grid is in the middle. If i open and close either pane the grid will re size to stay visible without a scroll bar. but if you manually re size a column and then open a splitter it does not re size like it did before. Is there something im missing? here is a JSbin that shows whats happening
http://jsbin.com/fuhuvecisova/1/edit
if that doesnt work here is the code that does it.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/splitter/index">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="vertical">
<div id="top-pane">
<div id="horizontal" style="height: 100%; width: 100%;">
<div id="left-pane">
<div class="pane-content">
<h3>Inner splitter / left pane</h3>
<p>Resizable and collapsible.</p>
</div>
</div>
<div id="center-pane">
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
resizable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "ContactName",
title: "Contact Name",
width: 200
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script>
</div>
</div>
<div id="right-pane">
<div class="pane-content">
<h3>Inner splitter / right pane</h3>
<p>Resizable and collapsible.</p>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#vertical").kendoSplitter({
orientation: "vertical",
panes: [
{ collapsible: false },
{ collapsible: false, size: "100px" },
{ collapsible: false, resizable: false, size: "200px" }
]
});
$("#horizontal").kendoSplitter({
panes: [
{ collapsible: true, size: "120px" },
{ collapsible: false, },
{ collapsible: true, size: "120px" }
]
});
});
</script>
<style scoped>
#vertical {
height: 380px;
width: 700px;
margin: 0 auto;
}
#middle-pane { background-color: rgba(60, 70, 80, 0.10); }
#bottom-pane { background-color: rgba(60, 70, 80, 0.15); }
#left-pane, #center-pane, #right-pane { background-color: rgba(60, 70, 80, 0.05); }
.pane-content {
padding: 0 10px;
}
</style>
</div>
</body>
</html>
http://jsbin.com/fuhuvecisova/1/edit
if that doesnt work here is the code that does it.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/splitter/index">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="vertical">
<div id="top-pane">
<div id="horizontal" style="height: 100%; width: 100%;">
<div id="left-pane">
<div class="pane-content">
<h3>Inner splitter / left pane</h3>
<p>Resizable and collapsible.</p>
</div>
</div>
<div id="center-pane">
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
resizable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "ContactName",
title: "Contact Name",
width: 200
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script>
</div>
</div>
<div id="right-pane">
<div class="pane-content">
<h3>Inner splitter / right pane</h3>
<p>Resizable and collapsible.</p>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#vertical").kendoSplitter({
orientation: "vertical",
panes: [
{ collapsible: false },
{ collapsible: false, size: "100px" },
{ collapsible: false, resizable: false, size: "200px" }
]
});
$("#horizontal").kendoSplitter({
panes: [
{ collapsible: true, size: "120px" },
{ collapsible: false, },
{ collapsible: true, size: "120px" }
]
});
});
</script>
<style scoped>
#vertical {
height: 380px;
width: 700px;
margin: 0 auto;
}
#middle-pane { background-color: rgba(60, 70, 80, 0.10); }
#bottom-pane { background-color: rgba(60, 70, 80, 0.15); }
#left-pane, #center-pane, #right-pane { background-color: rgba(60, 70, 80, 0.05); }
.pane-content {
padding: 0 10px;
}
</style>
</div>
</body>
</html>
3 Answers, 1 is accepted
0
Hello Michael,
When there are widthless columns in the Grid, they are able to shrik and expand together with the Grid. As soon as you resize a column ("A"), however, the Grid table receives a pixel width, which ensures that all other columns do not change their width during and after the resize of "A". That's why the Grid table stops resizing together with the Grid.
The observed behavior is by design. Please choose which features and behaviors are more important to you and what you are ready to sacrifice. Let me know if you need more information. Here is some documentaiton how the Grid behaves.
http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#column-widths
http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#scrolling
On a side note, having nested scrollbars is not convenient for end users. Please disable the Splitter pane scrollbars and use only the Grid scrollbars. The Grid must be 100% high in this case.
http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#making-the-grid-100-high-and-auto-resizable
You don't have to call the Grid's resize() method in this case, because the Splitter will do that.
http://jsfiddle.net/dimodi/76k8W/4/
Regards,
Dimo
Telerik
When there are widthless columns in the Grid, they are able to shrik and expand together with the Grid. As soon as you resize a column ("A"), however, the Grid table receives a pixel width, which ensures that all other columns do not change their width during and after the resize of "A". That's why the Grid table stops resizing together with the Grid.
The observed behavior is by design. Please choose which features and behaviors are more important to you and what you are ready to sacrifice. Let me know if you need more information. Here is some documentaiton how the Grid behaves.
http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#column-widths
http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#scrolling
On a side note, having nested scrollbars is not convenient for end users. Please disable the Splitter pane scrollbars and use only the Grid scrollbars. The Grid must be 100% high in this case.
http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#making-the-grid-100-high-and-auto-resizable
You don't have to call the Grid's resize() method in this case, because the Splitter will do that.
http://jsfiddle.net/dimodi/76k8W/4/
Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Michael
Top achievements
Rank 1
Rank 1
answered on 21 Aug 2014, 02:41 PM
Im not sure that's 100% expected because in the example I gave you if you alter one of the columns with width already one of the columns with no width doesn't get set and should expand and contract but doesn't. But if that's expected ill try and work around it.
0
Hello Michael,
The Grid table receives a width during column resize, no matter which column you resize. This is the only way to ensure that all columns, except the one that is resized, will persist their widths. So yes, the observed behavior is expected and by design (when scrolling is enabled).
Regards,
Dimo
Telerik
The Grid table receives a width during column resize, no matter which column you resize. This is the only way to ensure that all columns, except the one that is resized, will persist their widths. So yes, the observed behavior is expected and by design (when scrolling is enabled).
Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!