DataGrid Pinned(Fixed) Columns

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.

    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' }

jquery datagrid pinned columns

About admin

This entry was posted in JavaScript, JavaScript Plugins, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxGrid and tagged , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply