JQgrid style issue with Twitter Bootstrap

Asked 17/4, 2013 at 3:24 Answered 15/12, 2015 at 15:26

I'm using JQgrid to show information and to perform CRUD operations. I want a page that have the look and feel of Twitter Bootstrap and the JQGrid showing some data, however if I import the CSS for JQGrid and the CSS for Bootstrap, the grid is not visible at all. What I basically want is to have the JQGrid styles completely separated from the rest of the page styles.

Is this possible?

Below is the code of the page that I'm trying to use Twitter Bootstrap alongside with JQGrid:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!--Styles for JQGrid-->
    <link rel="stylesheet" type="text/css" media="screen" href="/css/flick/jquery-ui-1.8.16.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="/jqgrid/css/ui.jqgrid.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
    <script src="/jqgrid/js/i18n/grid.locale-es.js" type="text/javascript"></script>
    <script src="/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>


    <!--Twitter Bootstrap Styles -->

        <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">

        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="/bootstrap/js/bootstrap.min.js"></script>

<title>Manejo de alumnos</title>
</head>
<body>
<center>

    <div class="myjqueryUI">
        <table id="list"></table><!--Grid table-->
        <div id="pager"></div>  <!--pagination div-->
        <a href="http://localhost/ProyectoNetbeans/CodeIgniter_2.1.3/index.php/Alumnos_controller/mostrarInsertar">Insertar alumno</a>
    </div>

</center>

<script type="text/javascript">


    $(document).ready(function (){
        jQuery("#list").jqGrid({
            url: 'http://localhost/ProyectoNetbeans/CodeIgniter_2.1.3/index.php/Alumnos_controller/loadData',
            mtype : "post",             //Ajax request type. It also could be GET
            datatype: "json",            //supported formats XML, JSON or Arrray
            colNames:['Expediente','Primer apellido','Segundo apellido', 'Nombre','Cédula'],       //Grid column headings
            colModel:[
                {name:'expediente',index:'expediente', width:300, editable:true, edittype:'text'},
                {name:'primerApellido',index:'primerApellido', width:300, editable:true, edittype:'text'},
                {name:'segundoApellido',index:'segundoApellido', width:300, editable:true, edittype:'text'},
                {name:'nombre',index:'nombre', width:300, editable:true, edittype:'text'},
                {name:'cedula',index:'cedula', width:300, editable:true, edittype:'text'}

            ],
            pager: '#pager',
            rowNum:10,
            rowList:[15,30],
            sortname: 'primerApellido',
    reloadAfterSubmit: true,
            sortorder: 'asc',
            viewrecords: true,
    postData: {expediente:"expediente"},
            caption: 'Alumnos'
        }).navGrid('#pager',{edit:false,add:false,del:false},
            {

            },
            {
              },


    },  

    {multipleSearch : false}, // enable the advanced searching
    {closeOnEscape:true}

        );
    });
</script>

Lockman answered 17/4, 2013 at 3:24 Comment(0)

You should post always not only the description what you do, but the code (HTML, JavaScript etc) which shows how you try to do this.

If you want place jqGrid on the page which use mostly Twitter Bootstrap I would recommend you to use special jQuery UI: jQuery UI Bootstrap.

If you do prefer to use some other jQuery UI CSS you can download the CSS which you need from the official jQuery UI download page, but set some class name inside of "CSS Scope:" field:

enter image description here

If you enter for example ".myjqueryUI" in the "CSS Scope:" field then you need place the <table> which you will use for jqGrid inside of <div> having "myjqueryUI" class:

<div class="myjqueryUI">
    <table id="grid"></table>
</div>

Tedmund answered 17/4, 2013 at 6:8 Comment(19)

Thanks for replying Oleg, sorry about the thing of not posting the code, I already included it in the original post. I downloaded JQuery UI Bootstrap and included it in my project, but I don't know where is that "CSS scope" page that you opened. I try to set a class to the JQGrid table within a div, but is not working. I opened the CSS files of JQuery UI bootstrap, but I'm not sure which one I should use for the div that contain the table. Do you know what need to be used with JQuery UI Bootstrap? – Lockman 18/4, 2013 at 4:25

