Auto serial number column to jqxgrid - jqwidget

Question

How to add auto serial number column to jqxgrid when database records are in random order and
there is no specific field in database for serial number of records or
in case we are only dealing with a subset of records from a table?

Answer 1

Add this in your column describing area
{
text: 'Srl No', sortable: false, filterable: false, editable: false,
groupable: false, draggable: false, resizable: false,
datafield: '', columntype: 'number', width: 50,
cellsrenderer: function (row, column, value) {
return "<div style='margin:4px;'>" + (value + 1) + "</div>";
}
},
Then your Grid code look like below
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var data = MyJsonData;
var source =
{
localdata: data,
datatype: "json",
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' }
]
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
width: 300,
source: dataAdapter,
columnsresize: true,
columns: [
{
text: 'Srl No', sortable: false, filterable: false, editable: false,
groupable: false, draggable: false, resizable: false,
datafield: '', columntype: 'number', width: 50,
cellsrenderer: function (row, column, value) {
return "<div style='margin:4px;'>" + (value + 1) + "</div>";
}
},
{ text: 'Name', datafield: 'firstname', width: 125 },
{ text: 'Last Name', datafield: 'lastname', width: 125 }
]
});
});
</script>

Answer 2

Grid Cells Rendering alongwith following code will help
{ text: 'Serial Number', dataField: '', columntype: 'number', width: 50,cellsrenderer: slrenderer },
In order to render we
var slrenderer = function (value) {
value=value+1; // default numbering starts at 0
return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
}