jqGrid: Create a custom edit form

Question

I am wanting to customise the edit form in jqGrid so that instead of using the table structured layout provided I would like to use my own custom css structured layout for the form elements. How should I go about modifying the edit form to allow me to use my own custom look?

score 6 · Accepted Answer · answered May 06 '13 at 13:29

You can definitely achieve this by jquery ui dialog. However I can not put full code for you but helps you in the steps you have to do. 1 design your custom form whatever CSS and style you want to apply. Suppose this is youe custome form

<div id="dialog-div">
    <input type="text">
</div>

2 on jquery dialog open the dialog on your jqgrid editbutton click

$("#edit").click(function(){
            var rowdata = $("#coolGrid").jqGrid('getGridParam','selrow');
            if(rowdata){
                $("#dialog-div").dialog('open');
                var data = $("#coolGrid").jqGrid('getRowData',rowdata);
                alert(data);
            }
});

by default it will close as-

$("#dialog-div").dialog({
            autoOpen: false,
});

Now as you get data in variable you can put in your edit form and of jquery dialog button save it according to your logic. Hope this helps you.

score 2 · Answer 2 · answered May 03 '13 at 14:55

2

I would recommend you first of all to read (or at least look thorough) the code of form editing module which implement the part which you want to replace. You will see that it consist from more as 2000 lines of code. If you write "I would like to ..." you should understand the amount of work for implementing what you ask. If you are able to understand the code and if you are able to write your modification of the code even using libraries like jQuery UI then you can decide whether it's worth to invest your time to do the work. The main advantage of using existing solutions is saving of the time. What you get in the way is not perfect, but using existing products you could create your own solutions quickly and with acceptable quality. The way to study existing products which you can use for free seems me more effective as large investments in reinventing the wheel.

answered May 03 '13 at 14:55

Oleg

220,925
34
403
798

Thank you Oleg and thank you as well for your numerous other examples and comments of yours I have been reading on over the last few days. A huge amount of help and greatly appreciated. I am not about to rewrite the code but one thought I had was to use something like a jQuery UI Dialog as a replacement of the standard form that comes with jqGrid. Is this possible and if so could you give me some pointers as to how. Many thanks again. – rushwire May 03 '13 at 15:53
@rushwire: You are welcome! I'm glad that my old answers could help you too. Probably I don't full understand hat you want because you formulate your question in very common way. jqGrid create forms with the table structured layout. There are some way to customize it, but it. You can change the labels in the form, add more columns, change the order and so on, but it stay **table structured layout**. If you want to implement another layout (with floating divs for example) you will need to rewrite the whole module. Probably it would be enough to make more simple customization of the forms? – Oleg May 03 '13 at 16:13

score 1 · Answer 3 · answered Jun 24 '17 at 14:13

http://guriddo.net/?kbe_knowledgebase=using-templates-in-form-editing

Using templates in form editing

As of version 4.8 we support templates in the form editing. This allow to customize the edit form in a way the developer want. To use a template it is needed to set the parameter template in the edit add/or add options of navigator. This can be done in navigator or in the editing method editGridRow :

$("#grid").jqGrid("navGrid",
    {add:true, edit:true,...},
    {template: "template string for edit",...}
    {template: "template string for add",...},
...
);

and in editGridRow method:

$("#grid").jqGrid("editGridRow",
   rowid,
   {template: "template string",...}
);

To place the CustomerID field in the template the following code string should be inserted in the template string

{CustomerID}

With other words this is the name from colModel put in { }

score 0 · Answer 4 · answered Jul 07 '13 at 21:08

The usual problem with table layouts is when you have columns with different widths, especially with those very wide.

I solved my problem adding the attr colspan to wide columns in the beforeShowForm event.

for example

"beforeShowForm":function() {
    $('#tr_fieldnameasinColModel > td.DataTD').attr('colspan',5);
}

It's not fancy but it worked for me. Perhaps there is a more elegant way to do the same. I could arrange the fields in several columns without having to make the form extrawide.

score 0 · Answer 5 · edited May 23 '17 at 12:33

0

When user click on edit button the page navigate to another page, based on Id get the details of a row and you can display the values..

Previous answer of Creating a link in JQGrid solves your problem.

edited May 23 '17 at 12:33

Community

1
1

answered Feb 19 '14 at 12:57

UdayKiran Pulipati

6,579
7
67
92

jqGrid: Create a custom edit form

5 Answers5