How to show horizontal scroll bar for kendo grid without data

[Ambica]

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   

[Iliana Dyankova]

Hi Ambica,

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());
   }
}

Regards,
Iliana Nikolova
Telerik

[Juraj]

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?

[Iliana Dyankova]

Hi Juraj,

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.
 

Regards,
Iliana Nikolova
Telerik