jqGrid colModel properties with examples

jqGrid is Javascript plugin that displays data in a tabular format with various configurations. As you have seen in the last post colModel plays an important role in defining the structure of the grid. colModel has various properties that we will explore in this post

jqGrid colModel properties

1. name : name /id of the column. required property
2. label : Displays as header of the grid column. If no specified then name property value is used as header value.
3. align : alignment of the data values in that particular column. Values can be – left, right, center
4. width : sets width of column in pixels.
5. firstsortorder : Sorts the columns on load for the first time – asc or desc
6. sorttype : Defines the type on which sorting needs to happen – string, date, number etc
7. sortable : Sets if column can be sortable. default:true
8. resizable : Sets if column can be resizable. default:true
9. editable : Sets if column values can be editable. default:false
10. template : Can be used to override the default values of the column.
11. formatter : Can define a predefined or a custom formatter for the data in the column. We wil take a closer look at this option in our next coming posts.
12. formatoptions : Can be used with formatter. More to come on this when we write about formatters

Using the above properties, lets see an example on how to use them in the colModel

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>jqGrid colModel properties Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/css/ui.jqgrid.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"></script>
    <script>
    //<![CDATA[
    $(function () {
        "use strict";
        $("#colModelGrid").jqGrid({
            colModel: [
                { name: "firstname", 
				  label: "First Name", 
				  width: 75 
				},
				{ name: "lastname",
				  label: "Last Name",
 				  width: 75
				},
                { name: "dob",
				  label: "Date of Birth",
				  width: 100, align: "center",
				  sorttype: "date",
                  formatter: "date",
				  formatoptions: { newformat: "d-M-Y" } 
				},
                { name: "balance",
  				  label: "Balance Amount",
				  width: 120,
				  template: "number",
				  sortable:false
  			    },
                { name: "savings",
  				  label: "is Savings Acc",
				  width: 100,
				  template: "booleanCheckbox",
				  resizable:false
				}                
            ],
            data: [
                { id: "10",  dob: "2015-10-01", firstname: "Ross", lastname:"Geller",  balance: "2000", savings:true },
                { id: "20",  dob: "2015-10-01", firstname: "Monica", lastname:"Geller",  balance: "1500", savings:true },
				{ id: "30",  dob: "2015-10-01", firstname: "Rachel", lastname:"Green",  balance: "5000", savings:true },
				{ id: "40",  dob: "2015-10-01", firstname: "Phoebe", lastname:"Buffay",  balance: "1000", savings:false },
				{ id: "50",  dob: "2015-10-01", firstname: "Chandler", lastname:"Bing",  balance: "4500", savings:true },
				{ id: "60",  dob: "2015-10-01", firstname: "Joey", lastname:"Tribibani",  balance: "0", savings:false }
            ],
            
        });
    });
    //]]>
    
    </script>
</head>
<body>
<table id="colModelGrid"></table>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jqGrid colModel properties Example</title>

//<![CDATA[

$(function () {

"use strict";

$("#colModelGrid").jqGrid({

colModel: [

{ name: "firstname",

label: "First Name",

width: 75

{ name: "lastname",

label: "Last Name",

width: 75

{ name: "dob",

label: "Date of Birth",

width: 100, align: "center",

sorttype: "date",

formatter: "date",

formatoptions: { newformat: "d-M-Y" }

{ name: "balance",

label: "Balance Amount",

width: 120,

template: "number",

sortable:false

{ name: "savings",

label: "is Savings Acc",

width: 100,

template: "booleanCheckbox",

resizable:false

}

data: [

{ id: "10", dob: "2015-10-01", firstname: "Ross", lastname:"Geller", balance: "2000", savings:true },

{ id: "20", dob: "2015-10-01", firstname: "Monica", lastname:"Geller", balance: "1500", savings:true },

{ id: "30", dob: "2015-10-01", firstname: "Rachel", lastname:"Green", balance: "5000", savings:true },

{ id: "40", dob: "2015-10-01", firstname: "Phoebe", lastname:"Buffay", balance: "1000", savings:false },

{ id: "50", dob: "2015-10-01", firstname: "Chandler", lastname:"Bing", balance: "4500", savings:true },

{ id: "60", dob: "2015-10-01", firstname: "Joey", lastname:"Tribibani", balance: "0", savings:false }

});

//]]>

</script>

</head>

<body>

</body>

</html>

Output
jqGrid colModel properties Example

Reference
1. Getting Starter jqGrid
2. colModel wiki