I will have some cells in a grid that end up being very large sometimes due to the data being placed in them. I would like to be able to have a max row height, so that I can consistently view X amount of rows (5 in my case) in a pageable grid without scrolling on the rows, but then be able to scroll inside individual cells for the larger strings like comments.
I can't really see anything in to documentation or examples that cover this. Would anyone else have ideas as how to go about this?
I can't really see anything in to documentation or examples that cover this. Would anyone else have ideas as how to go about this?
4 Answers, 1 is accepted
0
Hello Keith,
Dimo
Telerik
Table cells do not have the same behavior as block-level elements and do not support scrolling.
You need to use a column template with a scrollable <div> with a height style inside.
http://docs.kendoui.com/api/web/grid#configuration-columns.template
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Keith
Top achievements
Rank 1
answered on 25 Sep 2013, 07:47 PM
I tried out the template, but I don't see it working. It ends up causing errors, and the table looses all other functionality. Take into consideration that I'm initializing the Grid from a dynamically generated <table> element. So I'm not adding a "field" attribute to the columns, since I don't know what the would be on the object being created by kendo Grid.
$MyTable.kendoGrid({
height: 430,
sortable: true,
selectable: "cell",
navigatable:true,
resizable: true,
reorderable: true,
columnResizeHandleWidth: 10,
pageable: true,
columns: [ {//If I comment out this option, all other features will work.
//No "field" attribute, since I do not know what the field would be.
template: function(dataItem) {
//Debuggin shows that dataItem is an object with an undefined set to the value iof the cells inner html.
// i.e. (dataItem.undefined === "MyReallyBigValue") == true
return '<div style="height:25px;">' + html + '</div>';//Adding the height, and even speciically setting the overflow value does not work here.
}
}],
dataSource: {
pageSize: 5
}
});
Edit: spelling
$MyTable.kendoGrid({
height: 430,
sortable: true,
selectable: "cell",
navigatable:true,
resizable: true,
reorderable: true,
columnResizeHandleWidth: 10,
pageable: true,
columns: [ {//If I comment out this option, all other features will work.
//No "field" attribute, since I do not know what the field would be.
template: function(dataItem) {
//Debuggin shows that dataItem is an object with an undefined set to the value iof the cells inner html.
// i.e. (dataItem.undefined === "MyReallyBigValue") == true
return '<div style="height:25px;">' + html + '</div>';//Adding the height, and even speciically setting the overflow value does not work here.
}
}],
dataSource: {
pageSize: 5
}
});
Edit: spelling
0
Accepted
Hello Keith,
Regards,
Dimo
Telerik
If you are creating the Grid from a rendered <table>, you have two options:
1. You can include the scrollable <div> directly in the table cell content
or
2. Define a column template as data attribute of the header cell
<
th
data-field
=
"fieldname"
data-template="<div
style
=
'height:50px;overflow:scroll'
>#:
fieldname
#</
div
>">
column title
</
th
>
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Accepted

Keith
Top achievements
Rank 1
answered on 26 Sep 2013, 03:23 PM
I've gone with creating the div inside the jsp.
/*snip*/
<td>
<div style=" text-wrap: normal; overflow-x: hidden; overflow-y: auto; height:50px;">
${column.value}
</div>
</td>
It's working beautifully:) You can see I set it to only show the vertical scroll bar, and only if needed, which frees up more cell space at the bottom and allows text wrapping for long single lines of text.
Thank you for you help.
/*snip*/
<td>
<div style=" text-wrap: normal; overflow-x: hidden; overflow-y: auto; height:50px;">
${column.value}
</div>
</td>
It's working beautifully:) You can see I set it to only show the vertical scroll bar, and only if needed, which frees up more cell space at the bottom and allows text wrapping for long single lines of text.
Thank you for you help.