1

I don't know nothing about bootstrap and how to make a grid using bootstrap. All i know is how to make jqgrid and currently I'm using jqgrid to my current project. I tried to read about basic bootstrap in w3school and I don't see on how to make a grid I mean is like a jqgrid. Is any article or tutorial about making a grid using a bootstrap?. Share it please. Thanks.

UPDATE

I am using an old jqgrid v 4.3.3

  • 1
    Version 4.3.3 is more as 4 years old. It's out of any support and it's practically dead. There are now two main forks of jqGrid: [free jqGrid](https://github.com/free-jqgrid/jqGrid) (the current version is 4.13.4), which I develop, and commercial [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) (the current version is 5.1.1). I strictly recommend you to choose one from the forks and to upgrade jqGrid to the latest version from the fork. – Oleg Aug 30 '16 at 10:00
  • @Oleg I would like to ask. If I change from 4.3.3 to any of your suggestion my project need to do changes also or not? Thx for the reply –  Aug 31 '16 at 00:51
  • I use 4.x.y conversion in versions of free jqGrid only because I try to hold maximal compatibility with old (4.x.y) versions of jqGrid. Nevertheless there are no grantee, that no changes are required. First of all you should just **try it**. You can load free jqGrid directly from CDN. See [the wiki article](https://github.com/free-jqgrid/jqGrid/wiki/Access-free-jqGrid-from-different-CDNs). – Oleg Aug 31 '16 at 04:59
  • @Oleg Okay thanks but i think i stick in my current grid because my co-workers or the company i am working at will get angry to me if i try to change it. –  Aug 31 '16 at 05:11
  • 1
    It's your choice. You should compare the risk of holding old version with the risk of upgrading. Even if you don't change any line of your code the web browsers will be permanently changed. Look at [the old answer](http://stackoverflow.com/a/10621951/315935), which describes the problems after one update of Chrome browser. The width calculation of jqGrid had to be fixed in version 4.3.3. Thus you have not the problem, but close problems could be in the future after publishing of a new version of web browsers. The last version of jqGrid will be fixed if it's required, but not the version 4.3.3. – Oleg Aug 31 '16 at 05:28
  • @Oleg Thanks for the concern. Maybe if I try to learn on my own I use the latest versions –  Aug 31 '16 at 05:30

4 Answers4

1

jqgrid and bootstrap grid is totally different thing, but you can apply bootstrap grid is jqgrid, but it doesn't make sense.
=========================================
jqgid
jqgrid is kind of functionality in which you pass json data in url, and it automatically create table structure(called jqgrid), in which it provide searching, sorting, grouping functionality. jqgrid examples you found here

bootstrap grid

webpage is divided into 12 parts, and according to that how you allocate space is something like bootstrap grid, like col-md-4 , col-xs-4, col-lg-4 are the types as per device screen. example of bootstrap grid, you found here

yash
  • 2,101
  • 2
  • 23
  • 32
  • Can you provide a jsfiddle on how to make a grid in bootstrap?. If can't its okay. –  Aug 30 '16 at 05:33
  • sure, i will .. wait for a minute – yash Aug 30 '16 at 05:33
  • http://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp this is a link where you find out separate part of webpage. that is just demo, in actual web page , whatever content you write inside
    bla bla
    , whole content is display in only that width box     – yash Aug 30 '16 at 05:35
  • http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp see this link to understand bootstrap grid more. this will better for you to understand. – yash Aug 30 '16 at 05:41
  • If you want to create a Datagrid which is like a bootstrap table that displays data you can look at this option this is my best so far, allows you to export data to all formats and even filter data by search this is much easier to implement than Datatables http://bootstrap-table.wenzhixin.net.cn/ – Frank Odoom Aug 30 '16 at 05:54
1

You didn't wrote which version of jqGrid you use and from which fork of jqGrid (free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7).

Old versions of jqGrid uses jQuery UI CSS for jqGrid elements. New versions allow you to use Bootstrap CSS instead. Here you will find an example of usage Bootstrap with jqGrid. What you need to do mostly is including Bootstrap CSS on the page and adding guiStyle: "bootstrap" option. It's all.

UPDATED: Additionally Bootstrap provides some CSS classes which helps to hide columns of the grid in case of low resolution. You can try the demo http://jsfiddle.net/OlegKi/andm1299/45/ and resize the window with the grid. The last column (Duration column) uses "hidden-xs" Bootstrap class. You will see that the column disappears if the outer window will be short enough.

Oleg
  • 220,925
  • 34
  • 403
  • 798
0

Hi If you looking to create some tables using Bootstap you can refer to the below link for datatables creations. https://datatables.net/examples/styling/bootstrap.html

It is very easy to implement and comes with lots of plugins that makes it easy to implement.

Hope it helps

anujjain0801
  • 122
  • 3
0

Bootstrap Grid System devides a screen into 12 columns. It is reaponsible for the responsive nature of Bootstrap across multiple devices. The various screen sizes defiled in Bootstrap are Small sm Medium md Extra Small xs and Large lg. Basically bootstrap is a Front End web framework it has inbuilt css and javascript components that make it easy for you to create beautiful front end. To create a grid in bootstrap you first have to create a container, then you create a row, after that you define your columns by asigning .col-md, .col-lg,. col-xs,. col-smclasses to your div

Below Is an example of a grid system. Reference from Bootstrap Documentation http://getbootstrap.com/css/

      <!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>

    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row">
      <div class="col-xs-6">.col-xs-6</div>
      <div class="col-xs-6">.col-xs-6</div>
    </div>

Also look at an implementation from this jsfiddle https://jsfiddle.net/KyleMit/Gt25L/

Frank Odoom
  • 1,545
  • 18
  • 19