CODEWITHSUNDEEP
c#jqueryasp.netjqgrid
Harshwardhan Kangoriya
Harshwardhan Kangoriya

Reputation: 93

JQgrid inline editing with asp.net and C#

I am using above below for viewing data and editing with it. First row is used for edit button, but whenever I click save button I am unable to capture that event.

I want to know how it works and how can I call a AJAX function to store that data to SQL Server.

$(function() {
    var grid_selector = "#grid-table-Labor";

    $("#grid-table-Labor").jqGrid({
        url: 'LaborApproval.aspx/GetLaborData', //asp function to get all data from data base to grid 
        data: "{}",
        datatype: 'json',
        mtype: 'POST',
        serializeGridData: function(postData) {
            return JSON.stringify(postData);
        },
        ajaxGridOptions: {
            contentType: "application/json"
        },
        loadonce: true,
        colNames: [' ', 'Employee Code', 'Name', 'Contractor', 'DOJ', 'Police Verification', 'Gate Pass Valid Upto', 'Status', 'Remark'],
        colModel: [{
                name: 'myac',
                index: 'myac',
                width: 80,
                fixed: true,
                sortable: false,
                resize: false,
                formatter: 'actions',
                formatoptions: {
                    keys: true,
                    delbutton: false, //disable delete button

                    //delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback },
                    //editformbutton:true                                              
                }
            },
            {
                name: 'EMPCODE',
                index: 'EMPCODE',
                width: 108,
                formatter: 'showlink',
                key: true
            },
            {
                name: 'NAME',
                index: 'NAME',
                width: 140
            },
            {
                name: 'CONTNAME',
                index: 'CONTNAME',
                width: 160
            },
            {
                name: 'DOJ',
                index: 'DOJ',
                width: 70,
                formatter: 'date',
                formatoptions: {
                    newformat: 'd-m-y'
                }
            },
            {
                name: 'POLICE_VRIFICATION',
                index: 'POLICE_VRIFICATION',
                width: 124
            },
            {
                name: 'GatePassValidUpto',
                index: 'GatePassValidUpto',
                editable: true,
                sorttype: "date",
                unformat: pickDate
            },
            {
                name: 'Approve',
                index: 'Approve',
                width: 148,
                editable: true,
                edittype: "select",
                editoptions: {
                    value: "1:Approve;0:Rejected"
                }
            },
            {
                name: 'REMARK',
                index: 'REMARK',
                width: 150,
                sortable: false,
                editable: true,
                edittype: "textarea",
                editoptions: {
                    rows: "2",
                    cols: "10"
                }
            }
        ],
        pager: '#grid-pager-Labor',
        altRows: true,
        cacheUrlData: true,
        //toppager: true,
        rowNum: 1,
        scrollOffset: 0, // to remove offset of scroll bar for imporved gui
        rowList: [10, 50, 100, 200, 300, 500, 800, 1000, 1500],
        //onSelectRow: editRow,
        viewrecords: true,
        emptyrecords: "Nothing to display",
        //multiselect: true,
        //multiboxonly: false,
        gridview: true,
        loadComplete: function() {
            var table = this;
            setTimeout(function() {
                //styleCheckbox(table);
                //updateActionIcons(table);
                updatePagerIcons(table);
                enableTooltips(table);
            }, 0);
        },
        jsonReader: {
            page: function(obj) {
                return 1;
            },
            total: function(obj) {
                return 1;
            },
            records: function(obj) {
                return obj.d.length;
            },
            root: function(obj) {
                return obj.d;
            },
            repeatitems: false,
            id: "0"
        },

        //editurl: "LaborApproval.aspx/PostLaborData",
        editurl: "",
        caption: 'Labor List',
        shrinkToFit: true,
        height: 'auto',
        //autowidth: true,
    });


    $('#grid-table-Labor').jqGrid('navGrid', '#grid-pager-Labor', {
        edit: false,
        del: false,
        search: true,
        searchtext: "Search",
        searchicon: 'ace-icon fa fa-search orange',
        view: true,
        viewtext: "View",
        viewicon: 'ace-icon fa fa-search-plus grey',
    })
});

