How to Add Horizontal Scrollbar and Checkboxes in jqGrid

jqGrid is a powerful jQuery plugin for creating interactive tables. This guide will show you how to add a horizontal scrollbar and enable checkboxes for row selection in jqGrid.

Adding a Horizontal Scrollbar

To enable horizontal scrolling in jqGrid, you need to:

• Set a Fixed Width: Define a fixed width for the grid container.
• Disable Automatic Resizing: Use shrinkToFit: false to prevent automatic column resizing.

Enabling Checkboxes for Multi-Selection

To add checkboxes for row selection, follow these steps:

• Include a Checkbox Column: Use formatter: 'checkbox' in the column model.
• Enable Multi-Select: Set multiselect: true to allow multiple row selections.

Example Code

Here's a simplified example to demonstrate these features in jqGrid:

            $("#grid").jqGrid({
                url: 'data.json',
                datatype: "json",
                colModel: [
                    { name: 'id', label: 'ID', width: 75 },
                    { name: 'name', label: 'Name', width: 150 },
                    { name: 'value', label: 'Value', width: 150 },
                    { name: 'date', label: 'Date', width: 100 },
                    { name: 'checkbox', label: '', width: 50, formatter: 'checkbox' }
                ],
                viewrecords: true,
                height: 250,
                rowNum: 20,
                pager: "#pager",
                autowidth: true,
                scrollable: true,
                shrinkToFit: false,
                multiselect: true
            });
        });