JqGrid: create custom edit form

Question

I want to customize the editing form in jqGrid so that instead of using a structured table layout, I would like to use my own custom CSS structured layout for form elements. How can I change the edit form so that I can use my own look?

Answer 1

You can definitely achieve this with the jquery ui dialog. However, I cannot put the complete code for you, but it will help you with what you need to do. 1 Create your own form no matter what style and style you want to apply. Assume this is your form of custome

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

2 in the jquery dialog box open your jqgrid editbutton dialog box, 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 be closed as -

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

Now, when you receive data in a variable, you can put the jquery dialog button in your editing form and save it in accordance with your logic. Hope this helps you.

Answer 2

I would recommend that you first read (or at least carefully study) the code of the form editing module , which implements the part that you want to replace. You will see that it consists of more than 2000 lines of code. If you write "I would like ...", you must understand the amount of work to implement what you ask . If you can understand the code and whether you can write your own code modification, even using libraries such as jQuery UI, then you can decide whether to invest your time in doing this work. The main advantage of using existing solutions is saving time. What you get along the way is not perfect, but using existing products you can quickly and with acceptable quality create your own solutions. The way I learn about existing products that you can use for free seems more effective to me than a big investment in rethinking the wheel.

Answer 3

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

Using templates in editing forms

Starting with version 4.8, we support templates in editing the form. This allows you to customize the editing form as desired by the developer. To use the template, you must set the parameter template in the settings for adding / adding parameters to the navigator. This can be done in the navigator or in the editGridRow editing method:

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

and in the editGridRow method:

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

To put the CustomerID field in the template, in the template string

insert the following line of code:

 {CustomerID} 

In other words, this is the name from colModel placed in {}

Answer 4

A common problem with table layouts is when you have columns with different widths, especially with very wide ones.

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

eg

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

This is not a fantasy, but it worked for me. There may be a more elegant way to do the same. I could arrange the fields in several columns without making forms all over the country.

Answer 5

When the user clicks the "Edit" button, the page goes to another page, based on the "Identifier" get the details of the line, and you can display the values.

Previous answer Creating a link in JQGrid solves your problem.