tubular 0,0 travis-ci grunt Bower npm

A set of AngularJS directives and C# classes designed to rapidly build modern web applications

Analytics Build Status Build status Coverage Status

Tubular

:star:Please star this project if you find it useful!

Tubular is a set of AngularJS directives and C# classes designed to rapidly build modern web applications. The centerpiece of Tubular is its fully templateable grid with lots of features such as server-side pagination, multi-column sorting and filtering, built-in export to CSV (client-side), and in-line editing of rows via templates.

Please visit the Tubular GitHub Page to learn how quickly you can start coding. Don’t forget to check out the Tubular Generator which quickly turns models into an awesome UIs!

NuGet Installation NuGet version

Important Note - ServerSide Nuget users must update to version 1.0 because previous LINQ Dynamic library was removed from Nuget.

Package containing only the client-side stuff

PM> Install-Package Tubular

Package containing only the server-side stuff

The same Nuget contains .NET46 and .NETCoreApp1.0 versions.

PM> Install-Package Tubular.ServerSide

Bower Installation Bower version

# install Tubular package and add it to bower.json
$ bower install tubular --save

npm Installation npm version

The npm package only contains the Tubular Template Generator Module, if you want to use all of Tubular’s features, please install the Bower package instead.

# install Tubular package and add it to package.json
$ npm install tubular --save

Dependencies

You will need to reference the following JS libraries in order to use Tubular in your HTML:

Also, if you use the Visual Studio you will need the excellent Web Essentials if you are running VS2013 or Bundler & Minifier plug-in for VS2015 in order to generate the Tubular bundles.

Charts

An experimental support to chart is running with Tubular and you can choose between ChartJS or Highcharts. If you want to use any of them, be sure to load the library before Tubular and check Tubular Sample with easy to understand code on how to start using charts.

Using a CDN

You can get all the dependencies using the following links in your master HTML page. jsDelivr provides almost everything you need to import.

<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.min.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/latest/css/font-awesome.min.css" />

<script src="//cdn.jsdelivr.net/g/[email protected](angular.min.js+angular-animate.min.js+angular-route.min.js),[email protected](ui-bootstrap.min.js+ui-bootstrap-tpls.min.js),filesaver.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-local-storage/0.1.5/angular-local-storage.min.js"></script>

Then you will need to either grab your own copy of Tubular or you use jsDelivr to reference Tubular CSS and JS files.

<link rel="stylesheet" href="//cdn.jsdelivr.net/tubular/latest/tubular-bundle.min.css" />
<script src="//cdn.jsdelivr.net/tubular/latest/tubular-bundle.min.js"></script>

Finally update your modules to include Tubular, for example if your module is called app, then you will need to add Tubular as a dependency as follows:

angular.module('app', ['tubular']);

If you want to use OData or LocalData connectors to populate tbGrid, you must include the separated files. Previous to version 1.0.0 those services where in the main bundle.

Global Settings

You can access to global settings by using the static object TubularDefaultSettings and setup common behavior in Tubular. The settings included are:

SettingDefault valueNotes
AdjustTimezoneOffsetTrueDetermines if the DateTime from a Response should adjust the timezone offset send by within the Request.

##Boilerplate

We have 3 boilerplates ready to seed your project:

A Yeoman Generator can be found at generator-tubular but it’s not longer in maintenance.

Samples

You can check out the Tubular GitHub Page to get a few examples. We still need to work on more samples and better documentation, but we feel what we have now will get you up to speed very quickly :).

