jsgrid - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

bower.json

 {
     "name": "jsgrid",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "main": [
@@ -5,0 +5,0 @@ "dist/jsgrid.js",

package.json

 {
     "name": "jsgrid",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "description": "Lightweight data grid jQuery plugin. It supports basic grid operations like inserting, filtering, editing, deleting, paging and sorting. Although jsGrid is tunable and allows to customize appearance and components.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -154,3 +154,4 @@ # jsGrid Lightweight Grid jQuery Plugin
     insertRowRenderer: null,
-    editRowRenderer: null
+    editRowRenderer: null,
+    pagerRenderer: null
 }
@@ -427,3 +428,18 @@
 
+### pagerRenderer (default `null`)
+> version added: 1.2 
 
+A function to customize pager rendering. The function accepts a single argument with the following structure:
+
+```javascript
+{
+    pageIndex,      // index of the currently opened page
+    pageCount       // total amount of grid pages 
+} 
+```
+
+The function should return markup as a string, jQueryElement or DomNode representing the pager.
+If `pagerRenderer` is specified, then `pagerFormat` option will be ignored.
+
+
 ## Grid Fields
@@ -766,4 +782,4 @@
 
-### getFilter()
-Get grid filter as plain object.
+### getFilter(): `Object`
+Get grid filter as a plain object.
 
@@ -776,2 +792,22 @@ ```javascript
 
+### getSorting(): `Object`
+> version added: 1.2
+
+Get grid current sorting params as a plain object with the following format:
+
+```javascript
+
+{  
+    field,      // the name of the field by which grid is sorted
+    order       // 'asc' or 'desc' depending on sort order
+}
+
+```
+
+```javascript
+
+var sorting = $("#grid").jsGrid("getSorting");
+
+```
+
 ### insertItem([item]): `Promise`
@@ -997,6 +1033,33 @@ Inserts row into the grid based on item.
 
+jsGrid allows to specify a callback function to be executed on a particular event.
+
+The following callbacks are supported:
+
+```javascript
+
+{
+    onDataLoading: function(args) {},    // before controller.loadData
+    onDataLoaded: function(args) {},     // on done of controller.loadData
+    onItemInserting: function(args) {},  // before controller.insertItem
+    onItemInserted: function(args) {},   // on done of controller.insertItem
+    onItemUpdating: function(args) {},   // before controller.updateItem
+    onItemUpdated: function(args) {},    // on done of controller.updateItem
+    onItemDeleting: function(args) {},   // before controller.deleteItem
+    onItemDeleted: function(args) {},    // on done of controller.deleteItem
+        
+    onError: function(args) {},          // on fail of any controller call
+    
+    onOptionChanging: function(args) {}, // before changing the grid option
+    onOptionChanged: function(args) {},  // after changing the grid option
+    
+    onRefreshing: function(args) {},     // before grid refresh
+    onRefreshed: function(args) {},      // after grid refresh
+}
+
+```
+
 ### onDataLoading
 Fires before data loading.
 
-Has following arguments:
+Has the following arguments:
 
@@ -1012,6 +1075,28 @@ ```javascript
 
+#### Cancel Data Loading 
+> version added: 1.2
+
+To cancel data loading set `args.cancel = true`.
+
+In the following example loading is canceled when the filter has empty 'name' field:
+
+```javascript
+
+$("#grid").jsGrid({
+    ...
+    
+    onDataLoading: function(args) {
+        // cancel loading data if 'name' is empty
+        if(args.filter.name === "") {
+            args.cancel = true;
+        }
+    }
+});
+
+```
+
 ### onDataLoaded
 Fires after data loading.
 
-Has following arguments:
+Has the following arguments:
 
@@ -1027,6 +1112,20 @@ ```javascript
 
+In the following example the loaded data is written to the browser console.
+
+```javascript
+
+$("#grid").jsGrid({
+    ...
+    
+    onDataLoaded: function(args) {
+        console.log(args.data);
+    }
+});
+
+```
+
 ### onError
 Fires when controller handler promise failed.
 
-Has following arguments:
+Has the following arguments:
 
@@ -1045,3 +1144,3 @@ ```javascript
 
-Has following arguments:
+Has the following arguments:
 
@@ -1059,6 +1158,28 @@ ```javascript
 
+#### Cancel Item Deletion 
+> version added: 1.2
+
+To cancel item deletion set `args.cancel = true`. This allows to do a validation before performing the actual deletion.
+
+In the following example the deletion of items marked as `protected` is canceled:
+
+```javascript
+
+$("#grid").jsGrid({
+    ...
+    
+    onItemDeleting: function(args) {
+        // cancel deletion of the item with 'protected' field
+        if(args.item.protected) {
+            args.cancel = true;
+        }
+    }
+});
+
+```
+
 ### onItemDeleted
 Fires after item deletion.
 
-Has following arguments:
+Has the following arguments:
 
@@ -1079,3 +1200,3 @@ ```javascript
 
-Has following arguments:
+Has the following arguments:
 
@@ -1091,6 +1212,29 @@ ```javascript
 
+#### Cancel Item Insertion 
+> version added: 1.2
+
+To cancel item insertion set `args.cancel = true`. This allows to do a validation before performing the actual insertion.
+
+In the following example insertion of items with the 'name' specified is allowed:
+
+```javascript
+
+$("#grid").jsGrid({
+    ...
+    
+    onItemInserting: function(args) {
+        // cancel insertion of the item with empty 'name' field
+        if(args.item.name === "") {
+            args.cancel = true;
+            alert("Specify the name of the item!");
+        }
+    }
+});
+
+```
+
 ### onItemInserted
 Fires after item insertion.
 
-Has following arguments:
+Has the following arguments:
 
@@ -1109,3 +1253,3 @@ ```javascript
 
-Has following arguments:
+Has the following arguments:
 
@@ -1124,6 +1268,29 @@ ```javascript
 
+#### Cancel Item Update 
+> version added: 1.2
+
+To cancel item update set `args.cancel = true`. This allows to do a validation before performing the actual update.
+
+In the following example update of items with the 'name' specified is allowed:
+
+```javascript
+
+$("#grid").jsGrid({
+    ...
+    
+    onItemUpdating: function(args) {
+        // cancel update of the item with empty 'name' field
+        if(args.item.name === "") {
+            args.cancel = true;
+            alert("Specify the name of the item!");
+        }
+    }
+});
+
+```
+
 ### onItemUpdated
 Fires after item update.
 
-Has following arguments:
+Has the following arguments:
 
@@ -1145,3 +1312,3 @@ ```javascript
 
-Has following arguments:
+Has the following arguments:
 
@@ -1162,3 +1329,3 @@ ```javascript
 
-Has following arguments:
+Has the following arguments:
 
@@ -1178,3 +1345,3 @@ ```javascript
 
-Has following arguments:
+Has the following arguments:
 
@@ -1192,3 +1359,3 @@ ```javascript
 
-Has following arguments:
+Has the following arguments:
 
@@ -1463,3 +1630,3 @@ ```javascript
 - **lastDisplayIndex** returns the amount of loaded items, since data loaded by page
-- **itemsCount** returns `itemsCount` provided by `controller.loadData` (read more in section [controller.loadData](##loaddatafilter-promisedataresult))
+- **itemsCount** returns `itemsCount` provided by `controller.loadData` (read more in section [controller.loadData](#loaddatafilter-promisedataresult))
 - **openPage** calls `grid.loadData` to load data for the current page
@@ -1466,0 +1633,0 @@ - **loadParams** returns an object with the structure `{ pageIndex, pageSize }` to provide server with paging info

src/jsgrid.core.js

@@ -229,2 +229,13 @@ (function(window, $, undefined) {
 
+        fieldOption: function(field, key, value) {
+            field = this._normalizeField(field);
+
+            if(arguments.length === 2) {
+                return field[key];
+            }
+
+            field[key] = value;
+            this._renderGrid();
+        },
+
         _handleOptionChange: function(name, value) {
@@ -294,2 +305,6 @@ this[name] = value;
                     break;
+                case "updateOnResize":
+                    this._detachWindowResizeCallback();
+                    this._attachWindowResizeCallback();
+                    break;
                 default:
@@ -308,2 +323,7 @@ this.render();
         render: function() {
+            this._renderGrid();
+            return this.autoload ? this.loadData() : $.Deferred().resolve().promise();
+        },
+
+        _renderGrid: function() {
             this._clear();
@@ -320,4 +340,2 @@
             this.refresh();
-
-            return this.autoload ? this.loadData() : $.Deferred().resolve().promise();
         },
@@ -384,3 +402,5 @@
             $.each(this.fields, function(index, field) {
-                return callBack.call(self, field, index);
+                if(field.visible) {
+                    callBack.call(self, field, index);
+                }
             });
@@ -519,4 +539,10 @@ },
             var noDataContent = getOrApply(this.noDataContent, this);
+
+            var amountOfFields = 0;
+            this._eachField(function() {
+                amountOfFields++;
+            });
+
             return $("<tr>").addClass(this.noDataRowClass)
-                .append($("<td>").attr("colspan", this.fields.length).append(noDataContent));
+                .append($("<td>").attr("colspan", amountOfFields).append(noDataContent));
         },
@@ -626,3 +652,3 @@
         _setSortingParams: function(field, order) {
-            field = this._normalizeSortingField(field);
+            field = this._normalizeField(field);
             order = order || ((this._sortField === field) ? this._reversedSortOrder(this._sortOrder) : SORT_ORDER_ASC);
@@ -634,3 +660,3 @@
 
-        _normalizeSortingField: function(field) {
+        _normalizeField: function(field) {
             if($.isNumeric(field)) {
@@ -927,2 +953,5 @@ return this.fields[field];
         _showLoading: function() {
+            if(!this.loadIndication)
+                return;
+
             clearTimeout(this._loadingTimer);
@@ -936,2 +965,5 @@
         _hideLoading: function() {
+            if(!this.loadIndication)
+                return;
+
             clearTimeout(this._loadingTimer);
@@ -1038,3 +1070,3 @@ this._loadIndicator.hide();
         editItem: function(item) {
-            var $row = this._rowByItem(item);
+            var $row = this.rowByItem(item);
             if($row.length) {
@@ -1045,3 +1077,3 @@ this._editRow($row);
 
-        _rowByItem: function(item) {
+        rowByItem: function(item) {
             if(item.jquery || item.nodeType)
@@ -1094,3 +1126,3 @@ return $(item);
 
-            var $row = item ? this._rowByItem(item) : this._editingRow;
+            var $row = item ? this.rowByItem(item) : this._editingRow;
             editedItem = editedItem || this._getEditedItem();
@@ -1165,3 +1197,3 @@
         deleteItem: function(item) {
-            var $row = this._rowByItem(item);
+            var $row = this.rowByItem(item);
 
@@ -1168,0 +1200,0 @@ if(!$row.length)

src/jsgrid.field.js

@@ -15,2 +15,3 @@ (function(jsGrid, $, undefined) {
 
+        visible: true,
         filtering: true,
@@ -17,0 +18,0 @@ inserting: true,

No alert changes

Improved metrics

Number of lines in readme file

1752

10.54%

Worsened metrics

Total package byte prevSize

685519

-24.96%

Number of package files

57

-10.94%

Lines of code

14821

-11.84%

No dependency changes