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?

Answer 1

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.

Answer 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.