Datagrid for AngularJS and Bootstrap

AJs Datagrid for AngularJS and Bootstrap

It’s probably super buggy right now, but I’m working on making it more generic.

Features

  • Server-side paging, sorting and filtering (inline and external)
  • Dynamic formatting and styling of columns
  • Button columns

View / HTML



Controller (javascript)

app.controller("DomainListController", ['$scope', '$stateParams', '$http', '$filter',
    function ($scope, $stateParams, $http, $filter) {
        $scope.Grids = {
            Domain: {
                Columns: [
                    {
                        ColumnWidth: "30px",
                        Buttons: [
                            { Icon: "fa-bar-chart-o", onClick: function(b, r, c) { r.RowSelected = !r.RowSelected; } }
                        ],
                        style: function (value, row, column) { return row.DomainStatusId == 99 ? 'background:#fee;color:#aaa;' : ''; }
                    },
                    {
                        Name: "DomainName",
                        Label: "Domain Name",
                        isFilterable: true,
                        format: function (value, row, column) { return (row.DomainStatusId == 99 ? value + "
deleted
" : "" + value + ""); }, style: function (value, row, column) { return row.DomainStatusId == 99 ? 'background:#fee;color:#aaa;' : ''; } }, { Name: "Uniques", Label: "Uniques", align: "right", format: function (value, row, column) { return $filter("number")(value); }, style: function (value, row, column) { return row.DomainStatusId == 99 ? 'background:#fee;color:#aaa;' : ''; } }, { Name: "Clicks", Label: "Clicks", align: "right", format: function (value, row, column) { return $filter("number")(value); }, style: function (value, row, column) { return row.DomainStatusId == 99 ? 'background:#fee;color:#aaa;' : ''; } }, { Name: "Ctr", Label: "CTR", align: "right", format: function (value, row, column) { return $filter("percentage")(value, 2); }, style: function (value, row, column) { return row.DomainStatusId == 99 ? 'background:#fee;color:#aaa;' : ''; } }, { Name: "Rpc", Label: "RPC", align: "right", format: function (value, row, column) { return $filter("currency")(value); }, style: function (value, row, column) { return row.DomainStatusId == 99 ? 'background:#fee;color:#aaa;' : ''; } }, ], Filters: { DomainName: $stateParams.search }, SelectedRows: null } }; } ]);

Datasource (JSON)

This is the format the JSON data should be in when it is returned from the server. If you’re using C#, there is a nice ORM called PetaPoco that will return this format for you automatically!

{
	"CurrentPage":1,
	"TotalPages":4,
	"TotalItems":31,
	"ItemsPerPage":10,
	"Items":[
		{
			"DateColumn":"2014-08-08T00:00:00",
			"NumberColumn":0
		},
		{
			"DateColumn":"2014-08-08T00:00:00",
			"NumberColumn":0
		},
		{
			"DateColumn":"2014-08-08T00:00:00",
			"NumberColumn":0
		},
	]
}