Introduction

It's a free jquery grid. Feel free to modify any code.

Features: ajax/client, sortable, pageable, column/cell template, events, js oop, fully customizable, etc.. The documentation is being created, so, subscribe to this project if you have interests.

Live Demos

Find the live demos: NA

 

How to use:

 

/// <reference path="Linq.js" />
/// <reference path="OOPager.js" />
/// <reference path="OOGrid.js" />

$(document).ready(function () {
    var grid = new OOGrid("demoGrid");
    grid.Columns = BuildColumns();
    grid.Mode = OOGrid.Modes.Ajax;
    grid.AjaxUrl = "/demos/grid/AjaxProducts";
    grid.Initialize();

});


function BuildColumns() {
    var columns = new Array();
    columns.push(new Column().SetMember("ID").SetWidth(50));
    columns.push(new Column().SetMember("Name").SetWidth(150));
    columns.push(new Column().SetMember("Description").SetWidth("auto"));
    var created = new Column().SetMember("CreatedDate").SetWidth(150).SetMemberDataType(DataType.Date);
    created.HeaderHtml = "<b>Created <span style='color:blue'>Date</span></b>";
    created.CellFormaterFunction = function (date) {
        return (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear() + " " + date.getHours() + ":" + date.getMinutes();
    };
    columns.push(created);
    return columns;
}

 

 

 

 

Screenshots


Leo

Last edited Jan 22, 2013 at 2:07 PM by leo_2010, version 10