example-header-row.html in Slickgrid 6

Demonstrates:

Using a fixed header row to implement column-level filters
Type numbers in textboxes to filter grid data
File

js/slickgrid/examples/example-header-row.html
View source
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
        <style>
            .slick-headerrow-column {
                background: #87ceeb;
            }

            .slick-headerrow-column input {
                margin: 0;
                padding: 0;
            }
        </style>
	</head>
	<body>
		<div style="width:600px;float:left;">
			<div id="myGrid" style="width:100%;height:500px;"></div>
		</div>

		<div class="options-panel" style="width:320px;margin-left:650px;">
            <h2>Demonstrates:</h2>
            <ul>
                <li>Using a fixed header row to implement column-level filters</li>
                <li>Type numbers in textboxes to filter grid data</li>
            </ul>
		</div>

		<script src="../lib/firebugx.js"></script>

		<script src="../lib/jquery-1.4.3.min.js"></script>
		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
		<script src="../lib/jquery.event.drag-2.0.min.js"></script>

        <script src="../slick.core.js"></script>
		<script src="../slick.dataview.js"></script>
		<script src="../slick.grid.js"></script>

		<script>
        var dataView;
		var grid;
		var data = [];
        var options = {
            enableCellNavigation: true,
            showHeaderRow: true
        };
        var columns = [];
        var columnFilters = {};

        for (var i = 0; i < 10; i++) {
            columns.push({
                id: i,
                name: String.fromCharCode("A".charCodeAt(0) + i),
                field: i,
                width: 60
            });
        }


        function updateHeaderRow() {
            for (var i = 0; i < columns.length; i++) {
                if (columns[i].id !== "selector") {
                    var header = grid.getHeaderRowColumn(columns[i].id);
                    $(header).empty();
                    $("<input type='text'>")
                        .data("columnId", columns[i].id)
                        .width($(header).width() - 4)
                        .val(columnFilters[columns[i].id])
                        .appendTo(header);
                }
            }
        }

        function filter(item) {
            for (var columnId in columnFilters) {
                if (columnId !== undefined && columnFilters[columnId] !== "") {
                    var c = grid.getColumns()[grid.getColumnIndex(columnId)];
                    if (item[c.field] != columnFilters[columnId]) {
                        return false;
                    }
                }
            }
            return true;
        }

		$(function()
		{
			for (var i=0; i<100; i++) {
				var d = (data[i] = {});
                d["id"] = i;
                for (var j=0; j<columns.length; j++) {
                    d[j] = Math.round(Math.random() * 10);
                }
			}

            dataView = new Slick.Data.DataView();
            grid = new Slick.Grid("#myGrid", dataView, columns, options);


			dataView.onRowCountChanged.subscribe(function(e,args) {
				grid.updateRowCount();
                grid.render();
			});

			dataView.onRowsChanged.subscribe(function(e,args) {
				grid.invalidateRows(args.rows);
				grid.render();
            });

            $(grid.getHeaderRow()).delegate(":input", "change keyup", function(e) {
                columnFilters[$(this).data("columnId")] = $.trim($(this).val());
                dataView.refresh();
            });


            grid.onColumnsReordered.subscribe(function(e, args) {
                updateHeaderRow();
            });

            grid.onColumnsResized.subscribe(function(e, args) {
                updateHeaderRow();
            });

            dataView.beginUpdate();
            dataView.setItems(data);
            dataView.setFilter(filter);
            dataView.endUpdate();

            updateHeaderRow();

		})
		</script>
	</body>
</html>
You are here

example-header-row.html in Slickgrid 6

Demonstrates:

File

API Navigation
