Modify border only col with jqgrid

Posted on 2013-10-30
Medium Priority
Last Modified: 2013-11-13
I hve a grid with jqGrid, but i need change to large the border of 2 columns only (have 10 columns).
I try this using classes atribute on cellModel, but not works.

How can i change border only specified columns?

Question by:fsouza
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39611554
Something around these lines should work.
Say you want to do that on a jqGrid with id="myGrid" has a column which name is "amount"

create a css class like:
#myGrid td[aria-describedby="list_amount"] {
     border-left: solid 2px #000;
     border-right: solid 2px #000;

Open in new window


Author Comment

ID: 39611678
Not works fine. i'm trying add "important!" but no have effect
LVL 53

Expert Comment

ID: 39612246
Post a link to the page so we can do diagnostics.

Tutorial: Introduction to Managing a Linux Server

In this tutorial on systemd, we will explore:
-OS/Distro Adoption
-chkconfig and Other Legacy Commands
-Summary and Key Commands

LVL 30

Expert Comment

by:Alexandre Simões
ID: 39613452
Inside the ui.grid.css you have this class that should look something like this:
.ui-jqgrid tr.ui-row-ltr td {
    border-right-color: inherit;
    border-right-style: solid;
    border-right-width: 1px;

Open in new window

This depends on the style you chose and defines the default style for all rows.

Make sure that your customization css file is defined after the jqgrid css file.
Then, on your css file add this:
td[aria-describedby="list_amount"] {
    border-left: 3px solid #f00 !important;
    border-right: 3px solid #f00 !important;

Open in new window

The !important shouldn't be necessary if your css comes after jqgrid css like I said before. And keep in mind that not all browsers support !important.

If this doesn't work is because we're not working on the same jqGrid version and the DOM might be slightly different.
Tell me which jqGrid version you're using but better yet would be to at least post here the whole <table> element that jqGrid is generating for you.

Author Comment

ID: 39613844
The version is 1.10.3 - i'm studing cellattr, this works fine?
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39613891
Are we speaking about the same grid?
jqGrid latest version is 4.5.4
LVL 30

Accepted Solution

Alexandre Simões earned 1500 total points
ID: 39613906
Ok, I think I got it, you gave us the version of jQuery UI, not jqGrid.

Anyway, cellattr seems like a good option.
Honestly I never used it for that, but the 'cm' argument have enough information for you to identify the column and change the cell style.

Author Comment

ID: 39613910
jqGrid  4.5.2 - jQuery Grid
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39613952
Have you tried my previous suggestion?

Make sure your css comes after jqGrid css and that you specify the correct selector:
td[aria-describedby="list_amount"] is for a column named amount
the column name needs to be prefixed with list_

Author Comment

ID: 39627068
Yes, i tried your suggestion but not give a success. The cellattr is works fine.

Thank you.

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question