function updatePagerIcons(table) {
    var replacement = {
        'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
        'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
        'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
        'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
    };
    $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function() {
        var icon = $(this);
        var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
        if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
    })
}

function enableTooltips(table) {
    $('.navtable .ui-pg-button').tooltip({
        container: 'body'
    });
    $(table).find('.ui-pg-div').tooltip({
        container: 'body'
    });
}

function pickDate(cellvalue, options, cell) {
    setTimeout(function() {
        $(cell).find('input[type=text]')
            .datepicker({
                format: 'dd-mm-yyyy',
                autoclose: true
            });
    }, 0);
}

Upvotes: 1

Views: 1328

Answers (2)

Harshwardhan Kangoriya
Harshwardhan Kangoriya

Reputation: 93

I Used following code to complete my task 

          $(function () {

            var grid_selector = "#grid-table-Labor";

            $("#grid-table-Labor").jqGrid({
                url: 'LaborApproval.aspx/GetLaborData', //asp function to get all data from data base to grid 
                data: "{}",
                datatype: 'json',
                mtype: 'POST',
                serializeGridData: function (postData) {
                    return JSON.stringify(postData);
                },
                ajaxGridOptions: { contentType: "application/json" },
                loadonce: true,
                colNames: [' ', 'Worker Code', 'Name', 'Contractor', 'DOJ', 'Police Verification', 'Gate Pass Valid Upto', 'Status', 'Remark'],
                colModel: [
                                {
                                    name: 'myac', index: 'myac', width: 80, fixed: true, sortable: false, resize: false, formatter: 'actions',
                                    formatoptions: {
                                        keys: true,
                                        delbutton: false,
                                        editOptions: {},
                                        addOptions: {},
                                        delOptions: {}
                                    }
                                },
                                { name: 'EMPCODE', index: 'EMPCODE', width: 108, formatter:fontColorFormat, key: true },
                                { name: 'NAME', index: 'NAME', width: 140 },
                                { name: 'CONTNAME', index: 'CONTNAME', width: 160 },
                                { name: 'DOJ', index: 'DOJ', width: 70, formatter: 'date', formatoptions: { newformat: 'd-m-y' } },
                                { name: 'POLICE_VRIFICATION', index: 'POLICE_VRIFICATION', width: 124 },
                                { name: 'GatePassValidUpto', index: 'GatePassValidUpto', editable: true, sorttype: "date", formatter: 'date', unformat: pickDate, formatoptions: { newformat: 'd-m-Y' } },
                                { name: 'Approve', index: 'Approve', width: 148, editable: true, edittype: "select", editoptions: { value: "True:Approve;False:Reject" } },
                                { name: 'REMARK', index: 'REMARK', width: 150, sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "10" } }
                ],
                pager: '#grid-pager-Labor',
                altRows: true,
                //cacheUrlData: true,
                //toppager: true,
                rowNum: 10,
                scrollOffset: 0, // to remove offset of scroll bar for imporved gui
                rowList: [10, 50, 100, 200, 300, 500, 800, 1000, 1500],
                //onSelectRow: editRow,
                viewrecords: true,
                emptyrecords: "Nothing to display",
                //multiselect: true,
                //multiboxonly: false,
                gridview: true,
                loadComplete: function () {
                    var table = this;
                    setTimeout(function () {
                        //styleCheckbox(table);
                        //updateActionIcons(table);
                        updatePagerIcons(table);
                        enableTooltips(table);
                    }, 0);
                },
                jsonReader: {
                    page: function (obj) { return 1; },
                    total: function (obj) { return 1; },
                    records: function (obj) { return obj.d.length; },
                    root: function (obj) { return obj.d; },
                    repeatitems: false,
                    id: "0"
                },                    
                editurl: '../../Handler/JQGridHRHandler.ashx',
                caption: 'Labor List',
                shrinkToFit: true,
                height: 'auto',
                //autowidth: true,
                xmlReader: {
                    root: "list",
                    row: "Response",
                    id: "cfgId",
                    repeatitems: false
                },
                beforeSelectRow: function (rowid, e)
                {
                    var href = '../Tab_Pages/EmployeeTab.aspx?empcode=' + rowid;
                    window.open(href);
                    return false;                            

                    //var iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]);
                    //if (this.p.colModel[iCol].name === 'EMPCODE') {                                                       
                    //    var param = { param: rowid };

                    //    console.log(rowid);
                    //    $.ajax({
                    //        url: "LaborApproval.aspx/ShowMe",                                
                    //        data: JSON.stringify(param),
                    //        dataType: "json",
                    //        type: "POST",
                    //        contentType: "application/json; charset=utf-8",                         
                    //        success: function (data) {
                    //            console.log(data);                                                                            
                    //                    var box = bootbox.dialog({
                    //                            show: true,
                    //                            message: data['d'],
                    //                            title: "Labour Details",
                    //                            buttons: {
                    //                                ok: {
                    //                                    label: "OK",
                    //                                    className: "btn-primary",
                    //                                    callback: function() {
                    //                                        console.log('OK Button');
                    //                                    }
                    //                                }                                   
                    //                            }
                    //                    });
                    //                    box.modal('show');
                    //                },
                    //        error: function (XMLHttpRequest, textStatus, errorThrown) {
                    //            var err = eval("(" + XMLHttpRequest.responseText + ")");
                    //            alert(err.Message)
                    //            // console.log("Ajax Error!");  
                    //        }
                    //    });

                    //    return false;
                    //}
                }
            });



            $('#grid-table-Labor').jqGrid('navGrid', '#grid-pager-Labor',
                {
                    edit: false,
                    del: false,
                    search: true,
                    searchtext: "Search",
                    searchicon: 'ace-icon fa fa-search orange',
                    view: true,
                    viewtext: "View",
                    viewicon: 'ace-icon fa fa-search-plus grey',
                },
                {   //EDIT portion
                    //Can also set the width and height of the editing window as below commented way 
                    //height: 300,
                    //width: 400,
                    //top: 50,
                    //left: 100,
                    //dataheight: 280,
                    closeOnEscape: true,//Closes the popup on pressing escape key
                    reloadAfterSubmit: true,
                    drag: true,
                    afterSubmit: function (response, postdata) {
                        if (response.responseText == "") {
                            $(this).jqGrid('setGridParam',
                              { datatype: 'json' }).trigger('reloadGrid');//Reloads the grid after edit
                            return [true, '']
                        }
                        else {
                            $(this).jqGrid('setGridParam',
                              { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
                            return [false, response.responseText]
                            //Captures and displays the response text on th Edit window
                        }
                    },
                    editData: {
                        EmpId: function () {
                            var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
                            var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
                            return value;
                        }
                    }
                })
        });

        function updatePagerIcons(table) {
            var replacement =
            {
                'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
                'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
                'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
                'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
            };
            $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
                var icon = $(this);
                var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
            })
        }

        function enableTooltips(table) {
            $('.navtable .ui-pg-button').tooltip({ container: 'body' });
            $(table).find('.ui-pg-div').tooltip({ container: 'body' });
        }

        function pickDate(cellvalue, options, cell) {
            setTimeout(function () {
                $(cell).find('input[type=text]')
                    .datepicker({ format: 'dd-mm-yyyy', autoclose: true });
            }, 0);
        }
        var lastSelection;

        function fontColorFormat(cellvalue, options, rowObject) {
            var color = "blue";
            var cellHtml = "<span style='color:" + color + "' originalValue='" + cellvalue + "'>" + cellvalue + "</span>";
            return cellHtml;
        }

        function editRow(id) {
            if (id && id !== lastSelection) {
                var grid = $("#grid-table-Labor");
                grid.jqGrid('restoreRow', lastSelection);
                grid.jqGrid('editRow', id, { keys: true, focusField: 5 });
                lastSelection = id;
            }
        }

Upvotes: 0

Tony Tomov
Tony Tomov

Reputation: 3292

It is important to note which version of jqGrid is used. If you use Guriddo jqGrid you may need to use serializeRowData described in our documentation here the same you use serializeGridData to get parameters from the grid.

Kind Regards

Upvotes: 1

Related Questions