An implementation of the awesome Fuel UX datagrid with an ajax-enabled data source that also supports nested properties.

NestedAjaxDataSource.js

(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
		define([ 'underscore' ], factory);
	} else {
		root.NestedAjaxDataSource = factory();
	}
}(this, function() {

	var NestedAjaxDataSource = function(options) {
		this._formatter = options.formatter;
		this._columns = options.columns;
		this._delay = options.delay || 0;
		this._pageIndex = options.pageIndex || 0;
		this._pageSize = options.pageSize || 10;
        this._data = options.data;
        //AJAXification by @btaylordesign
        this._data_url = options.data_url;
        this._data_key = options.data_key;
        this._initial_load_from_server = options.initial_load_from_server || false;
        this._always_load_from_server = options.always_load_from_server || false;
        this.reload_data_from_server = false;
	};

	NestedAjaxDataSource.prototype = {

		columns : function() {
			return this._columns;
		},

		data : function(options, callback) {
			var self = this;

			setTimeout(function() {
				 var data = $.extend(true, [], self._data),
                 count = data.length;
                
                 if (self.reload_data_from_server || self._initial_load_from_server || self._always_load_from_server)
                 {
                     $.ajax(self._data_url, {
                         dataType: 'json',
                         async: false,
                         type: 'GET'
                     }).done(function(json) {
                         data = self._data_key ? json[self._data_key] : json;
                         count = data.length;
                     });
 
                     self.reload_data_from_server = false;
                 }

				//FLATTENING by @JoeHetfield		        
		        $.each(self._columns, function(index, column) {
		            var pros = column.property.split('.');		 
		            if (pros.length > 1) {		 
		                $.each(data, function(index, row) {		 
		                    var tick = 1;
		                    var result = row[pros[0]];
		                    while (result && tick < pros.length) {
		                        result = result[pros[tick]];
		                        tick++;
		                    }
		                    row[column.property] = result;
		                });
		            }
		        });
		        
				// SEARCHING
				if (options.search) {
					data = _.filter(data, function(item) {
						var match = false;

						_.each(item, function(prop) {
							if (_.isString(prop) || _.isFinite(prop)) {
								if (prop.toString().toLowerCase().indexOf(
										options.search.toLowerCase()) !== -1)
									match = true;
							}
						});

						return match;
					});
				}

				// SORTING
				if (options.sortProperty) {
					data = _.sortBy(data, options.sortProperty);
					if (options.sortDirection === 'desc')
						data.reverse();
				}

				// PAGING
				var startIndex = self._pageIndex * self._pageSize;
				var endIndex = startIndex + self._pageSize;
				var end = (endIndex > count) ? count : endIndex;
				var pages = Math.ceil(count / self._pageSize);
				var page = self._pageIndex + 1;
				var start = startIndex + 1;

				data = data.slice(startIndex, endIndex);

				if (self._formatter)
					self._formatter(data);

				callback({
					data : data,
					start : start,
					end : end,
					count : count,
					pages : pages,
					page : page
				});

			}, this._delay)
		}
	};

	return NestedAjaxDataSource;
}));

var dataSource = new NestedAjaxDataSource({
        data_url : 'insert json url here',
		initial_load_from_server: true,
		columns : [ {
			property : 'complexProperty.nestedProperty',
			label : 'Inner Property',
			sortable : true
		}, {
			property : 'simpleProperty',
			label : 'Simple Property',
			sortable : true
		}],
		delay : 250
	});

	$('#fueluxGrid').datagrid({
		dataSource : dataSource,
		stretchHeight : true
	});