Hi,
I have grid with scroll property set to true .
horizontal scroll is working fine when we have data in the grid (Records , PFA ) .
when I remove all records (Empty grid) , then horizontal scroll is dispersing so I am not able to see some of the column header(PFA).
I have attached screen shot for both scenario.
In my case, I need to show horizontal scroll bar for grid without data , so that user can see all columns in grid by scrolling.
Please help me out
Thanks in advance
I have grid with scroll property set to true .
horizontal scroll is working fine when we have data in the grid (Records , PFA ) .
when I remove all records (Empty grid) , then horizontal scroll is dispersing so I am not able to see some of the column header(PFA).
I have attached screen shot for both scenario.
In my case, I need to show horizontal scroll bar for grid without data , so that user can see all columns in grid by scrolling.
Please help me out
Thanks in advance
3 Answers, 1 is accepted
0
Hi Ambica,
Regards,
Iliana Nikolova
Telerik
The reason for the observed behavior is that browsers show a scrollbar for a table if there is at least a single row in it. As a solution for your scenario I can suggest in the dataBound event to add an empty row to the grid. For example:
$("#grid").kendoGrid({ //.... dataBound: dataBound}); function dataBound(e) { if (this.dataSource.view().length == 0) { //insert empty row var colspan = this.thead.find("th").length; var emptyRow = "<tr><td colspan='" + colspan + "'></td></tr>"; this.tbody.html(emptyRow); //workarounds for IE lt 9 this.table.width(800); $(".k-grid-content").height(2 * kendo.support.scrollbar()); }}Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Juraj
Top achievements
Rank 1
Rank 1
answered on 27 Aug 2013, 01:08 PM
Hi Iliana,
I tried your workaround, but it doesn't work in Internet Explorer. I have IE 10, but I also tried IE 9 mode. In Firefox and Chrome the workaround works fine. Can you help me finding out the solution, that works also for Internet Explorer?
I tried your workaround, but it doesn't work in Internet Explorer. I have IE 10, but I also tried IE 9 mode. In Firefox and Chrome the workaround works fine. Can you help me finding out the solution, that works also for Internet Explorer?
0
Hi Juraj,
Iliana Nikolova
Telerik
I modified the solution and now it should work in all major browsers. For your convenience here is a simple jsBin example which demonstrates the suggested approach in action.
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!