The following HTML represents a basic grid. You don’t need to add anything else to your controller! Everything you need is to create your markup.

 <div class="container">
        <tb-grid server-url="/data/customers.json" page-size="20" 
                 class="row" grid-name="mygrid">
            <div class="col-md-12">
                <div class="panel panel-default panel-rounded">
                    <tb-grid-table class="table-bordered">
                        <tb-column-definitions>
                            <tb-column name="CustomerName">
                                <tb-column-header>
                                    <span>{{label}}</span>
                                </tb-column-header>
                            </tb-column>
                            <tb-column name="Invoices">
                                <tb-column-header>
                                    <span>{{label}}</span>
                                </tb-column-header>
                            </tb-column>
                        </tb-column-definitions>
                        <tb-row-set>
                            <tb-row-template ng-repeat="row in $component.rows" 
                                             row-model="row" selectable="true">
                                <tb-cell-template>
                                    {{row.CustomerName}}
                                </tb-cell-template>
                                <tb-cell-template>
                                    {{row.Invoices}}
                                </tb-cell-template>
                            </tb-row-template>
                        </tb-row-set>
                    </tb-grid-table>
                </div>
            </div>
        </tb-grid>
    </div>

Tubular works directly with either your own OData service or a custom RESTful call. You can simplify your RESTful API significantly by using our .NET Tubular.ServerSide library which handles IQueryables easily.

Related Repositories

atomy

atomy

a modular, macro-ular, totally tubular language for the Rubinius VM. #atomo @ freenode ...

tubular

tubular

A set of AngularJS directives and C# classes designed to rapidly build modern web applications ...

tubular-boilerplate

tubular-boilerplate

Tubular Directives Boilerplate (includes AngularJS and Bootstrap) ...

tubular-boilerplate-csharp

tubular-boilerplate-csharp

Tubular Boilerplate C# ...

ITK-TubularGeodesics

ITK-TubularGeodesics

Tubular Geodesic,tool for tracing ...


Top Contributors

geoperez roberttapia chubbsnes65 mariodivece AlexeyTurlapov ljesuscastrog greciaveronica kadosh npmcdn-to-unpkg-bot

Dependencies

package version
dev babel-preset-es2015 ^6.24.1
body-parser ~1.17.1
bower 1.8.0
cookie-parser ~1.4.3
coveralls ^2.13.1
eslint 3.19.0
eslint-config-angular 0.5.0
eslint-plugin-angular 2.4.0
eslint-plugin-jasmine 2.2.0
express ~4.15.2
grunt ~1.0.1
grunt-babel ^6.0.0
grunt-bower 0.21.4
grunt-contrib-concat ^1.0.1
grunt-contrib-connect ^1.0.2
grunt-contrib-copy ^1.0.0
grunt-contrib-csslint 2.0.0
grunt-contrib-jshint ^1.1.0
grunt-coveralls ^1.0.1
grunt-html2js 0.3.8
grunt-karma 2.0.0
grunt-protractor-coverage ^0.2.18
gruntify-eslint 3.1.0
jasmine-core 2.6.1
jasmine-data_driven_tests 1.0.0
karma ^1.7.0
karma-chrome-launcher 2.1.1
karma-coverage 1.1.1
karma-firefox-launcher 1.0.1
karma-html-reporter 0.2.7
karma-jasmine 1.1.0
karma-jasmine-jquery 0.1.1
karma-ng-html2js-preprocessor 1.0.0
load-grunt-tasks ^3.5.2
protractor ^5.1.2
pug ~2.0.0-beta11
tubular-nodejs ^0.1.8

Releases

-   1.0.6 zip tar
-   1.0.5 zip tar
-   1.0.4 zip tar
-   1.0.3 zip tar
-   1.0.2 zip tar
-   1.0.1 zip tar
-   1.0.0-rc.4 zip tar
-   1.0.0-rc.1 zip tar
-   0.9.48 zip tar
-   0.9.46 zip tar
-   0.9.45 zip tar
-   0.9.44 zip tar
-   0.9.43 zip tar
-   0.9.42 zip tar
-   0.9.41 zip tar
-   0.9.40 zip tar
-   0.9.38 zip tar
-   0.9.37 zip tar
-   0.9.36 zip tar
-   0.9.35 zip tar
-   0.9.34 zip tar
-   0.9.33 zip tar
-   0.9.32 zip tar
-   0.9.31 zip tar
-   0.9.30 zip tar
-   0.9.29 zip tar
-   0.9.28 zip tar
-   0.9.27 zip tar
-   0.9.26 zip tar
-   0.9.25 zip tar