Grid Implementation

General

The grid is build as directive [ngback-grid] which implement ng-grid based on bacnand admin configuration.
You can have multiple grids on the same page.

Configuration Options

//Define the grid's view name which is the table or view name in the database
viewName: undefined,

//Define the grid caption. API attribute [captionText]
caption: undefined,

//Defining the height of the row in pixels or if left empty to be based on
//the height of the row content. API attribute [rowHeight]
rowHeight: undefined,

//Enables display of the filter in the toolbar menu. The filter is built dynamically
//to all the columns market include in filter
showFilter: false,

//Array of fields for grid filtering. if showFilter is true, any filtering will 
//be added to this array.
filter: [],

//Shows the filter in non collapsed mode. API attribute [openFilterAsCollapsed].
openFilterAsCollapsed: false,

//Show or hide the footer all together the footer is enabled by default
showFooter: true,

//Show or hide the paging in the footer
showPaging: true,

//Currently selected page size. API attribute [rowsPerPage]
pageSize: 20,

// Toolbar options
   toolbarOptions: {
            //Show or hide the New button. API attribute [allowAdd]
            showNew: true,
            //Show or hide the Edit button. API attribute [allowEdit]
            showEdit: true,
            //Show or hide theDelete button. API attribute [allowDelete]
            showDelete: true,
            //Show or hide theRefresh button
            showRefresh: true,
            //Show or hide the search text box and button. API attribute [hideSearchBox].
            showSearch: true,
            //Show or hide the export to CSV
            exportToCSV: false
            // Toolbar buttons description
            descriptionOptions: {
                 // new button's caption. API attribute [newButtonName]
                 newButtonName: 'New',
                 //edit button's caption. API attribute [editButtonName]
                 editButtonName: 'Edit',
                 //edit button's caption. API attribute [deleteButtonName]
                 deleteButtonName: 'Delete'
            },
        }

Columns type

The column template has the following options based on column type [column.type]

• Image: Display image based on the image prefix and image file name. If Grid's height is specified then use it for height and width is auto otherwise the width is the column width and the height is auto.

• HTML:Show the content as HTML and not as text

• Default: Display the column's value as is

$scope.getCellTemplate = function (col, view) {
    switch (col.type) {
       case 'Image':
           var height = 'auto';// (view.rowHeight != '') ? view.rowHeight : 'auto';
           var width = (height != 'auto') ? 'auto' : col.columnWidth;
           return '<div class="ngCellText"><span ng-cell-text><img ng-src="' + col.urlPrefix + '/{{row.entity[\'' + col.name + '\']}}" width="' + width + '" height="' + height + '" lazy-src/></span></div>';
       case 'Html':
           return '<p ng-bind-html="renderHtml(\'{{row.entity[\'' + col.name + '\']}}\')"></p>'; //'{{row.entity["' + col.name + '"]}}';
       default:
           return '<div class="ngCellText"><span ng-cell-text>{{row.entity["' + col.name + '"]}}</span></div>';
}

Image

• Crop An image element that displays the center part of the original image size in the grid cell
• Fit An image element that displays the entire image in a given cell but in the same proportions

see the following code implementations for image Fit & Crop: SetSize: function (img) { var src = $(img).attr('src'); if (src == null || src == '') { return; } var td = $(img).parents('td:first'); if (!td.hasClass('d_fieldContainer')) { return; } var div = $(img).parents('div:first'); var height = td.height(); var width = td.width(); $(img).css('width', 'auto'); $(img).css('height', 'auto'); var imgHeight = $(img).height(); var imgWidth = $(img).width(); var format = $(img).attr('format'); div.height(height); div.width(width); if (format == 'Fit') { var imgRatio = imgHeight / imgWidth; var cellRatio = height / width; if (imgRatio > cellRatio) { $(img).height(height); $(img).width(height / imgRatio); } else { $(img).width(width); $(img).height(width * imgRatio); } if ($(img).height() < height) { var marginTop = (height / 2 - $(img).height() / 2); $(img).css('margin-top', marginTop + 'px'); } else { $(img).css('margin-top', '0px'); } } else { $(img).parent().parent().css('width', width + 'px'); var marginTop = (height / 2 - imgHeight / 2); $(img).css('margin-top', marginTop + 'px'); if (imgWidth > width) { var marginLeft = (width / 2 - imgWidth / 2); $(img).css('margin-left', marginLeft + 'px'); } else { $(img).css('margin-left', '0px'); } } div.css('overflow', 'hidden'); $(img).parent().parent().show(); $(img).css('display', 'inline-block'); }

##Numeric

• Currency - An input element with type equals text and numeric validation with currency format. the format is done in the server according to the server culture, client is getting the formatted value and should send it as well
• NumberWithSeparator an input element with type equals text and numeric validation with #,##0.00 format. the format is done in the server, client is getting the formatted value and should send it as well
• Percentage an input element with type equals text and numeric validation with percentage format. the format is done in the server, client is getting the formatted value and should send it as well. if the value in the database is 0.5 it will be displayed as 50%