HTML 5 ready fully functional grid with Knockout.JS and Angular support
JavaScript C# CSS TypeScript Other
Latest commit 9a0b121 Apr 28, 2015 @peleshenko peleshenko Fix link
Permalink
Failed to load latest commit information.
.nuget Fix builf Dec 23, 2013
TesserisPro.TGrid.Web Add documentation to itemsProvider, add demo Get Items pages Jan 23, 2015
TesserisPro.TGrid Update release.md Dec 22, 2014
tools Remove jquery, add minimization Nov 8, 2013
.gitattributes remove iis express Sep 14, 2013
.gitignore adding to git ignore Jun 27, 2014
LICENSE Remove redundant files add license Jan 23, 2014
README.md Fix link Apr 28, 2015
TGrid.0.1.1.nupkg update nuget Jan 27, 2014
TGrid.0.1.2.nupkg update nuget Jan 27, 2014
TGrid.0.2.1.nupkg Add release notes, add packages Feb 10, 2014
TGrid.0.2.2.1.nupkg Fix typings Feb 27, 2014
TGrid.0.2.2.nupkg Add release notes Feb 26, 2014
TGrid.0.2.3.nupkg update package versions Apr 22, 2014
TGrid.0.2.4.nupkg NugetPackageUpdate Jun 18, 2014
TGrid.0.2.5.nupkg Bug 344 Custom actions to open details: all details can be closed by … Jun 26, 2014
TGrid.0.2.6.nupkg Nuget version with bug 460 Jul 7, 2014
TGrid.0.2.7.nupkg Update demo site Aug 27, 2014
TGrid.TypeScript.DefinitelyTyped.0.2.2.1.nupkg Fix typeings Feb 27, 2014
TGrid.TypeScript.DefinitelyTyped.0.2.2.nupkg Fix typings Feb 27, 2014
TGrid.TypeScript.DefinitelyTyped.0.2.3.nupkg update package versions Apr 22, 2014
TGrid.TypeScript.DefinitelyTyped.0.2.4.nupkg
TGrid.TypeScript.DefinitelyTyped.0.2.5.nupkg Bug 344 Custom actions to open details: all details can be closed by … Jun 26, 2014
TGrid.sln add version 0.1 branch Jan 23, 2014
TGridArrayItemsProviderTypeScript.0.2.3.nupkg
TGridArrayItemsProviderTypeScript.0.2.4.nupkg Adding Nuget packages Jun 18, 2014
WE-Markdown.css update markdown preview css Jan 28, 2014

README.md

TGrid

Grid for your HTML5 applications

Developed by Tesseris Pro LLC

TypeScript, Angular and Knockout compatible, fully customizable grid with rich functionality.

TGrid can work on any device and any screen resolution. It dynamically adjusts content for screen and even changes the layout. TGrid grid supports any (really any) number of rows that can be loaded dynamically when user scrolls or selects page.

Project site | Demo page

Supported browsers:

  • Internet Explorer 9+
  • Mozilla Firefox
  • Google Chrome
  • Safari
  • iPhone/iPad
  • Android 4+
  • Windows Phone are supporrted.

Features

  • Knockout.js and Angular support.
  • No dependency on JQuery or any other libraries.
  • Angular or Knockout.JS support are attached as modules.
  • Possibility to implement adapter for another technology.
  • TypeScript compatible. TGrid is developed on TypeScript.
  • Fully customizable. Header, Cell, Details, Footer are fully customizable with templates.
  • Custom user actions support.
  • Paging.
  • Virtualization/lazy loading.
  • Predefined set of item providers and possiblity to create custom provider. Custom item provider should only support sorting and filtering.
  • Filtering, grouping and sorting.
  • Grouping and group collapsing with virtualization and paging.
  • Editing with cell template.
  • Automatic swtich to mobile mode depending on @media.
  • Fully customizable with CSS. No hardcoded styles.
  • Free and open source.

Usage

Please see all samples with code at Demo page

If this overview and demo page with code samples are not enougth, please submit an issue

Simple TGrid usage scenario:

Grid rows in JavaScript:

var items = [
    { Name: "John", Surname: "Doe", Age: "33" }
    //... more items
];

Simple knockout view model in JavaScript:

function vm() {
    var self = this;
    self.nameColumnTitle = "First Name";
    self.itemsProvider = new TesserisPro.TGrid.ArrayItemsProvider(items);
};

Apply view-model binding (see Knockout.js for details):

$(function () {
    ko.applyBindings(new vm());
});

Grid markup in HTML:

<div data-bind="tgrid: {provider: itemsProvider}">
   <script type="text/html">  
       <column data-g-member="Name">  
       </column>  
       <column data-g-member="Surname">  
       </column>  
       <column data-g-member="Age">  
       </column>  
   </script>  
</div>

Custom templates:

Grid marckup with custom cell template:

<div data-bind="tgrid: { provider: itemsProvider }">
     <script type="text/html">
         <column data-g-member="Name">
             <cell>
                 <span style="color: red;" data-bind="text: item.Name"></span>               
             </cell>
         </column>
         <column data-g-member="Surname">
             <cell>
                 // Simple Knockout binding in template
                 <span data-bind="text: item.Surname"></span>
             </cell>
         </column>
         <column data-g-member="Age">           
             <cell>
                 <span style="color: red;" data-bind="text: item.Age"></span>
             </cell>
         </column>
     </script>
 </div>

Grid cell is bound to following datacontext (TypeScript code):

export class ItemViewModel {
    public model: any;
    public item: any;
    public grid: TGrid;
    public isGroupHeader: boolean;
}

Editing with templates:

<div data-bind="tgrid: { provider: itemsProvider }">
    <script type="text/html">
        <column data-g-member="name">
            <cell>
                <span style="color: green;" data-bind="text: item.Name, event: { click: model.toggleActive }, css: { hidden: model.editingItem() == item }"></span>                                    
                <input class="hidden" style="color: red;" data-bind="value: item.Name, css: { visible: model.editingItem() == item} "></input>                   
            </cell>
        </column>
        <column data-g-member="key">
            <cell>
                <span data-bind="text: item.Surname, event: { click: model.toggleActive }, css: { hidden: model.editingItem() == item } "></span>
                <input class="hidden" data-bind="value: item.Surname, css: { visible: model.editingItem() == item }"></input>
            </cell>
        </column>
        <column data-g-member="Age">           
            <cell>
                <span style="color: red;" data-bind="text: item.Age, event: { click: model.toggleActive }, css: { hidden: model.editingItem() == item }"></span>
                <input class="hidden" style="color: red;" data-bind="value: item.Age, css: { visible: model.editingItem() == item }"></input>
            </cell>
        </column>
    </script>
</div>

See more at Demo page