You are here

Home » API reference » Slickgrid 6

SlickGrid example 6: AJAX Load in Slickgrid 6

Search:

Demonstrates:

  • loading data through AJAX
  • custom row height

WARNING:

  • Digg API uses request rate limiting. You may occasionally get an error if you do a frequent scrolling/resorting/searching.

File

js/slickgrid/examples/example6-ajax-loading.html
View source 
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>SlickGrid example 6: AJAX Load</title>
		<link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
        <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="examples.css" type="text/css" media="screen" charset="utf-8" />
		<style>
		.cell-story {
			white-space: normal!important;
      line-height: 19px!important;
		}

		.loading-indicator {
			display: inline-block;
			padding: 12px;
			background: white;
			-opacity: 0.5;
			color: black;
			font-weight: bold;
			z-index: 9999;
			border: 1px solid red;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			-moz-box-shadow: 0 0 5px red;
			-webkit-box-shadow: 0px 0px 5px red;
			-text-shadow: 1px 1px 1px white;
		}

		.loading-indicator label {
			padding-left: 20px;
			background: url('../images/ajax-loader-small.gif') no-repeat center left;
		}
		</style>
	</head>
	<body>
		<div style="width:700px;float:left;">
			<div class="grid-header" style="width:100%">
				<label>Digg stories</label>
				<span style="float:right;display:inline-block;">
					Search:
					<input type="text" id="txtSearch" value="apple">
				</span>
			</div>
			<div id="myGrid" style="width:100%;height:600px;"></div>
			<div id="pager" style="width:100%;height:20px;"></div>
		</div>
		<div style="margin-left:750px;margin-top:40px;;">
				<h2>Demonstrates:</h2>
				<ul>
					<li>loading data through AJAX</li>
					<li>custom row height</li>
				</ul>

                <h2>WARNING:</h2>
                <ul>
                    <li>Digg API uses request rate limiting.  You may occasionally get an error if you do a frequent scrolling/resorting/searching.</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="../lib/jquery.jsonp-1.1.0.min.js"></script>

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

		<script>
		var grid;
		var data = [];
		var loader = new Slick.Data.RemoteModel();

		var storyTitleFormatter = function(row, cell, value, columnDef, dataContext) {
		    return "<b><a href='" + dataContext["link"] + "' target=_blank>" + dataContext["title"] + "</a></b><br/>" + dataContext["description"];
		};


		var columns = [
			{id:"num", name:"#", field:"index", width:40},
			{id:"story", name:"Story", width:580, formatter:storyTitleFormatter, cssClass:"cell-story"},
			{id:"diggs", name:"Diggs", field:"diggs", width:60, sortable:true}
		];

		var options = {
			rowHeight: 64,
			editable: false,
			enableAddRow: false,
			enableCellNavigation: false
		};

		var loadingIndicator = null;



		$(function()
		{
			grid = new Slick.Grid("#myGrid", loader.data, columns, options);

			grid.onViewportChanged.subscribe(function(e,args) {
                var vp = grid.getViewport();
                loader.ensureData(vp.top, vp.bottom);
            });

			grid.onSort.subscribe(function(e,args) {
                loader.setSort(args.sortCol.field, args.sortAsc ? 1 : -1);
                var vp = grid.getViewport();
                loader.ensureData(vp.top, vp.bottom);
            });

			loader.onDataLoading.subscribe(function() {
				if (!loadingIndicator)
				{
					loadingIndicator = $("<span class='loading-indicator'><label>Buffering...</label></span>").appendTo(document.body);
					var $g = $("#myGrid");

					loadingIndicator
						.css("position", "absolute")
						.css("top", $g.position().top + $g.height()/2 - loadingIndicator.height()/2)
						.css("left", $g.position().left + $g.width()/2 - loadingIndicator.width()/2)
				}

				loadingIndicator.show();
			});

			loader.onDataLoaded.subscribe(function(e,args) {
				for (var i = args.from; i <= args.to; i++) {
					grid.invalidateRow(i);
				}

				grid.updateRowCount();
				grid.render();

				loadingIndicator.fadeOut();
			});

			$("#txtSearch").keyup(function(e) {
                if (e.which == 13) {
                    loader.setSearch($(this).val());
                    var vp = grid.getViewport();
                    loader.ensureData(vp.top, vp.bottom);
                }
            });



			// load the first page
			grid.onViewportChanged.notify();
		})
		</script>
	</body>
</html>