Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQgrid style issue with Twitter Bootstrap

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>

like image 235
Vito Avatar asked Apr 17 '13 03:04

Vito


2 Answers

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>
like image 51
Oleg Avatar answered Nov 15 '22 06:11

Oleg


Check this Bootstrap UI Template contains jqGrid plugin

You can use many feature from this template. Looks awesome

like image 40
Murali Murugesan Avatar answered Nov 15 '22 07:11

Murali Murugesan