Wijmo UI for the Web
Freezing Columns
Wijmo User Guide > Widgets > Grid > Grid Concepts > Columns > Freezing Columns

The staticColumnIndex option of the wijgrid widget allows you to keep particular columns static while scrolling horizontally through the grid. You can provide the index value of columns that you want to keep static.

Note that all the columns before the static column will also be considered static.

For example, the script below sets the staticColumnIndex to 1. Therefore,column 0 also remains static at the time of scrolling.

Script
Copy Code
<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
        $(document).ready(function () {
            $("#wijgrid").width(500).wijgrid({
                cellClicked: function (e, args) {
                    alert(args.cell.value());
                },
                allowSorting: true,
                scrollMode: "horizontal",
                staticColumnIndex: 1, // set static columns
                data: [
                    [27, 'Canada', 'Adams', 'Craig', 'Singing', 27, 'Male'],
                    [43, 'Germany', 'Boucher', 'Philippe', 'Playing football', 34, 'Male'],
                    [24, 'Canada', 'Cooke', 'Matt', 'Spending time with kids', 37, 'Male'],
                    [87, 'Canada', 'Lucy', 'Sidney', 'Watching television', 23, 'Female'],
                    [1, 'United States', 'Curry', 'John', 'Internet Surfing', 30, 'Male'],
                ],
                columns: [
                       { headerText: "User ID", dataType: 'number' },
                       { headerText: "Country", dataType: 'string' },
                       { headerText: "First Name", dataType: 'string' },
                       { headerText: "Last Name", dataType: 'string' },
                       { headerText: "Hobby", dataType: 'string' },
                       { headerText: "Age", dataType: 'number' },
                       { headerText: "Gender", dataType: 'string' },
                ]
            });
        });
    });
</script>