In jqgrid, How to Edit row using dialog?

Question

How to do edit on popup dialog in jqgrid.

Below is jqgrid stuff. I dont' need inline editing. I want to popup dialog. To popup dialog, we already have dialog which can be popup. To achieve this, I need to call - javascript function which can allow to popup dialog. please guide me how I could call javascript function on click of edit icon ?

      $('#CategoriesGrdList').jqGrid({
            ajaxGridOptions: {
                error: function () {
                    $('#CategoriesGrdList')[0].grid.hDiv.loading = false;
                    alert('An error has occurred.');
                }
            },
            url: '@Url.Action("GetAllCategoriesList", "Categories")/' + 0,
            gridview: true,
            autoencode: true,
            postData: { categoryId: 1 },
            datatype: 'json',
            jsonReader: { root: 'List', page: 'Page', total: 'TotalPages', records: 'TotalCount', repeatitems: false, id: 'Id' },
            mtype: 'GET',
            colNames: ['Id', 'Code', 'Description', 'IsActive', "actions"],
            colModel: [
                  { name: 'Id', index: 'Id', hidden: false, key: true },
                { name: 'Code', index: 'Code', width: 170},
                { name: 'Description', index: 'Description', width: 170},
            { name: 'IsActive', index: 'IsActive', width: 170 },
            {
                name: 'actions', index: 'actions', formatter: 'actions',
                formatoptions: {
                    keys: true,
                    editbutton: true,
                    delOptions: { url: '@Url.Action("DeleteCategory", "Categories")' }
                }
            }
            ],
            pager: $('#CategoriesGrdPager'),
            sortname: 'Code',
            rowNum: 3,
            rowList: [3, 6, 9],
            width: '500',
            height: '100%',
            viewrecords: true,
            multiselect: false,
            caption: "Categories",
            loadComplete: function () {
                $("tr.jqgrow:odd").css("background", "#E0E0E0");
            },
            beforeSelectRow: function (rowid, e) {
                return false;

            },
            sortorder: 'desc'
        }).navGrid('#CategoriesGrdPager', { edit: true, add: false, del: false, search: false, refresh: true });

Pleae guide me.

score 1 · Answer 1 · answered Sep 15 '14 at 15:20

1

To Make your own Edit actions/buttons in JQGrid, you need to set the default Edit navGrid buttons/actions to false, then add custom buttons to the navigation grid. Here is an example below - remember to remove the navGrid setup in jqgrid chained functions above:

$('#CategoriesGrdList').jqGrid('navGrid', '#CategoriesGrdPager', { edit: false, add: false, del: false, search: false, refresh: true})
        .navButtonAdd('#CategoriesGrdPager', {
            title: "Edit",
            caption: "Edit",
            buttonicon: "ui-icon-pencil", // JQuery UI Icon
            onClickButton: function () { /*CALL YOUR FUNCTION HERE*/ },
            position: "last" // Position of the button on Nav
        })'

answered Sep 15 '14 at 15:20

stripthesoul

362
1
8

How to get rowdata object on onClickButton function ? Also, my selected row does not preserve, i able to select the row but, when i go on navgrid and click at edit button then, selection is disappear. – dsi Sep 15 '14 at 15:28
To get the rowid in the onClickButton function, you can use the following: `var rowid$('#CategoriesGrdList').jqGrid('getGridParam', 'selrow');` – stripthesoul Sep 15 '14 at 15:37
Thanks, but selected row does not preserve. when i click at edit button then, lost the selected row and giving me null.. – dsi Sep 15 '14 at 15:49
Ok, now, i got it.. able to select row. How to add "Delete" button to achieve delete functionlity same way ? – dsi Sep 15 '14 at 16:12
Yep just do it the same way! – stripthesoul Sep 15 '14 at 16:59

In jqgrid, How to Edit row using dialog?

1 Answers1