what are colnames and colmodel in jqgrid - jqgrid

Question

Can you explain what are these colnames and colmodel in jqgrid ?
Where are getting used ? defining columns , then ...how these 2 colnames / colmodels are inter related and all ??
and can please point why sorting is not happening in my below code:
<script type="text/javascript">
$('#grid').jqGrid({
url: '#(Url.Action("LoadIssues","Home"))',
datatype: 'json',
colNames: ['Category', 'Description', 'Issue_Title', 'LOGGED_BY', 'Notes', 'Priority', 'Status'],
mtype: 'GET',
colModel: [
{ name: 'Category', width: 100 },
{ name: 'Description', width: 100 },
{ name: 'Issue_Title', width: 100 },
{ name: 'LOGGED_BY', width: 100 },
{ name: 'Notes', width: 100 },
{ name: 'Priority', width: 100 },
{ name: 'Status', width: 100 }
],
jsonReader: {
id: 'id',
repeatitems: false
},
rowNum: 10,
rowList: [5, 10, 20, 30],
gridview: true,
pager: '#gridpager',
sortname: 'Description',
sortorder: "desc",
viewrecords: true,
shrinkToFit: true,
width: $('#gridContainer').width(),
height: 200,
hidegrid: false,
gridComplete: function () {
$('#gridContainer').find('.ui-jqgrid-titlebar').hide();
}
})

Answer 1

In a nutshell, colNames defines the names of your jqGrid columns on the page, and colModel specifies options for each column (name in the dataset, width, etc).
The documentation has more information:
colModel Array which describes the parameters of the columns.This is the most important part of the grid. For a full description of all valid values see colModel API.
colNames
An array in which we place the names of the columns. This is the text that appears in the head of the grid (header layer). The names are separated with commas. Note that the number of elements in this array should be equal of the number elements in the colModel array.