jqGrid Custom Edit Dialog

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

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