gijgo
Version:
Gijgo is a set of free open source javascript controls distributed under MIT License. All widgets are high performance, built on top of the jQuery JavaScript Library with built-in support for Bootstrap, Material Design and Font Awesome. They are designed
1,162 lines (1,099 loc) • 283 kB
JavaScript
/*
* Gijgo Grid v1.4.0
* http://gijgo.com/grid
*
* Copyright 2014, 2017 gijgo.com
* Released under the MIT license
*/
if (typeof (gj) === 'undefined') {
gj = {};
}
gj.widget = function () {
var self = this;
self.xhr = null;
self.generateGUID = function () {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
};
self.mouseX = function (e) {
if (e) {
if (e.pageX) {
return e.pageX;
} else if (e.clientX) {
return e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
} else if (e.touches && e.touches.length) {
return e.touches[0].pageX;
} else if (e.changedTouches && e.changedTouches.length) {
return e.changedTouches[0].pageX;
} else if (e.originalEvent && e.originalEvent.touches && e.originalEvent.touches.length) {
return e.originalEvent.touches[0].pageX;
} else if (e.originalEvent && e.originalEvent.changedTouches && e.originalEvent.changedTouches.length) {
return e.originalEvent.touches[0].pageX;
}
}
return null;
};
self.mouseY = function (e) {
if (e) {
if (e.pageY) {
return e.pageY;
} else if (e.clientY) {
return e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
} else if (e.touches && e.touches.length) {
return e.touches[0].pageY;
} else if (e.changedTouches && e.changedTouches.length) {
return e.changedTouches[0].pageY;
} else if (e.originalEvent && e.originalEvent.touches && e.originalEvent.touches.length) {
return e.originalEvent.touches[0].pageY;
} else if (e.originalEvent && e.originalEvent.changedTouches && e.originalEvent.changedTouches.length) {
return e.originalEvent.touches[0].pageY;
}
}
return null;
};
};
gj.widget.prototype.init = function (jsConfig, type) {
var option, clientConfig, fullConfig;
clientConfig = $.extend(true, {}, this.getHTMLConfig() || {});
$.extend(true, clientConfig, jsConfig || {});
fullConfig = this.getConfig(clientConfig, type);
this.attr('data-guid', fullConfig.guid);
this.data(fullConfig);
// Initialize events configured as options
for (option in fullConfig) {
if (gj[type].events.hasOwnProperty(option)) {
this.on(option, fullConfig[option]);
delete fullConfig[option];
}
}
// Initialize all plugins
for (plugin in gj[type].plugins) {
if (gj[type].plugins.hasOwnProperty(plugin)) {
gj[type].plugins[plugin].configure(this, fullConfig, clientConfig);
}
}
return this;
};
gj.widget.prototype.getConfig = function (clientConfig, type) {
var config, uiLibrary, iconsLibrary, plugin;
config = $.extend(true, {}, gj[type].config.base);
uiLibrary = clientConfig.hasOwnProperty('uiLibrary') ? clientConfig.uiLibrary : config.uiLibrary;
if (gj[type].config[uiLibrary]) {
$.extend(true, config, gj[type].config[uiLibrary]);
}
iconsLibrary = clientConfig.hasOwnProperty('iconsLibrary') ? clientConfig.iconsLibrary : config.iconsLibrary;
if (gj[type].config[iconsLibrary]) {
$.extend(true, config, gj[type].config[iconsLibrary]);
}
for (plugin in gj[type].plugins) {
if (gj[type].plugins.hasOwnProperty(plugin)) {
$.extend(true, config, gj[type].plugins[plugin].config.base);
if (gj[type].plugins[plugin].config[uiLibrary]) {
$.extend(true, config, gj[type].plugins[plugin].config[uiLibrary]);
}
if (gj[type].plugins[plugin].config[iconsLibrary]) {
$.extend(true, config, gj[type].plugins[plugin].config[iconsLibrary]);
}
}
}
$.extend(true, config, clientConfig);
if (!config.guid) {
config.guid = this.generateGUID();
}
return config;
}
gj.widget.prototype.getHTMLConfig = function () {
var result = this.data(),
attrs = this[0].attributes;
if (attrs['width']) {
result.width = attrs['width'].nodeValue;
}
if (attrs['height']) {
result.height = attrs['height'].nodeValue;
}
if (attrs['align']) {
result.align = attrs['align'].nodeValue;
}
if (result && result.source) {
result.dataSource = result.source;
delete result.source;
}
return result;
};
gj.widget.prototype.createDoneHandler = function () {
var $widget = this;
return function (response) {
if (typeof (response) === 'string' && JSON) {
response = JSON.parse(response);
}
gj[$widget.data('type')].methods.render($widget, response);
};
};
gj.widget.prototype.createErrorHandler = function () {
var $widget = this;
return function (response) {
if (response && response.statusText && response.statusText !== 'abort') {
alert(response.statusText);
}
};
};
gj.widget.prototype.reload = function (params) {
var ajaxOptions, result, data = this.data(), type = this.data('type');
if (data.dataSource === undefined) {
gj[type].methods.useHtmlDataSource(this, data);
}
$.extend(data.params, params);
if ($.isArray(data.dataSource)) {
result = gj[type].methods.filter(this);
gj[type].methods.render(this, result);
} else if (typeof(data.dataSource) === 'string') {
ajaxOptions = { url: data.dataSource, data: data.params };
if (this.xhr) {
this.xhr.abort();
}
this.xhr = $.ajax(ajaxOptions).done(this.createDoneHandler()).fail(this.createErrorHandler());
} else if (typeof (data.dataSource) === 'object') {
if (!data.dataSource.data) {
data.dataSource.data = {};
}
$.extend(data.dataSource.data, data.params);
ajaxOptions = $.extend(true, {}, data.dataSource); //clone dataSource object
if (ajaxOptions.dataType === 'json' && typeof(ajaxOptions.data) === 'object') {
ajaxOptions.data = JSON.stringify(ajaxOptions.data);
}
if (!ajaxOptions.success) {
ajaxOptions.success = this.createDoneHandler();
}
if (!ajaxOptions.error) {
ajaxOptions.error = this.createErrorHandler();
}
if (this.xhr) {
this.xhr.abort();
}
this.xhr = $.ajax(ajaxOptions);
}
return this;
}
gj.documentManager = {
events: {},
subscribeForEvent: function (eventName, widgetId, callback) {
if (!gj.documentManager.events[eventName] || gj.documentManager.events[eventName].length === 0) {
gj.documentManager.events[eventName] = [{ widgetId: widgetId, callback: callback }];
$(document).on(eventName, gj.documentManager.executeCallbacks);
} else if (!gj.documentManager.events[eventName][widgetId]) {
gj.documentManager.events[eventName].push({ widgetId: widgetId, callback: callback });
} else {
throw "Event " + eventName + " for widget with guid='" + widgetId + "' is already attached.";
}
},
executeCallbacks: function (e) {
var callbacks = gj.documentManager.events[e.type];
if (callbacks) {
for (var i = 0; i < callbacks.length; i++) {
callbacks[i].callback(e);
}
}
},
unsubscribeForEvent: function (eventName, widgetId) {
var success = false,
events = gj.documentManager.events[eventName];
if (events) {
for (var i = 0; i < events.length; i++) {
if (events[i].widgetId === widgetId) {
events.splice(i, 1);
success = true;
if (events.length === 0) {
$(document).off(eventName);
delete gj.documentManager.events[eventName];
}
}
}
}
if (!success) {
throw 'The "' + eventName + '" for widget with guid="' + widgetId + '" can\'t be removed.';
}
}
};
if (typeof (gj.grid) === 'undefined') {
gj.grid = {
plugins: {},
messages: []
};
}
gj.grid.messages['en-us'] = {
First: 'First',
Previous: 'Previous',
Next: 'Next',
Last: 'Last',
Page: 'Page',
FirstPageTooltip: 'First Page',
PreviousPageTooltip: 'Previous Page',
NextPageTooltip: 'Next Page',
LastPageTooltip: 'Last Page',
Refresh: 'Refresh',
Of: 'of',
DisplayingRecords: 'Displaying records',
RowsPerPage: 'Rows per page:',
Edit: 'Edit',
Delete: 'Delete',
Update: 'Update',
Cancel: 'Cancel',
NoRecordsFound: 'No records found.',
Loading: 'Loading...'
};
/* global window alert jQuery gj */
/**
* @widget Grid
* @plugin Base
*/
gj.grid.config = {
base: {
/** The data source for the grid.
* @additionalinfo If set to string, then the grid is going to use this string as a url for ajax requests to the server.<br />
* If set to object, then the grid is going to use this object as settings for the <a href="http://api.jquery.com/jquery.ajax/" target="_new">jquery ajax</a> function.<br />
* If set to array, then the grid is going to use the array as data for rows.
* @type (string|object|array)
* @default undefined
* @example Remote.JS.Configuration <!-- grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* columns: [ { field: 'Name' }, { field: 'PlaceOfBirth' } ]
* });
* </script>
* @example Remote.Html.Configuration <!-- grid -->
* <table id="grid" data-source="/Players/Get">
* <thead>
* <tr>
* <th width="56" data-field="ID">#</th>
* <th>Name</th>
* <th>PlaceOfBirth</th>
* </tr>
* </thead>
* </table>
* <script>
* $('#grid').grid();
* </script>
* @example Local.DataSource <!-- grid -->
* <table id="grid"></table>
* <script>
* var data = [
* { 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria' },
* { 'ID': 2, 'Name': 'Ronaldo Luis Nazario de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil' },
* { 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England' }
* ];
* $('#grid').grid({
* dataSource: data,
* columns: [ { field: 'ID', width: 56 }, { field: 'Name' }, { field: 'PlaceOfBirth' } ]
* });
* </script>
* @example Html.DataSource <!-- materialicons, grid -->
* <table id="grid">
* <thead>
* <tr>
* <th width="56" data-field="ID">#</th>
* <th data-sortable="true">Name</th>
* <th data-field="PlaceOfBirth" data-sortable="true">Place Of Birth</th>
* </tr>
* </thead>
* <tbody>
* <tr>
* <td>1</td>
* <td>Hristo Stoichkov</td>
* <td>Plovdiv, Bulgaria</td>
* </tr>
* <tr>
* <td>2</td>
* <td>Ronaldo Luis Nazario de Lima</td>
* <td>Rio de Janeiro, Brazil</td>
* </tr>
* <tr>
* <td>3</td>
* <td>David Platt</td>
* <td>Chadderton, Lancashire, England</td>
* </tr>
* </tbody>
* </table>
* <script>
* $('#grid').grid({ pager: { limit: 2 }});
* </script>
* @example Remote.Custom.Render <!-- grid -->
* <table id="grid"></table>
* <script>
* var grid, onSuccessFunc = function (response) {
* alert('The result contains ' + response.records.length + ' records.');
* grid.render(response);
* };
* grid = $('#grid').grid({
* dataSource: { url: '/Players/Get', data: {}, success: onSuccessFunc },
* columns: [ { field: 'Name' }, { field: 'PlaceOfBirth' } ]
* });
* </script>
* @example Remote.Custom.Error <!-- grid -->
* <table id="grid"></table>
* <script>
* var grid, onErrorFunc = function (response) {
* alert('Server error.');
* };
* grid = $('#grid').grid({
* dataSource: { url: '/DataSources/InvalidUrl', error: onErrorFunc },
* columns: [ { field: 'Name' }, { field: 'PlaceOfBirth' } ]
* });
* </script>
*/
dataSource: undefined,
/** An array that holds the configurations of each column from the grid.
* @type array
* @example JS.Configuration <!-- grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* columns: [ { field: 'ID', width: 56 }, { field: 'Name' }, { field: 'PlaceOfBirth', name: 'Birth Place' } ]
* });
* </script>
*/
columns: [],
/** Auto generate column for each field in the datasource when set to true.
* @type array
* @example sample <!-- grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* autoGenerateColumns: true
* });
* </script>
*/
autoGenerateColumns: false,
/** An object that holds the default configuration settings of each column from the grid.
* @type object
* @example sample <!-- grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* defaultColumnSettings: { align: 'right' },
* columns: [ { field: 'ID', width: 56 }, { field: 'Name' }, { field: 'PlaceOfBirth', name: 'Birth Place' } ]
* });
* </script>
*/
defaultColumnSettings: {
/** If set to true the column will not be displayed in the grid. By default all columns are displayed.
* @alias column.hidden
* @type boolean
* @default false
* @example sample <!-- grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* columns: [ { field: 'ID', width: 56 }, { field: 'Name' }, { field: 'PlaceOfBirth', hidden: true } ]
* });
* </script>
*/
hidden: false,
/** The width of the column. Numeric values are treated as pixels.
* If the width is undefined the width of the column is not set and depends on the with of the table(grid).
* @alias column.width
* @type number|string
* @default undefined
* @example sample <!-- grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* columns: [
* { field: 'ID', width: 56 },
* { field: 'Name', width: 120 },
* { field: 'PlaceOfBirth' }
* ]
* });
* </script>
*/
width: undefined,
/** Indicates if the column is sortable.
* If set to true the user can click the column header and sort the grid by the column source field.
* @alias column.sortable
* @type boolean|object
* @default false
* @example Remote <!-- materialicons, grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* columns: [
* { field: 'ID', width: 56 },
* { field: 'Name', sortable: true },
* { field: 'PlaceOfBirth', sortable: false }
* ]
* });
* </script>
* @example Local.Custom <!-- materialicons, grid -->
* <table id="grid"></table>
* <script>
* var data = [
* { 'ID': 1, 'Value1': 'Foo', 'Value2': 'Foo' },
* { 'ID': 2, 'Value1': 'bar', 'Value2': 'bar' },
* { 'ID': 3, 'Value1': 'moo', 'Value2': 'moo' },
* { 'ID': 4, 'Value1': null, 'Value2': undefined }
* ];
* var caseSensitiveSort = function (direction, column) {
* return function (recordA, recordB) {
* var a = recordA[column.field] || '',
* b = recordB[column.field] || '';
* return (direction === 'asc') ? a < b : b < a;
* };
* };
* $('#grid').grid({
* dataSource: data,
* columns: [
* { field: 'ID' },
* { field: 'Value1', sortable: true },
* { field: 'Value2', sortable: { sorter: caseSensitiveSort } }
* ]
* });
* </script>
* @example Remote.Bootstrap.3 <!-- bootstrap, grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* uiLibrary: 'bootstrap',
* dataSource: '/Players/Get',
* columns: [
* { field: 'ID', width: 34 },
* { field: 'Name', sortable: true },
* { field: 'PlaceOfBirth', sortable: false }
* ]
* });
* @example Remote.Bootstrap.4.Material.Icons <!-- materialicons, bootstrap4, grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* uiLibrary: 'bootstrap4',
* dataSource: '/Players/Get',
* columns: [
* { field: 'ID', width: 56 },
* { field: 'Name', sortable: true },
* { field: 'PlaceOfBirth', sortable: false }
* ]
* });
* </script>
* @example Remote.Bootstrap.4.FontAwesome <!-- bootstrap4, fontawesome, grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* uiLibrary: 'bootstrap4',
* iconsLibrary: 'fontawesome',
* dataSource: '/Players/Get',
* columns: [
* { field: 'ID', width: 42 },
* { field: 'Name', sortable: true },
* { field: 'PlaceOfBirth', sortable: false }
* ]
* });
* </script>
*/
sortable: false,
/** Indicates the type of the column.
* @alias column.type
* @type text|checkbox|icon
* @default 'text'
* @example Icon <!-- grid, bootstrap -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* uiLibrary: 'bootstrap',
* columns: [
* { field: 'ID', width: 34 },
* { field: 'Name', title: 'Player' },
* { field: 'PlaceOfBirth', title: 'Place of Birth' },
* {
* title: '', field: 'Info', width: 32, type: 'icon', icon: 'glyphicon-info-sign',
* events: {
* 'click': function (e) {
* alert('record with id=' + e.data.id + ' is clicked.');
* }
* }
* }
* ]
* });
* </script>
* @example Checkbox <!-- grid, checkbox, bootstrap -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* uiLibrary: 'bootstrap',
* columns: [
* { field: 'ID', width: 34 },
* { field: 'Name', title: 'Player' },
* { field: 'PlaceOfBirth', title: 'Place of Birth' },
* { title: 'Active?', field: 'IsActive', width: 80, type: 'checkbox', align: 'center' }
* ]
* });
* </script>
*/
type: 'text',
/** The caption that is going to be displayed in the header of the grid.
* @alias column.title
* @type string
* @default undefined
* @example sample <!-- grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* columns: [
* { field: 'ID', width: 56 },
* { field: 'Name', title: 'Player' },
* { field: 'PlaceOfBirth', title: 'Place of Birth' }
* ]
* });
* </script>
*/
title: undefined,
/** The field name to which the column is bound.
* If the column.title is not defined this value is used as column.title.
* @alias column.field
* @type string
* @default undefined
* @example sample <!-- grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* columns: [
* { field: 'ID', width: 56 },
* { field: 'Name' },
* { field: 'PlaceOfBirth', title: 'Place of Birth' }
* ]
* });
* </script>
*/
field: undefined,
/** This setting control the alignment of the text in the cell.
* @alias column.align
* @type left|right|center|justify|initial|inherit
* @default "left"
* @example sample <!-- grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* columns: [
* { field: 'ID', width: 56, align: 'center' },
* { field: 'Name', align: 'right' },
* { field: 'PlaceOfBirth', align: 'left' }
* ]
* });
* </script>
*/
align: 'left',
/** The name(s) of css class(es) that are going to be applied to all cells inside that column, except the header cell.
* @alias column.cssClass
* @type string
* @default undefined
* @example sample <!-- grid -->
* <table id="grid"></table>
* <style>
* .nowrap { white-space: nowrap }
* .bold { font-weight: bold }
* </style>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* columns: [
* { field: 'ID', width: 56 },
* { field: 'Name', width: 100, cssClass: 'nowrap bold' },
* { field: 'PlaceOfBirth' }
* ]
* });
* </script>
*/
cssClass: undefined,
/** The name(s) of css class(es) that are going to be applied to the header cell of that column.
* @alias column.headerCssClass
* @type string
* @default undefined
* @example sample <!-- grid -->
* <table id="grid"></table>
* <style>
* .italic { font-style: italic }
* </style>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* columns: [
* { field: 'ID', width: 56 },
* { field: 'Name', width: 100, headerCssClass: 'italic' },
* { field: 'PlaceOfBirth' }
* ]
* });
* </script>
*/
headerCssClass: undefined,
/** The text for the cell tooltip.
* @alias column.tooltip
* @type string
* @default undefined
* @example sample <!-- grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* columns: [
* { field: 'ID', width: 56, tooltip: 'This is my tooltip 1.' },
* { field: 'Name', tooltip: 'This is my tooltip 2.' },
* { field: 'PlaceOfBirth', tooltip: 'This is my tooltip 3.' }
* ]
* });
* </script>
*/
tooltip: undefined,
/** Css class for icon that is going to be in use for the cell.
* This setting can be in use only with combination of type icon.
* @alias column.icon
* @type string
* @default undefined
* @example sample <!-- bootstrap, grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* uiLibrary: 'bootstrap',
* columns: [
* { field: 'ID', width: 34 },
* { field: 'Name' },
* { field: 'PlaceOfBirth' },
* { title: '', field: 'Edit', width: 32, type: 'icon', icon: 'glyphicon-pencil', events: { 'click': function (e) { alert('name=' + e.data.record.Name); } } }
* ]
* });
* </script>
*/
icon: undefined,
/** Configuration object with event names as keys and functions as values that are going to be bind to each cell from the column.
* Each function is going to receive event information as a parameter with info in the "data" field for id, field name and record data.
* @alias column.events
* @type object
* @default undefined
* @example javascript.configuration <!-- bootstrap, grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* uiLibrary: 'bootstrap',
* columns: [
* { field: 'ID', width: 34 },
* {
* field: 'Name',
* events: {
* 'mouseenter': function (e) {
* e.stopPropagation();
* $(e.currentTarget).css('background-color', 'red');
* },
* 'mouseleave': function (e) {
* e.stopPropagation();
* $(e.currentTarget).css('background-color', '');
* }
* }
* },
* { field: 'PlaceOfBirth' },
* {
* title: '', field: 'Info', width: 34, type: 'icon', icon: 'glyphicon-info-sign',
* events: {
* 'click': function (e) {
* alert('record with id=' + e.data.id + ' is clicked.'); }
* }
* }
* ]
* });
* </script>
* @example html.configuration <!-- bootstrap, grid -->
* <table id="grid" data-source="/Players/Get" data-ui-library="bootstrap">
* <thead>
* <tr>
* <th data-field="ID" width="34">ID</th>
* <th data-events="mouseenter: onMouseEnter, mouseleave: onMouseLeave">Name</th>
* <th data-field="PlaceOfBirth">Place Of Birth</th>
* <th data-events="click: onClick" data-type="icon" data-icon="glyphicon-info-sign" width="32"></th>
* </tr>
* </thead>
* </table>
* <script>
* function onMouseEnter (e) {
* $(e.currentTarget).css('background-color', 'red');
* }
* function onMouseLeave (e) {
* $(e.currentTarget).css('background-color', '');
* }
* function onClick(e) {
* alert('record with id=' + e.data.id + ' is clicked.');
* }
* $('#grid').grid();
* </script>
*/
events: undefined,
/** Format the date when the type of the column is date.
* This configuration setting is going to work only if you have implementation of format method for the Date object.
* You can use external libraries like http://blog.stevenlevithan.com/archives/date-time-format for that.
* @alias column.format
* @type string
* @default undefined
* @example sample <!-- grid -->
* <table id="grid"></table>
* <script src="http://stevenlevithan.com/assets/misc/date.format.js"></script>
* <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.min.js"></script>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* columns: [
* { field: 'ID', width: 56 },
* { field: 'Name' },
* { field: 'DateOfBirth', title: 'Date 1', type: 'date', format: 'HH:MM:ss mm/dd/yyyy' },
* { field: 'DateOfBirth', title: 'Date 2',
* renderer: function (value) {
* return moment(value).format('MM-DD-YYYY');
* }
* }
* ]
* });
* </script>
*/
format: undefined,
/** Number of decimal digits after the decimal point.
* @alias column.decimalDigits
* @type number
* @default undefined
*/
decimalDigits: undefined,
/** Template for the content in the column.
* Use curly brackets "{}" to wrap the names of data source columns from server response.
* @alias column.tmpl
* @type string
* @default undefined
* @example sample <!-- grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* columns: [
* { field: 'ID', width: 56 },
* { field: 'Name' },
* { title: 'Info', tmpl: '{Name} is born in {PlaceOfBirth}.' }
* ]
* });
* </script>
*/
tmpl: undefined,
/** If set to true stop event propagation when event occur.
* @alias column.stopPropagation
* @type boolean
* @default false
* @example sample <!-- bootstrap, grid -->
* <table id="grid" data-source="/Players/Get"></table>
* <script>
* $('#grid').grid({
* uiLibrary: 'bootstrap',
* columns: [
* { field: 'ID', width: 34 },
* { field: 'Name', events: { 'click': function (e) { alert('name=' + e.data.record.Name); } } },
* { field: 'PlaceOfBirth', stopPropagation: true, events: { 'click': function (e) { alert('name=' + e.data.record.Name); } } },
* { title: '', field: 'Edit', width: 32, type: 'icon', icon: 'glyphicon-pencil', events: { 'click': function (e) { alert('name=' + e.data.record.Name); } } }
* ]
* });
* </script>
*/
stopPropagation: false,
/** A renderer is an 'interceptor' function which can be used to transform data (value, appearance, etc.) before it is rendered.
* @additionalinfo If the renderer function return a value, then this value is going to be automatically set as value of the cell.<br/>
* If the renderer function doesn't return a value, then you have to set the content of the cell manually.
* @alias column.renderer
* @type function
* @default undefined
* @param {string} value - the record field value
* @param {object} record - the data of the row record
* @param {object} $cell - the current table cell presented as jquery object
* @param {object} $displayEl - inner div element for display of the cell value presented as jquery object
* @param {string} id - the id of the record
* @example sample <!-- grid -->
* <table id="grid" data-source="/Players/Get"></table>
* <script>
* var nameRenderer = function (value, record, $cell, $displayEl) {
* $cell.css('font-style', 'italic');
* $displayEl.css('background-color', '#EEE');
* $displayEl.text(value);
* };
* $('#grid').grid({
* columns: [
* { field: 'ID', width: 56 },
* { field: 'Name', renderer: nameRenderer },
* { field: 'PlaceOfBirth', renderer: function (value, record) { return record.ID % 2 ? '<b>' + value + '</b>' : '<i>' + value + '</i>'; } }
* ]
* });
* </script>
*/
renderer: undefined,
/** Function which can be used to customize filtering with local data (javascript sourced data).
* @additionalinfo The default filtering is not case sensitive. The filtering with remote data sources needs to be handled on the server.
* @alias column.filter
* @type function
* @default undefined
* @param {string} value - the record field value
* @param {string} searchStr - the search string
* @example example <!-- grid -->
* <input type="text" id="txtValue1" placeholder="Value 1" />
* <input type="text" id="txtValue2" placeholder="Value 2" />
* <button id="btnSearch">Search</button> <br/><br/>
* <table id="grid"></table>
* <script>
* var grid, data = [
* { 'ID': 1, 'Value1': 'Foo', 'Value2': 'Foo' },
* { 'ID': 2, 'Value1': 'bar', 'Value2': 'bar' },
* { 'ID': 3, 'Value1': 'moo', 'Value2': 'moo' },
* { 'ID': 4, 'Value1': null, 'Value2': undefined }
* ],
* caseSensitiveFilter = function (value, searchStr) {
* return value.indexOf(searchStr) > -1
* };
* grid = $('#grid').grid({
* dataSource: data,
* columns: [
* { field: 'ID', width: 56 },
* { field: 'Value1' },
* { field: 'Value2', filter: caseSensitiveFilter }
* ]
* });
* $('#btnSearch').on('click', function () {
* grid.reload({ Value1: $('#txtValue1').val(), Value2: $('#txtValue2').val() });
* });
* </script>
*/
filter: undefined
},
mapping: {
/** The name of the object in the server response, that contains array with records, that needs to be display in the grid.
* @alias mapping.dataField
* @type string
* @default "records"
*/
dataField: 'records',
/** The name of the object in the server response, that contains the number of all records on the server.
* @alias mapping.totalRecordsField
* @type string
* @default "total"
*/
totalRecordsField: 'total'
},
params: {},
paramNames: {
/** The name of the parameter that is going to send the name of the column for sorting.
* The "sortable" setting for at least one column should be enabled in order this parameter to be in use.
* @alias paramNames.sortBy
* @type string
* @default "sortBy"
*/
sortBy: 'sortBy',
/** The name of the parameter that is going to send the direction for sorting.
* The "sortable" setting for at least one column should be enabled in order this parameter to be in use.
* @alias paramNames.direction
* @type string
* @default "direction"
*/
direction: 'direction'
},
/** The name of the UI library that is going to be in use. Currently we support Bootstrap 3, Bootstrap 4 and Material Design.
* @additionalinfo The css files for Bootstrap or Material Design should be manually included to the page where the grid is in use.
* @type (materialdesign|bootstrap|bootstrap4)
* @default 'materialdesign'
* @example Material.Design.With.Icons <!-- materialicons, grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* columns: [ { field: 'ID', width: 56 }, { field: 'Name', sortable: true }, { field: 'PlaceOfBirth' } ],
* pager: { limit: 2, sizes: [2, 5, 10, 20] }
* });
* </script>
* @example Material.Design.Without.Icons <!-- materialicons, grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* uiLibrary: 'materialdesign',
* iconsLibrary: '',
* columns: [ { field: 'ID', width: 56 }, { field: 'Name', sortable: true }, { field: 'PlaceOfBirth' } ],
* pager: { limit: 2, sizes: [2, 5, 10, 20] }
* });
* </script>
* @example Bootstrap.3 <!-- grid, bootstrap -->
* <div class="container"><table id="grid"></table></div>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* uiLibrary: 'bootstrap',
* columns: [
* { field: 'ID' },
* { field: 'Name', sortable: true },
* { field: 'PlaceOfBirth' }
* ],
* pager: { limit: 2, sizes: [2, 5, 10, 20] }
* });
* </script>
* @example Bootstrap.4.Font.Awesome <!-- bootstrap4, fontawesome, grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* uiLibrary: 'bootstrap4',
* iconsLibrary: 'fontawesome',
* columns: [ { field: 'ID', width: 38 }, { field: 'Name', sortable: true }, { field: 'PlaceOfBirth' } ],
* pager: { limit: 2, sizes: [2, 5, 10, 20] }
* });
* </script>
*/
uiLibrary: 'materialdesign',
/** The name of the icons library that is going to be in use. Currently we support Material Icons, Font Awesome and Glyphicons.
* @additionalinfo If you use Bootstrap 3 as uiLibrary, then the iconsLibrary is set to Glyphicons by default.<br/>
* If you use Material Design as uiLibrary, then the iconsLibrary is set to Material Icons by default.<br/>
* The css files for Material Icons, Font Awesome or Glyphicons should be manually included to the page where the grid is in use.
* @type (materialicons|fontawesome|glyphicons)
* @default 'materialicons'
* @example Font.Awesome <!-- fontawesome, grid, grid.pagination -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* iconsLibrary: 'fontawesome',
* columns: [ { field: 'ID', width: 56 }, { field: 'Name', sortable: true }, { field: 'PlaceOfBirth' } ],
* pager: { limit: 5 }
* });
* </script>
*/
iconsLibrary: 'materialicons',
/** The type of the row selection.<br/>
* If the type is set to multiple the user will be able to select more then one row from the grid.
* @type (single|multiple)
* @default 'single'
* @example Multiple.Material.Design.Checkbox <!-- materialicons, checkbox, grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* selectionType: 'multiple',
* selectionMethod: 'checkbox',
* columns: [ { field: 'ID', width: 56 }, { field: 'Name' }, { field: 'PlaceOfBirth' } ]
* });
* </script>
* @example Multiple.Bootstrap.3.Checkbox <!-- bootstrap, checkbox, grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* uiLibrary: 'bootstrap',
* dataSource: '/Players/Get',
* selectionType: 'multiple',
* selectionMethod: 'checkbox',
* columns: [ { field: 'ID', width: 56 }, { field: 'Name' }, { field: 'PlaceOfBirth' } ]
* });
* </script>
* @example Multiple.Bootstrap.4.Checkbox <!-- bootstrap4, materialicons, checkbox, grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* uiLibrary: 'bootstrap4',
* dataSource: '/Players/Get',
* selectionType: 'multiple',
* selectionMethod: 'checkbox',
* columns: [ { field: 'ID', width: 56 }, { field: 'Name' }, { field: 'PlaceOfBirth' } ]
* });
* </script>
* @example Single.Checkbox <!-- materialicons, checkbox, grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* selectionType: 'single',
* selectionMethod: 'checkbox',
* columns: [ { field: 'ID', width: 56 }, { field: 'Name' }, { field: 'PlaceOfBirth' } ]
* });
* </script>
*/
selectionType: 'single',
/** The type of the row selection mechanism.
* @additionalinfo If this setting is set to "basic" when the user select a row, then this row will be highlighted.<br/>
* If this setting is set to "checkbox" a column with checkboxes will appear as first row of the grid and when the user select a row, then this row will be highlighted and the checkbox selected.
* @type (basic|checkbox)
* @default "basic"
* @example sample <!-- materialicons, checkbox, grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* selectionType: 'single',
* selectionMethod: 'checkbox',
* columns: [ { field: 'ID' }, { field: 'Name' }, { field: 'PlaceOfBirth' } ]
* });
* </script>
*/
selectionMethod: 'basic',
/** When this setting is enabled the content of the grid will be loaded automatically after the creation of the grid.
* @type boolean
* @default true
* @example disabled <!-- grid -->
* <table id="grid"></table>
* <script>
* var grid = $('#grid').grid({
* dataSource: '/Players/Get',
* autoLoad: false,
* columns: [ { field: 'ID' }, { field: 'Name' } ]
* });
* grid.reload(); //call .reload() explicitly in order to load the data in the grid
* </script>
* @example enabled <!-- grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* autoLoad: true,
* columns: [ { field: 'ID' }, { field: 'Name' } ]
* });
* </script>
*/
autoLoad: true,
/** The text that is going to be displayed if the grid is empty.
* @type string
* @default "No records found."
* @example sample <!-- grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: { url: '/Players/Get', data: { name: 'not existing name' } },
* notFoundText: 'No records found custom message',
* columns: [ { field: 'ID' }, { field: 'Name' }, { field: 'PlaceOfBirth' } ]
* });
* </script>
* @example localization <!-- grid -->
* <table id="grid"></table>
* <script src="../../dist/modular/grid/js/messages/messages.de-de.js"></script>
* <script>
* $('#grid').grid({
* dataSource: { url: '/Players/Get', data: { name: 'not existing name' } },
* locale: 'de-de',
* columns: [ { field: 'ID' }, { field: 'Name' }, { field: 'PlaceOfBirth' } ]
* });
* </script>
*/
notFoundText: undefined,
/** Width of the grid.
* @type number
* @default undefined
* @example sample <!-- grid -->
* <table id="grid"></table>
* <script>
* $('#grid').grid({
* dataSource: '/Players/Get',
* w