0

I try to use the JqGrid plugin with Bootstrap CSS and even if i have the same stylesheet link to my page, the CSS doesn't apply. I search in many other question in SOF but they are all outdated so that doesn't help me :( Here is a screen of my grid, as you can see, we are far from the beauty of the JqGrid with Bootstrap :( :

http://prntscr.com/azd7dm

Here is my HTML and JS code for some help :

$.jgrid.defaults.responsive = true;
$.jgrid.defaults.styleUI = 'Bootstrap';

$("#jqGrid").jqGrid({
        url: 'data.json',
        datatype: "json",
        jsonReader : {
             root:"datas"
        },
        colModel: [
            { label: 'Category Name', name: 'CategoryName', width: 75 },
            { label: 'Product Name', name: 'ProductName', width: 90 },
            { label: 'Country', name: 'Country', width: 100 },
            { label: 'Price', name: 'Price', width: 80, sorttype: 'integer' },
            // sorttype is used only if the data is loaded locally or loadonce is set to true
            { label: 'Quantity', name: 'Quantity', width: 80, sorttype: 'number' }                   
        ],
        viewrecords: true, // show the current page, data rang and total records on the toolbar
        autowidth: true,
        height: 400,
        rowNum: 30,
        loadonce: true, // this is just for the demo
        pager: "#jqGridPager"
    });

<head>
    <title>Espace Privé</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/Plugin/JqGrid/css/trirand/ui.jqgrid-bootstrap.css">
    <link rel="stylesheet" href="/Plugin/SlideBar/dev/slidebars.css">
    <link rel="stylesheet" href="/Plugin/jNotify/css/jnotify.css">
    <link rel="stylesheet" href="/Plugin/Popr/popr.css">
    <link rel="stylesheet" href="/Plugin/Wizard/prettify.css">
    <link rel="stylesheet" href="/Plugin/jAlert/src/jAlert-v3.css">
    <link rel="stylesheet" href="/stylesheets/style.css">
</head>

<table id="jqGrid"></table>
<div id="jqGridPager"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-fr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script>
<script src="/Plugin/SlideBar/dist/slidebars.js"></script>
<script src="/Plugin/jNotify/lib/jquery.jnotify.js"></script>
<script src="/Plugin/Wizard/jquery.bootstrap.wizard.js"></script>
<script src="/Plugin/Wizard/prettify.js"></script>
<script src="/Plugin/jAlert/src/jAlert-v3.js"></script>
<script src="/Plugin/jAlert/src/jAlert-functions.js"></script>
<script src="/Plugin/Popr/popr.js"></script>
<script src="/javascripts/layout.js"></script>
<script src="/javascripts/entitees.js"></script>
Rhend
  • 5
  • 9
  • I don't understand how you want to have the boostrap styled grid. Do you want to have some other colors for example? You use commercial [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334). I develop alternative fork of jqGrid: [free jqGrid](https://github.com/free-jqgrid/jqGrid), which support Bootstrap too. The default look of the grid like on [the demo](http://www.ok-soft-gmbh.com/jqGrid/OK/formEditOnDoubleClick-jqueryui-fa-bootstrap.htm). One can changes the color or to use other icons. See [another demo](http://www.ok-soft-gmbh.com/jqGrid/OK/grouping-bootstrap-glyph.htm). – Oleg May 02 '16 at 12:29
  • @Oleg i want the same design as [the demo](http://www.guriddo.net/demo/bootstrap/) . On every question i see your answer with free JqGrid, if i can have the same cool design it's fine for me and the same documentation too ? – Rhend May 02 '16 at 13:01
  • I'm not understand your question. To use Bootstrap in free jqGrid you need to include Bootstrap CSS to the standard grid described here [here](http://free-jqgrid.github.io/getting-started/index.html) and to add the option `guiStyle: "bootstrap"`. You can (it's recommended) include Font Awesome CSS too and to add `iconSet: "fontAwesome"` option. It's all. – Oleg May 02 '16 at 13:54
  • Thanks Oleg, i just switch to your plugin and try to use it :) Thanks for the work !! – Rhend May 02 '16 at 14:47
  • You are welcome! You can for example replace `pager: "#jqGridPager"` to `pager: true` and to remove unneeded `
    ` from HTML page. Other methods like `navGrid` allows to skip the parameter `"#jqGridPager"`. You can use `template: 'integer'` and `template: 'number'` instead of `sorttype: 'integer'` and `sorttype: 'number'`. It specifies formatter, align and default sorting operations additionally to `sorttype`.     – Oleg May 02 '16 at 15:41
  • You can combine `loadonce: true` with `forceClientSorting: true` option to force *local* sorting of data returned from the server. You can add `sortname: "ProductName"` for example to see that the data returned from the server will be first sorted by `ProductName` before be displayed. In the same way one can filter the data returned from the server *before* it will be displayed. The filtering will be made locally too. [The demo](http://www.ok-soft-gmbh.com/jqGrid/OK/formEditOnDoubleClick-jqueryui-fa-bootstrap.htm), which I referenced before, demonstrates this. – Oleg May 02 '16 at 15:42
  • Thanks for the correction, i digging in your website to find as much solution as i can find :D Everything works great but i still cannot find something about contextMenu ? Maybe you can help me on this one ? – Rhend May 03 '16 at 11:27
  • There are many ways to use it. First of all: do you include only Bootstrap on your page and no jQuery UI or you include both? There are `jquery.contextmenu-ui.js` and `jquery.createcontexmenufromnavigatorbuttons.js` as [plugin](https://github.com/free-jqgrid/jqGrid/tree/master/plugins). It uses jQuery UI, but it can be combined with jqGrid which uses Bootstrap style. See https://jsfiddle.net/OlegKi/37rb593h/ created for [the answer](http://stackoverflow.com/a/34611089/315935). To code can be simpler. There are exist the modified one [here](http://swisnl.github.io/jQuery-contextMenu/) too. – Oleg May 03 '16 at 11:45
  • That simply insane :) Why don't you put this exemple in your [Exemple-section](http://free-jqgrid.github.io/examples/index.html) ? – Rhend May 03 '16 at 12:03
  • There are a lot of things which one can to do especially of [the documentation site](http://free-jqgrid.github.io/), but all this take time ... It's difficult to find much time for the product developing for free. – Oleg May 03 '16 at 12:27
  • I understand :( Thanks anyway you help me a lot :) – Rhend May 03 '16 at 12:34
  • Sorry for bothering you again @Oleg but do you have an exemple showing how can i automaticly refresh a column with the `summaryType:'sum'` on editing ? – Rhend May 03 '16 at 14:29
  • Just a heads up, I see you're using my plugin jAlert. I just released version 4 and I highly recommend you check it out! – HTMLGuy May 11 '16 at 16:10
  • Nice work @ShaneStebner ! I update my code with your V4, love your plugin :) – Rhend May 12 '16 at 07:56
  • Thank you! I created it for myself and use it daily. I figured others would appreciate it too. – HTMLGuy May 25 '16 at 14:48

0 Answers0