Wijmo UI for the Web
Allow Scrolling

The wijgrid widget allows vertical and horizontal scrolling of data using scroll bars. The script below sets the value of height option to 300px and scrollMode option to "auto".

You can set the scrollingSettings to select the mode of scrolling. Possible values are vertical, horizontal and both.

Script
Copy Code
<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
        $(document).ready(function () {
            // bind the grid
            $("#demo").wijgrid({
                scrollMode: "auto",
                editingMode: "cell",
                data: getData(1000),
                columnsAutogenerationMode: "none",
                columns: [
                    { dataKey: "ProductName", headerText: "Product Name", dataType: "string" },
                    { dataKey: "UnitPrice", headerText: "Unit Price", dataType: "currency" },
                    { dataKey: "Quantity", headerText: "Quantity", dataType: "number", dataFormatString: "n0" },
                    { dataKey: "Discount", headerText: "Discount", dataType: "number", dataFormatString: "p0" },
                    { dataKey: "OrderDate", headerText: "Order Date", dataType: "datetime", dataFormatString: "MMM-dd-yyyy", textAlignment: "center" },
                    { dataKey: "Overseas", headerText: "Overseas", dataType: "boolean" }
                ]
            });
        });
    });
    // random data
    function getData(count) {
        var data = [];
        var name = "Lorem,Ipsum,Dolor,Amet,Consectetur,Adipiscing,Elit,Vivamus,Pharetra,Velit,Eget,Imperdiet,Mattis,Egestas,Donec,Tempus,Vestibulum,Tincidunt,Blandit,Lacinia,Lobortis,Feugiat,Mauris,Massa,Rutrum,Pulvinar,Ornare,Facilisi,Sociis,Natoque,Penatibus".split(",");
        var suffix = "LLC,Inc,International,Transpacific,Services,Financial,Enterprises,Consultants,Foundation,Institute".split(",");
        for (var i = 0; i < count; i++) {
            data.push({
                TransactionID: i,
                ProductName: getString(name) + " " + getString(suffix),
                UnitPrice: getNumber(10, 100),
                Quantity: Math.floor(getNumber(1, 500)),
                Discount: getNumber(0, 0.3),
                OrderDate: getDate(i),
                Overseas: Math.random() > 0.8
            });
        }
        return data;
    }
    function getString(arr) {
        return arr[Math.floor((Math.random() * arr.length))];
    }
    function getNumber(lo, hi) {
        return lo + Math.random() * (hi - lo);
    }
    function getDate(daysAgo) {
        return new Date((new Date()).getTime() - daysAgo * 24 * 3600 * 1000);
    }
</script>