CODEWITHSUNDEEP
javascriptjquerycssjquery-uijqgrid
Bhavik Ambani
Bhavik Ambani

Reputation: 6657

Change CSS of the add form using jqGrid

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.

Upvotes: 3

Views: 7592

Answers (5)

Mateusz Rogulski
Mateusz Rogulski

Reputation: 7445

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');

Upvotes: 4

Grim...
Grim...

Reputation: 16953

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.

Upvotes: 2

alfrodo
alfrodo

Reputation: 159

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');

Upvotes: 1

Anton Belev
Anton Belev

Reputation: 13543

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

Upvotes: 2

Oleg
Oleg

Reputation: 221997

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

Upvotes: 5

Related Questions