JqGrid Edit & Delete button with each row

Question

i m using jqgrid with mvc 3, I want to add Edit and Delete button with every row of JqGrid , i have achieved this thing by the help of this link. But it is for inline editing, i want to open a popup widows when click on edit button.

How can i achieve this thing.

Thanks

score 5 · Accepted Answer · answered Aug 27 '11 at 09:43

5

You should just use new editformbutton: true option which exists starting with version 4.1.0 of jqGrid:

formatter:'actions',
formatoptions: {
    keys: true,
    editformbutton: true
}

answered Aug 27 '11 at 09:43

Oleg

220,925
34
403
798

Where to define the edit URL ? on 'onEdit' or somewhere else ? – Saad Aug 27 '11 at 10:06
1

@Saad: Per default it will be used the `editurl` parameter of grid. You can use `editOptions` of `formatoptions` to define any options of [editGridRow](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#editgridrow) method. So if `url` property of the `editOptions` of the `formatoptions` are not defined the `editurl` parameter of jqGrid will be used. – Oleg Aug 27 '11 at 10:29
is it possible to add a Add button (or a custom button) with edit and delete in "Actions" formatter ? – Saad Sep 05 '11 at 07:48
@Saad: Custom buttons are not supported directly by the 'actions' formatter, but if one will do some things manually it is do possible. Look at [the demo](http://ok-soft-gmbh.com/jqGrid/TestSamle/Admin1.htm) from [the answer](http://stackoverflow.com/questions/6622779/custom-jqgrid-post-action/6627201#6627201). – Oleg Sep 05 '11 at 07:55
Thanks i added a button , now i want to open a add form of jqgrid when click on this button, is this thing is possible ??? – Saad Sep 05 '11 at 09:43
@Saad: everything is possible. You can use [jQuery UI Dialog](http://jqueryui.com/demos/dialog/) for example. To have not so large font in the dialog you can use `html, body { font-size: 75%; }` for example. – Oleg Sep 05 '11 at 09:57
the logic of adding the custom button isnt working fine in IE 8 , because of class: "ui-pg-div ui-inline-custom" . any idea ? – Saad Sep 05 '11 at 13:07
@Saad: Thanks! I fixed the code of http://ok-soft-gmbh.com/jqGrid/TestSamle/Admin1.htm – Oleg Sep 05 '11 at 13:24

score 2 · Answer 2 · answered May 15 '14 at 16:26

Please find the colmodel below for editing:

 {
                    name: 'EditAction',
                    width: 60,
                    fixed: true,
                    search: false,
                    sortable: false,
                    resize: false,
                    formatter: 'actions',
                    formatoptions: {
                        keys: false,
                        editbutton: true,
                        delbutton: false,
                        editformbutton: false,
                        onSuccess: function(response) {
                            if (response.status == 200) {
                            }
                        },
                        extraparam: { oper: 'edit' },
                        url: '@Url.Action("ActionName", "Controller")'
                    }
                },

score 0 · Answer 3 · answered Sep 22 '21 at 09:58

jQuery("#grid").jqGrid({ datatype: "local", data: second, @url: '@Url.Action("orders", "Home")', datatype: "json",@ colNames: ['name', 'description', 'url'], colModel: [ {name: 'name', index: 'name', editable: true, editrules: {required: true}, editoptions: {placeholder: 'Enter a Name'} }, {name: 'description', index: 'description', editable: true, editrules: {required: true}, editoptions: {placeholder: 'Enter description'} },

        {
      name: 'url',
        index: 'url',
        editable: true,
         editrules: {required: true},
         editoptions: {placeholder: 'Enter url'}
}
        ],

    rowNum: 10,
    rowList: [10, 20, 30],
    sortname: 'model',
    pager: '#pager',
    editrow:true,
    editurl: '@Url.Action("orders", "Home")',
    viewrecords: true,
    sortorder: "desc",
    jsonReader: {
        repeatitems: false,
        id: "0"
    },
     searching: {
            loadFilterDefaults: false,
            closeOnEscape: true,
            searchOperators: true,
            searchOnEnter: true
        },
    caption: "Cars Grid",
    height: '80%',
    gridComplete: initGrid
});

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-ask). — Community, Sep 22 '21 at 10:48

JqGrid Edit & Delete button with each row

3 Answers3

Linked