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 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 the edit fields... and this must be used in the edit dialog.

Insectarium

Answer 1

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.

Kaiserslautern

thanks, but it seems it is not working :(, i tried like this: ...).navGrid('#navId', {edit:true},{ editfunc: function(id){ alert(id); }, height:600, reloadAfterSubmit:false, jqModal:true, closeOnEscape:true }); – Insectarium

@Andrei: in this way it can not work editfunc or addfunc are option of navGrid and NOT a part of prmEdit parameter. So you should try ...).navGrid('#navId', {edit:true, editfunc: function(id){ alert(id); }}); – Kaiserslautern

Answer 2

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.

Pocket

Thanks, but i all ready looked over them. What i need is a custom edit dialog, that has nothing to do with the fields in the grid. The edit row should send me the row id and i will return the HTML and JS code that will be shown in the dialog. – Insectarium

@Insectarium - Have you checked all the 5 examples in "Row Editing" category? There are code snippets also in there, below each of the examples in the right panel. – Pocket

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

Qualified