@Vito: You can either download standard jQuery UI Theme (link Flick Theme, which you use currently) or to use JQuery UI Bootstrap. "CSS Scope" field you can find on the the download page. Only the standard Themes (like Flick Theme) which available on the page can be downloaded in the way. One remark to your code: you should include only one jQuery JavaScript. You current code includes first jQuery 1.7.1 and then jQuery 1.9.1 (before bootstrap.min.js). – Tedmund 18/4, 2013 at 5:15

I downloaded Flick theme which I named flick in the scope, then in my code I created a div which have the JQGrid table with class "flick". I suppose that putting this class to the div it will shrink the css of that area to flick. Now jqgrid is displayed, but the navgrid is not showed at all and the grid have no colors. It seem that it works, because now the grid is displayed and Twitter Bootstrap is also there, but the grid doesn't have the style applied correctly. Do you have any idea of what can be wrong here? – Lockman 18/4, 2013 at 5:45

@Vito: Please verify what exactly you typed in the "CSS Scope:" field. It must be class selector like .myjqueryUI and mot just the name of the class .myjqueryUI. If you opens jquery-ui-1.10.2.custom.css you should find .myjqueryUI .ui-helper-hidden { display: none; } and not a wrong CSS rule like myjqueryUI .ui-helper-hidden { display: none; }. I suppose it was your error. – Tedmund 18/4, 2013 at 7:7

@Vito: If you would prefer to use jQuery UI Bootstrap Theme, which have mostly perfect look together with Twitter Bootstrap Styles, you need just download and use without any additional CSS Scope. I suppose that you will don't see any CSS conflicts. If you do find conflicts you can modify manually jquery-ui-1.10.0.custom.css from jquery-ui-bootstrap by inserting .myjqueryUI prefix (or any other which you like) in every CSS rule. You will need to add it in many lines, but in 10 minutes typing Ctrl-V you will be able to do this. – Tedmund 18/4, 2013 at 7:25

Just tried the JQuery UI Bootstrap theme and it worked perfectly. I dont like the colors so much, but at least I can see my grid working normally, I will find out how to change the colors. Thanks a lot for your help Oleg! Really appreciated! – Lockman 19/4, 2013 at 4:39

Now jqGrid has another nice bootstrap theme here. I use this awesome UI:) wrapbootstrap.com/theme/ace-responsive-admin-template-WB0B30DGR – Dodson 18/8, 2013 at 4:5

It looks like the Jqgrid bootstrap link in the answer no longer works – Cowden 6/4, 2014 at 12:29

@leora: Thanks! I fixed addyosmani.github.io/jquery-ui-bootstrap to jquery-ui-bootstrap.github.io/jquery-ui-bootstrap. One get the latest version on Github (github.com/jquery-ui-bootstrap/jquery-ui-bootstrap) additionally. – Tedmund 6/4, 2014 at 12:34

@Tedmund I have downloaded the package from jquery-ui-bootstrap.github.io/jquery-ui-bootstrap but I am still unable to make jqgrid responsive as my other bootstrap elements. I have included jquery-ui-1.10.3.custom.css, ui.jqgrid.css, jqGrid.overrides.css and jquery-ui-1.10.3.custom.min.js but the grid ain't responsive. Do I need to make any other changes? – Niagara 30/10, 2015 at 9:21

@SuhailGupta: There are different definitions what is "responsive". Moreover it's always very important to know which fork of jqGrid and in which version you use. Look at the demo for example which uses free jqGrid (it's the fork of jqGrid which I develop). The demo uses classes: "hidden-xs", labelClasses: "hidden-xs" properties in the last column and resize handler which calls setGridWidth. The last column will be visible or hidden depend on the resolution of the parent container. – Tedmund 30/10, 2015 at 9:28

@Tedmund What difference does jquery-ui-bootstrap make for jqgrid? – Niagara 30/10, 2015 at 9:35

