Solved

Modify border only col with jqgrid

Posted on 2013-10-30
10
1,809 Views
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?

Thanks
Felipe
0
Comment
Question by:fsouza
  • 5
  • 4
10 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
Comment Utility
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
 

Author Comment

by:fsouza
Comment Utility
Not works fine. i'm trying add "important!" but no have effect
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
Post a link to the page so we can do diagnostics.

Cd&
0
 
LVL 30

Expert Comment

by:Alexandre Simões
Comment Utility
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
 

Author Comment

by:fsouza
Comment Utility
The version is 1.10.3 - i'm studing cellattr, this works fine?
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 30

Expert Comment

by:Alexandre Simões
Comment Utility
1.10.3???
Are we speaking about the same grid?
jqGrid latest version is 4.5.4
0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
Comment Utility
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
 

Author Comment

by:fsouza
Comment Utility
Sorry,
jqGrid  4.5.2 - jQuery Grid
0
 
LVL 30

Expert Comment

by:Alexandre Simões
Comment Utility
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
 

Author Comment

by:fsouza
Comment Utility
Yes, i tried your suggestion but not give a success. The cellattr is works fine.

Thank you.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
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)

744 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now