How to open custom edit dialog on click of inline image icon?

Question

I need inline image buttons for EDIT and DELETE functionality.

But, I don't need default inline editing or inbuilt dialog popup as , my design is as follow. add/edit form is appear first and then, below that section, - grid is appearing. On click of - row inline "Edit" image button , need to populate row data on above form.

To achieve this, on click of edit image button, I need to have javascript function call along with row data object. How to achieve this ? Can any one share me the column code and function which can allow me to achieve this ?

Below is jqgrid stuff:

            $('#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: true, 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: false,
                    delOptions: { url: '@Url.Action("DeleteCategory", "Categories")' }
                }
            }
            ],
            pager: $('#CategoriesGrdPager'),
            sortname: 'Code',
            rowNum: 3,
            rowList: [3, 6, 9],
            width: '725',
            height: '100%',
            viewrecords: true,

            beforeSelectRow: function (rowid, e) {

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

score 0 · Answer 1 · answered Sep 16 '14 at 22:00

You could add custom icons to the actions column of each line on gridComplete. See example below.

$('#CategoriesGrdList').jqGrid({
    ...
    sortorder: 'desc',
    gridComplete: function () {
        var ids = $("#CategoriesGrdList").jqGrid('getDataIDs');
        for (var i = 0; i < ids.length; i++) {
            var id = ids[i];
            var editIcon = "<div style='float: left;' class='ui-pg-div' onclick='myEditRow(\"" + id + "\");'><a class='ui-icon ui-icon-pencil'></a></div>";
            var deleteIcon = "<div style='float: left;' class='ui-pg-div' onclick='myDeleteRow(\"" + id + "\");'><a class='ui-icon ui-icon-trash'></a></div>";
            $("#gridDocs").jqGrid('setRowData', ids[i], { actions: editIcon + deleteIcon });
        }
    }
}).navGrid('#CategoriesGrdPager', { edit: false, add: false, del: false, search: false, refresh: true });


function myEditRow(rowId) {
    var rowData = $("#CategoriesGrdList").jqGrid('getRowData', id);
    //do something with the data i.e.
    $('#nameEditInput').val(rowData.Code);
}

function myDeleteRow(rowId) {
    //your delete code...
    $("#" + id).hide();
}

How to open custom edit dialog on click of inline image icon?

1 Answers1