Change CSS of the add form using jqGrid

Asked 13/8, 2012 at 6:11 Answered 16/8, 2012 at 9:46

Solved javascript jquery css jquery-ui 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.

Gamelan answered 13/8, 2012 at 6:11 Comment(6)

this could be helpfull https://mcmap.net/q/611200/-change-style-of-jqgrid – Quintero 13/8, 2012 at 6:18

I want to change the style of add form for the jqgrid not the grid css – Gamelan 13/8, 2012 at 6:20

Please post your HTML code here. – Modred 16/8, 2012 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. – Gamelan 16/8, 2012 at 12:48

No i have not got my answer yet :( – Gamelan 16/8, 2012 at 13:25

you see this question #1308869 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. – Modred 16/8, 2012 at 13:36

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

Latishalatitude answered 13/8, 2012 at 15:59 Comment(13)

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 ? – Gamelan 13/8, 2012 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. – Latishalatitude 13/8, 2012 at 17:19

But I want to change complete style of the add form, which comes in the grid when we press + button. – Gamelan 14/8, 2012 at 4:42

@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). – Latishalatitude 14/8, 2012 at 5:14

I want to change css file reference for 'Add' form of JQgrid – Gamelan 14/8, 2012 at 6:20

@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? – Latishalatitude 14/8, 2012 at 6:25

I want to change whole style/css file reference for the add form. I want to make it totally new look, its requirement. – Gamelan 14/8, 2012 at 7: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. – Goshen 14/8, 2012 at 13:8

But how can I place that thing will you please provide the sample code for that ? – Gamelan 15/8, 2012 at 10:57

@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) and the 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. – Latishalatitude 15/8, 2012 at 11:14

@Latishalatitude 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. – Gamelan 16/8, 2012 at 4:10

@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 for more information. – Latishalatitude 16/8, 2012 at 5: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. – Gamelan 16/8, 2012 at 6:40

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

Carranza answered 16/8, 2012 at 9:46 Comment(6)

Please explain with complete example. – Gamelan 16/8, 2012 at 9:47

This will still change the entire page, though. – Argentum 16/8, 2012 at 9:56

But adding the parent class to the body will change the entire page (or, rather, all the elements with the C1 class), rather than just a single element. – Argentum 16/8, 2012 at 9:57

But you can have file when you have main styles and in stylesheep which you add change only selected styles wchich you want. You have a lot of posibilities :) – Carranza 16/8, 2012 at 10:1

@BhavikAmbani you do not give any part of implementation so I cannot solve why it does not work for you. – Carranza 16/8, 2012 at 10:6

It would help if you described the problem, too. – Argentum 16/8, 2012 at 12:51

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

Giulietta answered 16/8, 2012 at 9:42 Comment(1)

I want to change the while css reference for the entire div tag not the perticular id. – Gamelan 16/8, 2012 at 9:45

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.

Argentum answered 16/8, 2012 at 9:43 Comment(4)

I cant change the class name. – Gamelan 16/8, 2012 at 9:45

Can you change the stylesheets? That way you could add a class to the parent div to specify a particular sheet and all the children of that div could pick it up. – Argentum 16/8, 2012 at 9:50

WILL YOU PLEASE PROVIDE A SAMPLE CODE FOR THAT ? – Gamelan 16/8, 2012 at 9:50

Well, since you asked so nicely, I'll put it in my original post. – Argentum 16/8, 2012 at 9:51

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

Vizor answered 16/8, 2012 at 9:45 Comment(2)

I can not change the name of the class. Becuase my different css files wil be having the same class name and different property. – Gamelan 16/8, 2012 at 9:46

in that case what @Mateusz Rogulski suggests is the best option – Vizor 16/8, 2012 at 9:51

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

jQuery

Recommended topics

Hot tags