• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2815
  • Last Modified:

Modify border only col with jqgrid

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?

Thanks
Felipe
0
fsouza
Asked:
fsouza
  • 5
  • 4
1 Solution
 
Alexandre SimõesManager / Technology SpecialistCommented:
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

0
 
fsouzaAuthor Commented:
Not works fine. i'm trying add "important!" but no have effect
0
 
COBOLdinosaurCommented:
Post a link to the page so we can do diagnostics.

Cd&
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
Alexandre SimõesManager / Technology SpecialistCommented:
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.
0
 
fsouzaAuthor Commented:
The version is 1.10.3 - i'm studing cellattr, this works fine?
0
 
Alexandre SimõesManager / Technology SpecialistCommented:
1.10.3???
Are we speaking about the same grid?
jqGrid latest version is 4.5.4
0
 
Alexandre SimõesManager / Technology SpecialistCommented:
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.
0
 
fsouzaAuthor Commented:
Sorry,
jqGrid  4.5.2 - jQuery Grid
0
 
Alexandre SimõesManager / Technology SpecialistCommented:
Ok.
Have you tried my previous suggestion?
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28280997.html#a39613452

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_
0
 
fsouzaAuthor Commented:
Yes, i tried your suggestion but not give a success. The cellattr is works fine.

Thank you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now