jqGrid Custom Edit Dialog

I am working to an application that uses jqGrid. The problem is that the edit dialog that should appear at row edit must have a specific layout. So I would prefer to load it via ajax and then send the data back to jqGrid manually. I searched a lot on the forums but I could not find an example of how to do it.

So, I just need jqGrid to fill the edit dialog pop-up with custom content from a PHP script.

UPDATE: THe idea is that I have a form generator, where the user sets the position/width/heigh/visibility of th开发者_C百科e edit fields... and this must be used in the edit dialog.

You can use editfunc or addfunc option of the navGrid. If for example editfunc are defined then instead of editGridRow jqGrid will be called editfunc with the id of selected row as the parameter.

Alternative you can use custom button (see this answer as an example).

To modify data in the table after ther custom edit dialog you can use setRowData function.

UPDATED: If you need just make some modification of layout of the edit dialog you can use beforeShowForm for th modifications.

You can check this Tutorial, which is the official demo website of jqGrid Plugin. I am sure that there are examples of some "Row Editing" in that category. You can view lots of other examples of jqGrid also, in this demo website.
You can also check the Home page.

If you have any more problems, you can ask it here. I did use some of those examples in one of my client's (confidential) website, so it will be easy to manipulate according to your needs.

Hope it helps.

My edit dialog had too many fields and so became too high, so I had to put the fields side by side in 2 columns. I did it as follows:

I tried various ways, using wrap(), etc, but found that the values are not posted to the server if you modify the original table structure. So I just cloned the tr elements, put them in new tables, and hid the old ones. I did not hide the whole table, so that the validation will still be visible. I put an onchange on the cloned elements to update the old ones. This works great. Parameter tableName is your jqgrid element id.

var splitFormatted = false;
function SplitFormatForm(tableName, add) {
  if (!splitFormatted) {
    splitFormatted = true;
    $("#FrmGrid_" + tableName).append('<table><tr><td><table id="TblGrid_' + tableName + '_A" class="EditTable" border="0" cellSpacing="0" cellPadding="0" /></td><td><table id="TblGrid_' + tableName + '_B" class="EditTable" border="0" cellSpacing="0" cellPadding="0" /></td></tr></table>');

    var cc = $("#TblGrid_" + tableName + "> tbody").children("tr").length;
    var s = (cc / 2) - 1;

    var x = $("#TblGrid_" + tableName + "> tbody").children("tr");
    var i = 0;
    x.each(function (index) {
        var e = $(this).clone();
        var oldID = e.attr("id") + "";
        var newID = oldID;
        if (oldID.substring(0, 3) === "tr_") {
            newID = "clone_" + oldID;
            $(this).css("display", "none");
            e.change(function () { $("#" + oldID + " > .DataTD > .FormElement").val($("#" + newID + " > .DataTD > .FormElement").val()); });
            e.attr("id", newID);

            if (i++ < s) {
                $("#TblGrid_" + tableName + "_A").append(e);
            }
            else {
                $("#TblGrid_" + tableName + "_B").append(e);
            }
        }
    });

    //This hack makes the popup work the first time too
    $(".ui-icon-closethick").trigger('click');
    var sel_id = "'new'";
    if (!add) {
        sel_id = jQuery('#'+tableName).jqGrid('getGridParam', 'selrow');
    }
    jQuery('#'+tableName).jqGrid('editGridRow', sel_id, { closeAfterAdd: true, width: 800, afterSubmit: function (response, postdata) { return [response.responseText == 'OK', response.responseText]; } });
}}

Call this code in your editOptions as follows:

afterShowForm: function () { SplitFormatForm("SiteAccountsGrid", false); }