Skip to content

Commit bfc8b74

Browse files
committed
release v2.4.13 - update github.io
1 parent 30dbf05 commit bfc8b74

File tree

8 files changed

+470
-32
lines changed

8 files changed

+470
-32
lines changed

SlickGrid/.npmignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ examples
33
.gitk*
44
.idea/*
55
nuget*
6+
cypress/*
67
SlickgridRelease*
78
tests
89
testresult.xml

SlickGrid/cypress/integration/exampleGridMenu.spec.js

Lines changed: 129 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22

33
describe('Example - Grid Menu', () => {
44
const fullTitles = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
5-
const titlesWithoutId = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
6-
75

86
it('should display Example Grid Menu', () => {
97
cy.visit(`${Cypress.config('baseExampleUrl')}/example-grid-menu.html`);
@@ -18,7 +16,9 @@ describe('Example - Grid Menu', () => {
1816
.each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
1917
});
2018

21-
it('should click on the Grid Menu to hide the column A from being displayed', () => {
19+
it('should click on the Grid Menu to hide the column "A"', () => {
20+
const expectedTitleList = ['#', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']; // without "A"
21+
2222
cy.get('#myGrid')
2323
.find('button.slick-gridmenu-button')
2424
.trigger('click')
@@ -27,7 +27,7 @@ describe('Example - Grid Menu', () => {
2727
cy.get('#myGrid')
2828
.get('.slick-gridmenu:visible')
2929
.find('.slick-gridmenu-list')
30-
.children('li:nth-child(1)')
30+
.children('li:visible:nth(0)')
3131
.children('label')
3232
.should('contain', 'A')
3333
.click();
@@ -38,14 +38,13 @@ describe('Example - Grid Menu', () => {
3838
.trigger('click')
3939
.click();
4040

41-
const smallerTitleList = titlesWithoutId.slice(1);
4241
cy.get('#myGrid')
4342
.find('.slick-header-columns')
4443
.children()
45-
.each(($child, index) => expect($child.text()).to.eq(smallerTitleList[index]));
44+
.each(($child, index) => expect($child.text()).to.eq(expectedTitleList[index]));
4645
});
4746

48-
it('should click on the External Grid Menu to show the column A as 1st column again', () => {
47+
it('should click on the External Grid Menu to show the column "A" as 1st column again', () => {
4948
cy.get('button')
5049
.contains('Grid Menu')
5150
.trigger('click')
@@ -54,7 +53,7 @@ describe('Example - Grid Menu', () => {
5453
cy.get('#myGrid')
5554
.get('.slick-gridmenu:visible')
5655
.find('.slick-gridmenu-list')
57-
.children('li:nth-child(1)')
56+
.children('li:visible:nth(0)')
5857
.children('label')
5958
.should('contain', 'A')
6059
.click();
@@ -65,6 +64,127 @@ describe('Example - Grid Menu', () => {
6564
cy.get('#myGrid')
6665
.find('.slick-header-columns')
6766
.children()
68-
.each(($child, index) => expect($child.text()).to.eq(titlesWithoutId[index]));
67+
.each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
68+
});
69+
70+
it('should click on "Help" and expect an Alert to show the Help text', () => {
71+
cy.on('window:alert', (str) => {
72+
expect(str).to.equal(`Command: help`);
73+
});
74+
75+
cy.get('.slick-gridmenu-item')
76+
.contains('Help')
77+
.click();
78+
});
79+
80+
it('should toggle Filter Row and expect the row to be hidden', () => {
81+
cy.get('.slick-gridmenu-item')
82+
.contains('Toggle Filter Row')
83+
.click();
84+
85+
cy.get('#myGrid')
86+
.find('.slick-pane-left')
87+
.find('.slick-headerrow')
88+
.should('be.hidden');
89+
});
90+
91+
it('should toggle Filter Row and expect the row to be shown again', () => {
92+
cy.get('.slick-gridmenu-item')
93+
.contains('Toggle Filter Row')
94+
.click();
95+
96+
cy.get('#myGrid')
97+
.find('.slick-pane-left')
98+
.find('.slick-headerrow')
99+
.should('be.visible');
100+
});
101+
102+
it('should toggle Top Panel and expect the row to show up', () => {
103+
cy.get('.slick-gridmenu-item')
104+
.contains('Toggle Top Panel')
105+
.click();
106+
107+
cy.get('#myGrid')
108+
.find('.slick-pane-left')
109+
.find('.slick-top-panel-scroller')
110+
.should('be.visible');
111+
});
112+
113+
it('should toggle Top Panel and expect the row to be hide', () => {
114+
cy.get('.slick-gridmenu-item')
115+
.contains('Toggle Top Panel')
116+
.click();
117+
118+
cy.get('#myGrid')
119+
.find('.slick-pane-left')
120+
.find('.slick-top-panel-scroller')
121+
.should('be.hidden');
122+
});
123+
124+
it('should filter column "#" with value 9 and expect only 1 row in the grid with value 9', () => {
125+
cy.get('.grid-canvas')
126+
.find('.slick-row')
127+
.should('be.visible');
128+
129+
cy.get('#myGrid')
130+
.find('.slick-headerrow-column.l0.r0')
131+
.find('input')
132+
.type('9');
133+
134+
cy.get('#myGrid')
135+
.find('.slick-row')
136+
.should('have.length', 1);
137+
});
138+
139+
it('should open the Grid Menu and click on Clear Filter and expect multiple rows now showing in the grid', () => {
140+
cy.get('#myGrid')
141+
.find('button.slick-gridmenu-button')
142+
.trigger('click')
143+
.click();
144+
145+
cy.get('.slick-gridmenu-item')
146+
.contains('Clear Filters')
147+
.click();
148+
149+
cy.get('.grid-canvas')
150+
.find('.slick-row')
151+
.should('be.visible');
152+
153+
cy.get('#myGrid')
154+
.find('.slick-row')
155+
.its('length')
156+
.should('be.gt', 1)
157+
158+
cy.get('#myGrid')
159+
.get('.slick-gridmenu:visible')
160+
.find('span.close')
161+
.trigger('click')
162+
.click();
163+
});
164+
165+
it('should drag column "A" to be after column "C" and expect this to be reflected in the Grid Menu', () => {
166+
const expectedGridMenuList = ['B', 'C', 'A', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'Force fit columns', 'Synchronous resize']; // without "A"
167+
168+
cy.get('.slick-header-columns')
169+
.children('.slick-header-column:nth(1)')
170+
.should('contain', 'A')
171+
.trigger('mousedown', 'bottom', { which: 1 });
172+
173+
cy.get('.slick-header-columns')
174+
.children('.slick-header-column:nth(3)')
175+
.should('contain', 'C')
176+
.trigger('mousemove', 'bottomRight')
177+
.trigger('mouseup', 'bottomRight', { force: true });
178+
179+
cy.get('button')
180+
.contains('Grid Menu')
181+
.trigger('click')
182+
.click();
183+
184+
cy.get('#myGrid')
185+
.get('.slick-gridmenu:visible')
186+
.find('.slick-gridmenu-list')
187+
.children('li:visible')
188+
.each(($child, index) => expect($child.text()).to.eq(expectedGridMenuList[index]));
69189
});
70190
});
Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5+
<title>SlickGrid example: Plugin: State</title>
6+
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
7+
<link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
8+
<link rel="stylesheet" href="../plugins/slick.headerbuttons.css" type="text/css"/>
9+
<link rel="stylesheet" href="../controls/slick.columnpicker.css" type="text/css"/>
10+
<link rel="stylesheet" href="examples.css" type="text/css"/>
11+
<style>
12+
.icon-highlight-off,
13+
.icon-highlight-on {
14+
background-image: url(../images/bullet_blue.png);
15+
}
16+
17+
.icon-highlight-off {
18+
opacity: 0.2;
19+
}
20+
21+
.negative-highlight {
22+
background: red;
23+
}
24+
25+
.slick-header-column.filtered {
26+
background: #D8E2FF;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<div style="position:relative">
32+
<div id="gridContainer">
33+
<div id="myGrid" style="width:600px;height:500px;"></div>
34+
</div>
35+
36+
<div class="options-panel">
37+
<h2>About</h2>
38+
<p>
39+
This example demonstrates using the <b>Slick.State</b> plugin persisting grid column width, order, visibility and sort order using Local Storage.
40+
For this demo, we use Local Storage, but you could technically save this data into a database and reload at any time your previous session.
41+
</p>
42+
</div>
43+
</div>
44+
45+
<script src="../lib/firebugx.js"></script>
46+
47+
<script src="../lib/jquery-1.11.2.min.js"></script>
48+
<script src="../lib/jquery-ui-1.11.3.js"></script>
49+
<script src="../lib/jquery.event.drag-2.3.0.js"></script>
50+
51+
<script src="../slick.core.js"></script>
52+
<script src="../slick.dataview.js"></script>
53+
<script src="../slick.grid.js"></script>
54+
<script src="../plugins/slick.state.js"></script>
55+
<script src="../controls/slick.columnpicker.js"></script>
56+
57+
<script id="script_tag_example" type="text/javascript">
58+
var grid;
59+
var data = [];
60+
var options = {
61+
enableColumnReorder: true,
62+
multiColumnSort: true,
63+
enableCellNavigation: true
64+
};
65+
var columns = [];
66+
var columnsWithHighlightingById = {};
67+
68+
69+
// Set up some test columns.
70+
for (var i = 0; i < 10; i++) {
71+
columns.push({
72+
id: i,
73+
name: String.fromCharCode("A".charCodeAt(0) + i),
74+
field: i,
75+
width: 90,
76+
sortable: true
77+
});
78+
}
79+
80+
// Set up some test data.
81+
for (var i = 0; i < 100; i++) {
82+
var d = (data[i] = {});
83+
d.id = i;
84+
for (var j = 0; j < columns.length; j++) {
85+
d[j] = Math.round(Math.random() * 10) - 5;
86+
}
87+
}
88+
89+
$(function () {
90+
var dataView = new Slick.Data.DataView();
91+
var statePersistor = new Slick.State({
92+
cid: 'sample-grid',
93+
defaultColumns: columns
94+
});
95+
96+
statePersistor.onStateChanged.subscribe(function (e, args) {
97+
console.log("onStateChanged", args);
98+
});
99+
100+
grid = new Slick.Grid("#myGrid", dataView, columns, options);
101+
var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
102+
columnpicker.onColumnsChanged.subscribe(function () {
103+
statePersistor.save();
104+
});
105+
106+
grid.registerPlugin(statePersistor);
107+
108+
dataView.onRowCountChanged.subscribe(function (e, args) {
109+
grid.updateRowCount();
110+
grid.render();
111+
});
112+
113+
dataView.onRowsChanged.subscribe(function (e, args) {
114+
grid.invalidateRows(args.rows);
115+
grid.render();
116+
});
117+
118+
function sortDataView(cols) {
119+
dataView.sort(function (dataRow1, dataRow2) {
120+
for (var i = 0, l = cols.length; i < l; i++) {
121+
if (!cols[i].sortCol) continue;
122+
var field = cols[i].sortCol.field;
123+
var sign = cols[i].sortAsc ? 1 : -1;
124+
var value1 = dataRow1[field], value2 = dataRow2[field];
125+
var result = (value1 === value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
126+
if (result !== 0) {
127+
return result;
128+
}
129+
}
130+
return 0;
131+
});
132+
grid.invalidate();
133+
grid.render();
134+
}
135+
136+
grid.onSort.subscribe(function (e, args) {
137+
sortDataView(args.sortCols);
138+
});
139+
140+
grid.init();
141+
142+
dataView.beginUpdate();
143+
dataView.setItems(data);
144+
dataView.endUpdate();
145+
146+
statePersistor.restore()
147+
.then(function (state) {
148+
grid.setSortColumns(state.sortcols);
149+
var columns = grid.getColumns();
150+
var sortCols = $.map(grid.getSortColumns(), function (col) {
151+
return {
152+
sortCol: columns[grid.getColumnIndex(col.columnId)],
153+
sortAsc: col.sortAsc
154+
};
155+
});
156+
sortDataView(sortCols);
157+
});
158+
});
159+
</script>
160+
</body>
161+
</html>

SlickGrid/lib/jquery.event.drop-2.3.0.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ drop = $.event.special.drop = {
162162
locate: function( elem, index ){
163163
var data = $.data( elem, drop.datakey ),
164164
$elem = $( elem ),
165-
posi = $elem.offset() || {},
165+
posi = $elem.length && !$elem.is(document) ? $elem.offset() : {},
166166
height = $elem.outerHeight(),
167167
width = $elem.outerWidth(),
168168
location = {

SlickGrid/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "slickgrid",
3-
"version": "2.4.12",
3+
"version": "2.4.13",
44
"description": "A lightning fast JavaScript grid/spreadsheet",
55
"main": "slick.core.js",
66
"directories": {
@@ -33,6 +33,6 @@
3333
"jquery-ui": ">=1.8.0"
3434
},
3535
"devDependencies": {
36-
"cypress": "^3.3.1"
36+
"cypress": "^3.4.1"
3737
}
3838
}

0 commit comments

Comments
 (0)