Search code examples
jqgridjqgrid-formatter

How do you pass dialog options using jqGrid editformbutton property?


I have an "actions" column in my grid and it's set to display the edit dialog when the edit icon is clicked. The form comes up fine, however, there doesn't seem to be a way to pass in options for the dialog box itself. When it comes up, it always has the scroll bars, default button text, etc. I have my ondblClickRow event also pulling up the edit dialog, but it allows me to set the height, width, modal, etc properties of the box. Ideally, I could wire up the ondblClickRow and the edit button click to a function, but that doesn't seem to be an option either.

    colModel: [ { name: 'fx', 
index: 'fx', 
width: 60, 
formatter: 'actions', 
formatoptions: { editformbutton: true }, 
sortable: false, 
sorttype: 'int',
 summaryType: 'count', summaryTpl: '({0}) total' },



      ondblClickRow: function(){
       var gr = $("#mygrid").jqGrid('getGridParam', 'selrow');
        $("#mygrid").jqGrid('editGridRow',
                              gr,
                              {height: 200,
                               width: 500,
                               modal: true,
                               resize: false,
                               reloadAfterSubmit: false,
                               bSubmit: 'Save',
                               recreateForm: false
              });   
        }

Any ideas?


Solution

  • You can use formatoptions to specify any options of the editing. If you use formatter: 'actions' with formatoptions: { editformbutton: true } then form editing will be used. All other properties of form editing you can specify by delOptions and editOptions properties of formatoptions. If you starts editGridRow directly with some options I would recommend you to share the same options. The most easy way will be to save the options in a variable and to use it in both cases:

    var myEditOptions = {
            height: 200,
            width: 500,
            modal: true,
            resize: false,
            reloadAfterSubmit: false,
            bSubmit: 'Save',
            recreateForm: true,
            closeAfterAdd: true,
            closeAfterEdit: true
        },
        myDeleteOptions = {
            // just an example of delGridRow options
            reloadAfterSubmit: false,
            closeOnEscape: true
        };
    
    $("#gridId").jqGrid({
        colModel: [
            { name: 'fx', width: 60, formatter: 'actions', sortable: false,
                formatoptions: {
                    editformbutton: true,
                    editOptions: myEditOptions,
                    delOptions: myDeleteOptions
                }
            },
            ...
        ],
        ...
        ondblClickRow: function (rowid) {
            $(this).jqGrid('editGridRow', rowid, myEditOptions);
        }
    });