Skip to content

Commit 46613d1

Browse files
richraid21richraid21
committed
Added a new grid config option to allow configuring of where newly inserted rows appear (top or bottom)
1 parent 2db9e9b commit 46613d1

File tree

6 files changed

+101
-17
lines changed

6 files changed

+101
-17
lines changed

‎README.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,8 @@ The config object may contain following options (default values are specified be
119119
paging: false,
120120
pageLoading: false,
121121

122+
insertRowLocation: "bottom",
123+
122124
rowClass: function(item, itemIndex) { ... },
123125
rowClick: function(args) { ... },
124126
rowDoubleClick: function(args) { ... },
@@ -296,7 +298,11 @@ A boolean value specifies whether data is displayed by pages.
296298

297299
### pageLoading (default: `false`)
298300
A boolean value specifies whether to load data by page.
299-
When `pageLoading` is `true` the `loadData` method of controller accepts `filter` parameter with two additional properties `pageSize` and `pageIndex`.
301+
When `pageLoading` is `true` the `loadData` method of controller accepts `filter` parameter with two additional properties `pageSize` and `pageIndex`.
302+
303+
### insertRowLocation (default: `"bottom"`)
304+
Specifies the location of an inserted row within the grid.
305+
When `insertRowLocation` is `"bottom"` the new row will appear at the bottom of the grid. When set to `"top"`, the new row will appear at the top.
300306

301307
### rowClass
302308
A string or a function specifying row css classes.

‎dist/jsgrid.js‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*
22
* jsGrid v1.5.3 (http://js-grid.com)
3-
* (c) 2016 Artem Tabalin
3+
* (c) 2017 Artem Tabalin
44
* Licensed under MIT (https://github.com/tabalinas/jsgrid/blob/master/LICENSE)
55
*/
66

@@ -103,6 +103,7 @@
103103
filterRowClass: "jsgrid-filter-row",
104104

105105
inserting: false,
106+
insertRowLocation: "bottom",
106107
insertRowRenderer: null,
107108
insertRowClass: "jsgrid-insert-row",
108109

@@ -173,6 +174,7 @@
173174
onItemInserting: $.noop,
174175
onItemInserted: $.noop,
175176
onItemEditing: $.noop,
177+
onItemEditCancelling: $.noop,
176178
onItemUpdating: $.noop,
177179
onItemUpdated: $.noop,
178180
onItemInvalid: $.noop,
@@ -1128,7 +1130,7 @@
11281130

11291131
return this._controllerCall("insertItem", insertingItem, args.cancel, function(insertedItem) {
11301132
insertedItem = insertedItem || insertingItem;
1131-
this._loadStrategy.finishInsert(insertedItem);
1133+
this._loadStrategy.finishInsert(insertedItem, this.insertRowLocation);
11321134

11331135
this._callEventHandler(this.onItemInserted, {
11341136
item: insertedItem
@@ -1347,6 +1349,16 @@
13471349
if(!this._editingRow)
13481350
return;
13491351

1352+
var $row = this._editingRow,
1353+
editingItem = $row.data(JSGRID_ROW_DATA_KEY),
1354+
editingItemIndex = this._itemIndex(editingItem);
1355+
1356+
this._callEventHandler(this.onItemEditCancelling, {
1357+
row: $row,
1358+
item: editingItem,
1359+
itemIndex: editingItemIndex
1360+
});
1361+
13501362
this._getEditRow().remove();
13511363
this._editingRow.show();
13521364
this._editingRow = null;
@@ -1604,9 +1616,18 @@
16041616
this._grid.option("data", loadedData);
16051617
},
16061618

1607-
finishInsert: function(insertedItem) {
1619+
finishInsert: function(insertedItem, location) {
16081620
var grid = this._grid;
1609-
grid.option("data").push(insertedItem);
1621+
1622+
switch(location){
1623+
case "top":
1624+
grid.option("data").unshift(insertedItem);
1625+
break;
1626+
case "bottom":
1627+
default:
1628+
grid.option("data").push(insertedItem);
1629+
}
1630+
16101631
grid.refresh();
16111632
},
16121633

@@ -2180,11 +2201,11 @@
21802201
.text(text)
21812202
.appendTo($result);
21822203

2183-
$option.prop("selected", (selectedIndex === index));
21842204
});
21852205

21862206
$result.prop("disabled", !!this.readOnly);
2187-
2207+
$result.prop("selectedIndex", selectedIndex);
2208+
21882209
return $result;
21892210
}
21902211
});

‎dist/jsgrid.min.js‎

Lines changed: 2 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/jsgrid.core.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@
9797
filterRowClass: "jsgrid-filter-row",
9898

9999
inserting: false,
100+
insertRowLocation: "bottom",
100101
insertRowRenderer: null,
101102
insertRowClass: "jsgrid-insert-row",
102103

@@ -1123,7 +1124,7 @@
11231124

11241125
return this._controllerCall("insertItem", insertingItem, args.cancel, function(insertedItem) {
11251126
insertedItem = insertedItem || insertingItem;
1126-
this._loadStrategy.finishInsert(insertedItem);
1127+
this._loadStrategy.finishInsert(insertedItem, this.insertRowLocation);
11271128

11281129
this._callEventHandler(this.onItemInserted, {
11291130
item: insertedItem

‎src/jsgrid.load-strategies.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,18 @@
4747
this._grid.option("data", loadedData);
4848
},
4949

50-
finishInsert: function(insertedItem) {
50+
finishInsert: function(insertedItem, location) {
5151
var grid = this._grid;
52-
grid.option("data").push(insertedItem);
52+
53+
switch(location){
54+
case "top":
55+
grid.option("data").unshift(insertedItem);
56+
break;
57+
case "bottom":
58+
default:
59+
grid.option("data").push(insertedItem);
60+
}
61+
5362
grid.refresh();
5463
},
5564

‎tests/jsgrid.tests.js‎

Lines changed: 52 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1066,7 +1066,7 @@ $(function() {
10661066
deepEqual(grid._getInsertItem(), { field2: "test2" }, "field with inserting=false is not included in inserting item");
10671067
});
10681068

1069-
test("insert data", function() {
1069+
test("insert data with default location", function() {
10701070
var $element = $("#jsGrid"),
10711071

10721072
inserted = false,
@@ -1075,7 +1075,55 @@ $(function() {
10751075

10761076
gridOptions = {
10771077
inserting: true,
1078-
data: [],
1078+
data: [{field: "default"}],
1079+
fields: [
1080+
{
1081+
name: "field",
1082+
insertTemplate: function() {
1083+
var result = this.insertControl = $("<input>").attr("type", "text");
1084+
return result;
1085+
},
1086+
insertValue: function() {
1087+
return this.insertControl.val();
1088+
}
1089+
}
1090+
],
1091+
onItemInserting: function(e) {
1092+
insertingArgs = $.extend(true, {}, e);
1093+
},
1094+
onItemInserted: function(e) {
1095+
insertedArgs = $.extend(true, {}, e);
1096+
},
1097+
controller: {
1098+
insertItem: function() {
1099+
inserted = true;
1100+
}
1101+
}
1102+
},
1103+
1104+
grid = new Grid($element, gridOptions);
1105+
1106+
grid.fields[0].insertControl.val("test");
1107+
grid.insertItem();
1108+
1109+
equal(insertingArgs.item.field, "test", "field is provided in inserting args");
1110+
equal(grid.option("data").length, 2, "data is inserted");
1111+
ok(inserted, "controller insertItem was called");
1112+
deepEqual(grid.option("data")[1], { field: "test" }, "correct data is inserted");
1113+
equal(insertedArgs.item.field, "test", "field is provided in inserted args");
1114+
});
1115+
1116+
test("insert data with specified insert location", function() {
1117+
var $element = $("#jsGrid"),
1118+
1119+
inserted = false,
1120+
insertingArgs,
1121+
insertedArgs,
1122+
1123+
gridOptions = {
1124+
inserting: true,
1125+
insertRowLocation: "top",
1126+
data: [{field: "default"}],
10791127
fields: [
10801128
{
10811129
name: "field",
@@ -1107,9 +1155,9 @@ $(function() {
11071155
grid.insertItem();
11081156

11091157
equal(insertingArgs.item.field, "test", "field is provided in inserting args");
1110-
equal(grid.option("data").length, 1, "data is inserted");
1158+
equal(grid.option("data").length, 2, "data is inserted");
11111159
ok(inserted, "controller insertItem was called");
1112-
deepEqual(grid.option("data")[0], { field: "test" }, "correct data is inserted");
1160+
deepEqual(grid.option("data")[0], { field: "test" }, "correct data is inserted at the beginning");
11131161
equal(insertedArgs.item.field, "test", "field is provided in inserted args");
11141162
});
11151163

0 commit comments

Comments
 (0)