jQuery Grid Plugin - jqGridForum

27/07/2008
18:04

tud

Member

Members

Forum Posts: 5

Member Since:
28/07/2008

Offline

1

Hello,

I'm trying to use jqGrid with Blueprint Css framework (http://code.google.com/p/blueprintcss/).

Blueprint uses a reset css and jqGrid is not well visualized.

I added:

.GridHeader table {margin:0;}
.GridHeader td, tr {padding:0;}
table.scroll {margin-bottom:0;}
table.navtable {margin-bottom:0; width: auto;}

in order to visualize the grid with Firefox 3 on Mac

I think you should use a reset css (like http://meyerweb.com/eric/tools.....index.html) in order to test if grid css contains everything needs

Thanks

.Stefano

ps: what aout using UI jQuery theme system (http://ui.jquery.com/themeroller) for jqGrid? Do you think it could be a good idea?

28/07/2008
02:22

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

2

Stafano,

Thank you for this. Will make some test and include this in next release.

As for the UI theme system - maybe not now, but will add in

todo list

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

26/08/2008
08:24

tud

Member

Members

Forum Posts: 5

Member Since:
28/07/2008

Offline

3

This is my current css to work with firefox 3 and jqGrid 3.2.4
This solve:
- alignment problem into search pager elements
- alignment problem into â€œviewrecordsâ€ elements

.jqmWindow table {margin: 0; width: 300px;}
.jqmWindow td, tr {padding:0;}

.jqmClose img {padding-left: 282px;}

select.selbox {height: 19px;margin: 0; padding: 1px 0 0 0;}
input.selbox {height: 13px; padding: 0;}

.nav-button {padding-top: 0;}

27/08/2008
02:24

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

4

Thanks

I will check this

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

25/09/2009
14:06

clone45

Guest

Guests

5

Hi Tony,

On a related subject, I've found that the 960 Grid System reset.css also causes issues with the jqGrid layout.

Thanks,

- Bret

29/09/2009
10:47

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

6

Hello,

Ok, but what kind of issues? Please be a more specific. I can't test. If you provide a simple test case or link to the problem it would be great, otherviese the problem will be still for you.

Thanks

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

21/10/2009
11:16

f3661

Guest

Guests

7

Hi,

I'm also having problems with 960 grid system (not the original 960 but downloaded from http://designinfluences.com/fluid960gs/).

It has 5 additional CSS:

reset.css
text.css
960.css
layout.css
nav.css

It seems that if I remove the reset.css and layout.css the grid looks ok.

Please see this image:

I'm using these code for the grid setup:

var baseURL = “http://localhost/moba”;
$(document).ready(function() {
    Moba.SiteMaster.setDefaults();
});

var Moba = {
    SiteMaster: {
        setDefaults: function() {
            $.jgrid.defaults = $.extend($.jgrid.defaults, {
                datatype: 'json',
                height: 'auto',
                autowidth: true,
                imgpath: '/content/images',
                jsonReader: {
                    root: “Rows”,
                    page: “Page”,
                    total: “Total”,
                    records: “Records”,
                    repeatitems: false,
                    userdata: “UserData”,
                    id: “Id”
                },
                loadui: “block”,
                mtype: 'GET',
                multiboxonly: true,
                rowNum: 200,
                rowList: [10, 20, 50],
                viewrecords: true
            });
        }
    }
};
$(document).ready(function() {
    $(”#grid”).jqGrid({
        url: baseURL + '/Location/List',
        colNames: ['Id', 'Code', 'Description'],
        colModel: [
                      { name: 'Id', index: 'Id', width: 40, align: 'left', hidden: 'true' },
                      { name: 'Code', index: 'Code', width: 40, align: 'left' },
                      { name: 'Description', index: 'Description', width: 300, align: 'left'}],
        pager: “#pager”,
        sortname: 'Code',
        sortorder: “desc”,
        multiselect: true
    });
});

The first is loaded from my master page and the second from the actual page.

One other thing, I setup the grid to hide the column Id, as you can see, the header is hidden but the column is not. Is it a bug or my setup not correct?

Thanks

23/10/2009
10:37

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

8

Hello,

Thanks. I think I have the jqGrid to work with blueprint.css, but it seems that this is not true.

I will test this and let you known.

This is only my opinion - instead that many people use blueprint.css I think that the concept of this is little inconsistent with other frameworks. Attaching properties at low level is not good approach IMHO. I think that other freameworks have the same problem too.

I do not promise that I fix this, if it will cost a lot of time and code changes.

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.