How to add custom columns in jqgrid ~ MiTechDev.com

Mitechdev.com is a programming blog which focused on Web Programming and development

Sunday, 3 April 2016

How to add custom columns in jqgrid

00:57:00 Posted by raviteja swayampu , No comments
Hi friends in this tutorial we are going to learn the 'how to add custom columns in the Jqgrid.
I am going to explain this in a step by step manner.

Step 1: Create Jqgrid application in visual studio
Note:in the previous tutorial i explained how to implement jqgrid in the ASP.NET MVC.If you are new to the Jqgrid please go through the "Implementation of jqgrid in ASP.NET MVC".click on the below link.
Download the source code for the Jqgrid from here Download

Lookup of the Jqgrid application is like this.

Step 2: Modify the Javascript file
1.To achieve the custom column links we need modify the javascript file
2.Jqgrid script file after modifiction

$(function () {
    debugger;
    $("#grid").jqGrid({
        url: "/Jqgrid/GetValues",
        datatype: 'json',
        mtype: 'Get',
        //table header name 
        colNames: ['Id', 'Name', 'Phone', 'Address', 'DOB'],
        //colModel takes the data from controller and binds to grid 
        colModel: [
            { key: true, hidden: true, name: 'Id', index: 'Id', editable: true ,width:30},
            { key: false, name: 'Name', index: 'Name', editable: true, width: 30 },
            { key: false, name: 'Phone', index: 'Phone', editable: true, width: 30 },
            { key: false, name: 'Address', index: 'Address', editable: true, width: 30 },
            { key: false, name: 'DOB', index: 'DOB', editable: true, formatter: 'date', formatoptions: { newformat: 'd/m/Y' }, width: 60 },
        //custom column for actions 
        { key: false, name: 'Actions', index: 'Actions', editable: false, formatter: displayButtons }
        ],

        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [10, 20, 30, 40],
        height: '100%',
        viewrecords: true,
        caption: 'Jq grid sample Application',
        emptyrecords: 'No records to display',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            Id: "0"
        },
        autowidth: true,
        multiselect: false
        //pager-you have to choose here what icons should appear at the bottom
        //like edit,create,delete icons
    }).navGrid('#pager', { edit: true, add: true, del: true, search: false, refresh: true },
        {
            // edit options
            zIndex: 100,
            url: '/Jqgrid/Edit',
            closeOnEscape: true,
            closeAfterEdit: true,
            recreateForm: true,
            afterComplete: function (response) {
                if (response.responseText) {
                    alert(response.responseText);
                }
            }
        },
        {
            // add options
            zIndex: 100,
            url: "/Jqgrid/Create",
            closeOnEscape: true,
            closeAfterAdd: true,
            afterComplete: function (response) {
                if (response.responseText) {
                    alert(response.responseText);
                }
            }
        },
        {
            // delete options
            zIndex: 100,
            url: "/Jqgrid/Delete",
            closeOnEscape: true,
            closeAfterDelete: true,
            recreateForm: true,
            msg: "Are you sure you want to delete this task?",
            afterComplete: function (response) {
                if (response.responseText) {
                    alert(response.responseText);
                }
            }
        });

    //custom formator function to display the Links
    function displayButtons(cellvalue, options, rowObject) {
        var edit = "<a href='#'>Edit</a>",
             Details = "<a href='#'>Details</a> |",
             Delete = "<a href='#'>Delete</a>";
        return edit + Details + Delete;
    }
 
});

3.In the above code i added the extra column after 'DOB' column
{ key: false, name: 'Actions', index: 'Actions', editable: false, formatter: displayButtons } colNames: ['Id', 'Name', 'Phone', 'Address', 'DOB','Actions'],
4. i added custom formator function in the below with the parameters
  • cellVlaue,
  • options,
  • rowObject
5.Now the run the application
you will get the below window
Conclusion:
I hope you understand this tutorial .If you recommend any type of modifications to this
article please comment ..
Download the source code from above link for practise..

0 comments:

Post a Comment