This is a migrated thread and some comments may be shown as answers.

Individual Cell Scrolling

4 Answers 683 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Keith
Top achievements
Rank 1
Keith asked on 25 Sep 2013, 12:09 AM
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?

4 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 25 Sep 2013, 01:22 PM
Hello Keith,

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

Regards,
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
0
Accepted
Dimo
Telerik team
answered on 26 Sep 2013, 07:59 AM
Hello Keith,

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>

Regards,
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.
Tags
Grid
Asked by
Keith
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Keith
Top achievements
Rank 1
Share this question
or