Blogs

jqxGrid supports Excel-like pinned (frozen) rows. This feature also allows you to pin columns to the left the gridview’s canvas. The pinned rows and columns are very useful when working with large tables and it makes it easy to scroll and compare data from different parts of the table.

To pin a DataGrid column, you need to set the column’s pinned property to true. In the sample code below, the ‘First Name’ and ‘Last Name’ columns are pinned.

$("#jqxgrid").jqxGrid(
{
    source: dataAdapter,
    theme: 'darkblue',
    columns: [
        { text: 'First Name', pinned: true, dataField: 'firstname', width: 100 },
        { text: 'Last Name', pinned: true, dataField: 'lastname', width: 100 },
        { text: 'Product', dataField: 'productname', width: 180 },
        { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
        { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
        { text: 'Total', dataField: 'total', cellsalign: 'right', width: 300, cellsformat: 'c2' }
    ]
});