@SuhailGupta: jQuery UI allows to define different Themes. jQuery UI Bootstrap is the theme of jQuery UI which makes jQuery UI looks very close to Twitter Bootstrap, but it's still a theme only (a style). It doesn't change anything in the features of jqGrid. – Tedmund 30/10, 2015 at 9:40

@Tedmund Alright. Why doesn't jqgrid act as a bootstrap table (responsive) when a bootstrap class table is added to it? – Niagara 30/10, 2015 at 9:44

@SuhailGupta: Sorry, but I can't follow you. You should first specify what you do and with which version of jqGrid. – Tedmund 30/10, 2015 at 9:52

@Tedmund I am using version 4.6 and I have used bootstrap for my web application. While each element is managed by bootstrap when it comes to screen with different resolutions, jqgrid is left behind. It is broken at different resolutions. Adding class table does not have an effect. – Niagara 30/10, 2015 at 9:58

@SuhailGupta: CSS of jqGrid 4.6 not oriented/support Bootsrtap CSS at all. About the "table" class. Probably you don't know jqGrid. The grid of jqGrid is not a simple table. It's relatively complex structure of dives and tables. Header and body are in different divs of different tables. Such allows to make vertical scroll body without scrolling column headers, searching toolbars and other. jqGrid used table-layout: fixed; style of tables to improve performance of large grid. It force width of columns be depend only from the width of columns of the first row. I can continue... – Tedmund 30/10, 2015 at 10:2

@SuhailGupta: The full code of free jqGrid contains now more as 18000 lines. the code is not optimal of cause and could contains a lot of features which you could not need. Nevertheless it's better to imagine jqGrid as web component (control as blackbox) as just as a HTML table. – Tedmund 30/10, 2015 at 10:5

@SuhailGupta: One of the first features which I implemented in free jqGrid fork is the compatibility with Bootstrap. Before that I posted some preliminary versions of pure CSS changes here. I recommend you to try to change URLs (temporary for the test), which you use to URLs of free jqGrid described in the wiki article. You will see how your existing code will looks with free jqGrid. Look in readmes and wiki for more info – Tedmund 30/10, 2015 at 10:11

Check this Bootstrap UI Template contains jqGrid plugin

You can use many feature from this template. Looks awesome

Dodson answered 18/8, 2013 at 4:6 Comment(0)

Additional info on the topic of jqGrid + Bootstrap:

It looks like there is a table border-collapse override issue with jqGrid (4.6.0) and Bootstrap (3).

jqGrid wants: border-collapse: separate; (CSS default)

Bootsrap wants: border-collapse: collapse;

It was causing an overflow issue to the right of the grid.

#grid_container_id table{
    border-collapse: separate;
}

solved the problem.

Rudy answered 19/3, 2014 at 15:17 Comment(0)

Here is what works for us:

1- Get the css from: https://github.com/Soliman/jqGrid.bootstrap

This does not change any jqgrid specifications at only some css changes.

The demo is at http://www.soliman.nl/test/jqgrid.bootstrap/jqGrid.bootstrap.html

2- If you want all bootstrap css applies to your table, you must run below after your grid loads:

//remove the 'ui-state' and 'ui-widget' from jquery-ui.css which prevents your customize ccs to apply on  jquery grid 
//the gbox_gridtable is the most top element in the grid
function removeJqueryUiClass(){
    $('#gbox_gridtable').find('*').andSelf().attr('class',
            function(i, css){
                if (typeof css !== 'undefined') {                    
                       return css.replace(/\ui-state\S+/g, '').replace(/\ui-widget\S+/g, '');
                    }
           });

}

3- To make the jqgrid responsive, put your grid in a div like <div id="grid">: Of cource this div must be part of bootstrap grid system, Then put below js in your file

//When the window size changes resize the gird
$(window).bind('resize', function() {
    $("#gridtable").jqGrid("setGridWidth",$("#grid").width() );
});

4- You can also set grid size when the grid is loaded completely

Ingvar answered 16/11, 2014 at 15:41 Comment(0)

New version of jqGrid 5.0 has native support of Bootstrap. http://www.trirand.com/blog/?p=1484

Perish answered 15/12, 2015 at 15:26 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags