3

I want to change the CSS of the add form of the jqGrid. Are there any methods available for changing the complete CSS in the linking of the add form for the jqGrid?

I want to import another CSS file for the add form and apply for that add form.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Bhavik Ambani
  • 6,557
  • 14
  • 55
  • 86
  • this could be helpfull http://stackoverflow.com/questions/1415439/change-style-of-jqgrid – themhz Aug 13 '12 at 06:18
  • I want to change the style of add form for the jqgrid not the grid css – Bhavik Ambani Aug 13 '12 at 06:20
  • Please post your HTML code here. – Piyush Sardana Aug 16 '12 at 11:43
  • I am using `JQgrid` of `JQuery` and I want to change the style/css of the add form which comes when we press `+` button of the grid. – Bhavik Ambani Aug 16 '12 at 12:48
  • No i have not got my answer yet :( – Bhavik Ambani Aug 16 '12 at 13:25
  • 1
    you see this question http://stackoverflow.com/questions/1308369/jquery-ui-dialog-individual-css-styling add form or edit form, look at the html they generate, I'm pretty sure this question and the one you asked earlier on which Oleg replied will solve your problem. If they don't put some code and tell us that this is what you wanted and this is how its working. Theoretical questions are not good Bhavik. I'm pretty sure if you put some code about how you tried to change css in your previous question Oleg can help you further on that. – Piyush Sardana Aug 16 '12 at 13:36

5 Answers5

5

All CSS styles which uses jqGrid for the add/edit forms you can find here and here. If you would examine the lines and examine the HTML fragment of any jqGrid form you would see all classes used by jqGrid.

I don't understand only what you mean under "to import another css". The "import" would works only if you have somewhere another CSS styles with the same class names and the same hierarchy of the elements (dives, tables, tr and so on elements). So it's possible to change the styles of forms used by jqGrid, but the adjustment of the styles will be not so easy. You have to examine the structure of the jqGrid dialogs (forms) exactly to be able to make the changes.

UPDATED: jqGrid uses jQuery UI styles. So you need just change the jQuery UI to another one and jqGrid will use it.

For example the demo (simple modification of the old demo from the answer) produce the following Edit form:

enter image description here

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • I am using JQueryUI for user interface now if I want to change the style css file for add form then how can I do that ? – Bhavik Ambani Aug 13 '12 at 16:37
  • @BhavikAmbani: jqGrid uses also jQuery UI styles so you need just to change the jQuery UI style. See **UPDATED** part of my answer. – Oleg Aug 13 '12 at 17:19
  • But I want to change complete style of the add form, which comes in the grid when we press `+` button. – Bhavik Ambani Aug 14 '12 at 04:42
  • 1
    @BhavikAmbani: Sorry, but I don't understand what you mean. You have to write an example *what* you need to change. It is not just the CSS in the Add form. There are some special structure of divs, sub-divs and the fields placed in the table. So if you need to change more as the changes which you can see in the picture from my answer you have to understand the CSS of form of jqGrid (see the references from my answer). – Oleg Aug 14 '12 at 05:14
  • I want to change `css` file reference for 'Add' form of `JQgrid` – Bhavik Ambani Aug 14 '12 at 06:20
  • 1
    @BhavikAmbani: 'Add' form has no css file reference. Which *field* of the 'Add' form you need to change? Do you want to change some colors, background images, margins, ...? What you want really to change in the 'Add' form? – Oleg Aug 14 '12 at 06:25
  • I want to change whole style/css file reference for the add form. I want to make it totally new look, its requirement. – Bhavik Ambani Aug 14 '12 at 07:23
  • All the popup forms main containing divs use the same classes, namely: "ui-widget ui-widget-content ui-corner-all ui-jqdialog jqmID1", the child elements have slightly different classes for title bar etc. What you probably going to have to do if you don't want the same look for the add form is to replace these classes with your own custom classes or clone them and then alter them, giving them different names. – jjay225 Aug 14 '12 at 13:08
  • But how can I place that thing will you please provide the sample code for that ? – Bhavik Ambani Aug 15 '12 at 10:57
  • 1
    @BhavikAmbani: You should get some example of the changes which you need. I wrote you before that **'Add' form has no css file reference**. Only the standard jQuery UI CSS (from the [Theme](http://jqueryui.com/themeroller/)) and the [ui.jqgrid.css](https://github.com/tonytomov/jqGrid/blob/master/css/ui.jqgrid.css) will be used. So by defining CSS styles for `CaptionTD` of for `.ui-jqdialog-content .CaptionTD` you will change the view of form labels and by `DataTD` or `.ui-jqdialog-content .DataTD` you can change the view of the data fields. You don't need probably define new CSS classes. – Oleg Aug 15 '12 at 11:14
  • @Oleg But my question is what if I want to change completely the style and look of the add form ? Which is not the same style and look as the JQgrid ? Please explain with proper example. – Bhavik Ambani Aug 16 '12 at 04:10
  • 1
    @BhavikAmbani: Probably you ask just wrong question. Probably what you really need is to use `add: false` option of `navGrid` and adding your *custom* button (which can looks like 'Add' button). You need just `navButtonAdd` to do this. Inside of `onClickButton` you can implement any custom dialog which you need. See references from [the answer](http://stackoverflow.com/a/6689709/315935) for more information. – Oleg Aug 16 '12 at 05:16
  • I have asked the right question. I just want that when I press add button then Add form should be opened but the css of that complete form should be totally different then what we have in JQGrid. – Bhavik Ambani Aug 16 '12 at 06:40
4

In your case, I suggest you to add id to the <body> tag and change it instead of changing files. You can manipulate it by adding .bodyClass1 before your CSS selectors in each file.

EXAMPLE

style1.css

.bodyClass1 .C1{ ... }
.bodyClass1 .C2{ ... }

style2.css

.bodyClass2 .C1{ ... }
.bodyClass2 .C2{ ... }

So, at the moment when your HTML use style1.css and you want change it for style2.css, you need just use:

jQuery

$('body').removeClass('bodyClass1');
$('body').addClass('bodyClass2');
Community
  • 1
  • 1
Mateusz Rogulski
  • 7,357
  • 7
  • 44
  • 62
2

Try with $('#myItemID').css( propertyName , value )

Anton Belev
  • 11,963
  • 22
  • 70
  • 111
2

You can't change the stylesheets without affecting the whole page.

The only way I can think of to achieve this would be to use an iframe, but it would be a bit clunky.

You could add a class to a parent div, and then change the css files to be something like

.sheet1 .c1 {
    border: 1px solid #000
}

in the first sheet and 

.sheet2 .c1 {
    border: 3px solid #f00;
}

in the second. Then your markup would be:

<div class="sheet1"> <!-- parent div -->
    <div class="c1">Hello!</div>
</div>

Change the class sheet1 in the parent div to sheet2 and the child div will change.

Grim...
  • 16,518
  • 7
  • 45
  • 61
1

You can't apply different stylesheets to different parts of a page.

You would be better off having two classes in your css file such as C1 and C2 and then just changing the class of the relevant div by targeting it with an id such as:

<div id="mydiv" class="c1"> </div>


$('#mydiv').addClass('c2');
$('#mydiv').removeClass('c1');
alfrodo
  • 159
  • 6