Jqgrid-Crud operations

(ASP.NET MVC)


Hi,
I did r&d on the jqgrid. I perform the following operations in the jqgrid.
1. Add
2. Delete
3. Edit with validation
4. Search
5. Refresh
6. Paging
7. Sorting
8. View
9. Applying different theme to the jqgrid.

I pasted the the code below for the jqgird and attached the jqgrid project in this article. I hope it might helpful for those working on the jqgrid.

  var previd;

    var uresult;

    $(function () {
        $(''#tbl_jqgrid'').jqGrid(
                 {
                     url: ''/Home/GetEmployees',
                     datatype: 'json',
                     mtype: 'POST',
                     colNames: ['ID', 'Name', 'Age', 'Salary'],
                     colModel: [
                         //{ name: 'action', index: 'action', sortable:false, formatter: Buttons},
                         { name: 'ID', index: 'ID', width: 150, stype: 'text' },
                         { name: 'Name', index: 'Name', width: 150, editable: true },
                         { name: 'Age', index: 'Age', width: 150, editable: true, edittype: "select", editoptions: { value: "select:select;20:20;25:25;27:27;31:31;33:33;35:35;37:37;38:38;39:39;40:40;41:41;42:42" } },
                         { name: 'Salary', index: 'Salary', width: 150, editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "10" } }
                     ],
                     rowNum: 10,
                     sortname: 'ID',
                     width: 'auto',
                     height: 'auto',
                     gridview: true,
                     rownumbers: false,
                     multiselect: true,
                     viewrecords: true,
                     rowList: [10, 20, 30],
                     pager: $('#div_jqgpager'),
                     sortorder: 'desc',
                     caption: 'Employees List',
                     scrollOffset: 0,
                     //grouping: true,
                     //groupingView: {
                     //    groupField: ['Age']
                     //},
                     ondblClickRow: function (id) {
                         if (id && id !== previd) {
                             var rowData = $('#tbl_jqgrid').getRowData(id);
                             $('#tbl_jqgrid').restoreRow(previd);
                             $('#tbl_jqgrid').editRow(id, true, null, onSaveSuccess, '/Home/Update', { EmpId: rowData.ID });
                             previd = id;
                         }
                     },
                     gridComplete: function () {

                         var color = $('#drp_colors option:selected').text();
                         var column = $('#drp_columns option:selected').text();

                         if (color != '--select--' && column != '--select--') {
                             var grid = $('#tbl_jqgrid');
                             var ids = grid.getDataIDs();
                             for (var i = 0; i < ids.length; i++) {
                                 var age = grid.getCell(ids[i], 'Age');
                                 age = parseInt(age);

                                 switch (column) {
                                     case "age > 30 & age < 50":
                                         if (age > 30 && age < 50)
                                             grid.setCell(ids[i], 'Age', age, { 'background': color, 'color': 'white' });
                                         break;
                                     case "salary > 15000 & salary < 40000":
                                         var salary = grid.getCell(ids[i], 'Salary');
                                         salary = parseInt(salary);
                                         if (salary > 15000 & salary < 40000)
                                             grid.setCell(ids[i], 'Salary', salary, { 'background': color, 'color': 'white' });
                                         break;

                                 }
                             }
                         }
                     }

                     //afterSubmit: function (response, postdata) {
                     //    var result = jQuery.parseJSON(response.responseText);
                     //}
                 });

        $('#tbl_jqgrid').navGrid('#div_jqgpager', {
            edit: false,
            add: true,
            del: true,
            search: true,
            view: true,
            viewtext: 'view',
            searchtext: "Search",
            addtext: "Add",
            //edittext: "Edit",
            deltext: "Delete"
        },

//edit
{
    onclickSubmit: function (eparams) {

        alert('submit clicked');
    }
},
//Add
{
    url: '/Home/Add',
    closeAfterAdd: true,
    bSubmit: 'Add Employee',
    afterComplete: function (response, postdata) {
        MessageFun(response.responseText);
    },
    reloadAfterSubmit: true
    //beforeShowForm: function (form) { alert('hello'); }

},
//Delete
{
    url: '/Home/Delete',
    caption: 'Delete Employee',
    msg: 'Do you want to delete the selected employee ?',
    bSubmit: 'Delete Employee',
    width: 'auto',
    height: 'auto',
    closeAfterDelete: true,
    onclickSubmit: function (eparams) {
        var gr = jQuery("#tbl_jqgrid").jqGrid('getGridParam', 'selrow');
        var val = jQuery('#tbl_jqgrid').jqGrid('getCell', gr, 'ID');
        return { ID: val };
    },
    reloadAfterSubmit: true,
    //afterSubmit: function (response, postdata) {

    //    //$("#tbl_jqgrid").trigger("reloadGrid");
    //    return [response.responseText == 'OK', response.responseText];
    //},
    afterComplete: function (response, postdata) {
        MessageFun(response.responseText);
    }

},
//Search
{
    caption: 'Search employee',
    Find: 'Search',
    showQuery: true,
    sopt: ['eq', 'ne', 'cn', 'bw', 'ew']
    //onSearch: function (rowid) {
    //    alert('search');
    //}
},
//View
{
    caption: 'View employee'
}
);

        $('#btn_selectedids').click(function () {

            var selids;
            selids = $('#tbl_jqgrid').jqGrid('getGridParam', 'selarrrow');
            MessageFun("selected ids: " + selids);
        });

    });

    function onSaveSuccess(xhr) {
        var result = xhr.responseText;

        //validation errors
        if (result.indexOf("successfully.") == -1) {
            var array = result.split(',');
            var ul = $('<ul style="color:red;"><li>Please correct the following errors:</li></ul>');
            for (var i = 0; i < array.length; i++)
                $(ul).append('<li>' + array[i] + '</li>');

            MessageFun(ul);
            return false;
        }
        else {

            var ul = $('<ul style="color:green;"><li>' + result + '</li></ul>');
            MessageFun(ul);
            return true;
        }
    }

    function MessageFun(msg) {

        $('#div-dialog').show();
        $('#div-dialog').html(msg).hide(8000);
    }


    function ApplyColor() {
        $('#tbl_jqgrid').trigger('reloadGrid');
    }

    function Reset() {

        $('#drp_colors').val('--select--');
        $('#drp_columns').val('--select--');
        $('#tbl_jqgrid').trigger('reloadGrid');

    }

<!-- Favorite theme -->
  $(function () {

        var cokie = document.cookie;

        if (cokie != "") {

            var array = cokie.split('=');
            var theme = array[array.length - 1];

            var drp = document.getElementById('drp_favtheme');

            for (var i = 0; i < drp.options.length; i++) {

                if (drp.options[i].text == theme) {
                    drp.options[i].selected = true;
                    break;
                }
            }
        }

    });

    function FavoriteThemeFun(drp) {

        var theme = $(drp).find('option:selected').text();
        document.cookie = "favetheme=" + theme;

        $.ajax({
            type: 'get',
            url: '/Home/FavoriteTheme',
            data: { Theme: theme },
            dataType: "json",
            success: function (data) {
                location.href = "/Home/Index";
            },
            error: function (data) {
                location.href = "/Home/Index";
            }
        });
    }


Ratings


Average Rating: 0.00 by 0 users
Giri Prasad
8/23/2014
8/23/2014
Download PDF
Download Project

Comments