How-to add horizontal scroll bar to jquery.bootgrid

Question

I'm using jquery bootgrid to display some data (http://www.jquery-bootgrid.com/), could anyone help to add horizontal scroll bar to this grid?

I tried to put it into div with overflow-x style, but it scrolls navigation and paging together.

If it not possible, could you recommend free grids for ASP .NET MVC with has this feature?

score 3 · Accepted Answer · answered Jun 19 '16 at 07:23

3

Try to set the CSS class bootgrid-table with these :

display: block;
width: 50px;
overflow-x: scroll;

I set the width to 50px for a test, but it maybe could be left to what it is, 100%. Though, due to data collapsing with "...", not sure it would work appart removing this too.

answered Jun 19 '16 at 07:23

Master DJon

1,899
2
19
30

Thanks a lot! I removed width: 50px; аnd all work smooth! – Yuiry.Vasilyev Jun 19 '16 at 08:41

score 3 · Answer 2 · answered Aug 20 '16 at 05:57

As you are already using Bootstrap, you can add the table-responsive class to the outer div of the table element

<div class="table-responsive">
   <table id="myTable" class="table table-bordered table-condensed table-hover">


   </table>

</div>


<script type="text/javascript">

$(function(){
  var dt = $('#myTable').bootgrid({
          selection: true,
          rowSelect: true,
          converters: {},
        });
});

</script>

Fiddle: https://jsfiddle.net/u5w4w24s/1/

How-to add horizontal scroll bar to jquery.bootgrid

2 Answers2