Skip to content

Commit 0179109

Browse files
ghiscodingghiscoding
authored
[feature] Row Detail panel (#200)
* first working draft of row detail plugin * row detail proof of concept with delay * add onBeforeRowDetailOpen for the server side simulation to work * onBeforeRowDetailOpen is actually receiving a row detail item object * onBeforeRowDetailOpen should use args.detailItem * rename DetailView plugin and onAsyncResponse * rename plugin to RowDetailView * add detail container with overflow auto and renamed itemDetail * add fake names example to better desmonstrate server side call * Added in missing items from the getPaddingItem. * Added in the lines for setting the _parent parameter and the _offset. Incase we need them later. * Move where the height and width are specified for the image. In my version where the column is bigger than 20px this was making the rows 20px and therfore was not aligning. With it attach where it is now it seems to work * Update the HandleAccordionShowHide to allow for a contentView to be handled directly. New way of suscribing for a view to be displayed. We can now set "detailView": To a view therefore allowing us to call a server and get a view as a responce. Added an option loadOnce which will not reload the view on the next expand but instead will show the content already loaded on the last expand. * Overriding the getRenderedRange on slick.core.js from the plugin Init(grid) Updated the GetRenderedRange function to have a minBuffer that is additive of the size used for the detailview. Also remvoed toolTip as wasn't valid. * add sorting * Example of oneTimeLoad and of using a view rather than a template * add back assignee and reporter as extra row detail info * add detail view description * fix error thrown by handleSort * Changed the sort to use an array of stored expanded rows The rows opened are now stored in and array. Collapse all it now added to be used externally. Dataview is no longer needed for funcitons as it all uses the global vairable * Put Plugin in the object creation * add a useRowClick flag to toggle from any columns * add some Events that user can subscribe and some docs * add more docs and details * forgot to remove alert for troubleshooting * FIx up missing comment * add get and setOptions and merge 2 examples in 16 * Fixed up example. Every fith view is not using a template. Row onclick now has buttons for on and off. Updated the descriptions * fix up indentation before final PR * Fix to have the notify check that the one being called is actually the one to change. * Update the slick.grid.js so that the min offscreen row buffer is an option. Added default option of minRowBuffer and set it to the orignal 3 Updated the getRenderedRange to use the options.minRowBuffer * Updated the plugin to use the new option for minRowBuffer * fix subscriber onAsyncResponse being called exponentially * Removed check that the IDs matched as @ghiscoding has fixed the notify * Changed max height to height as scroll bars appear in the middle of screen if content is not big enough * Added in a resize method to resize the detailView to it's actual height * Added extra null checks to the resizeDetailView * Save the displayView if it's one time load when it's collapse is called * Removed styles fom the css and moved some to the example
1 parent e5bca0a commit 0179109

File tree

5 files changed

+674
-2
lines changed

5 files changed

+674
-2
lines changed

‎examples/example16-row-detail.html‎

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
5+
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
6+
<link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
7+
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
8+
<link rel="stylesheet" href="examples.css" type="text/css"/>
9+
<link rel="stylesheet" href="../plugins/slick.rowdetailview.css" type="text/css"/>
10+
<style>
11+
.detail {
12+
padding: 5px
13+
}
14+
.preload {
15+
font-size: 18px;
16+
}
17+
18+
.dynamic-cell-detail > :first-child
19+
{
20+
vertical-align: middle;
21+
line-height: 13px;
22+
padding: 10px;
23+
margin-left: 20px;
24+
}
25+
</style>
26+
</head>
27+
<body>
28+
<div style="position:relative">
29+
<td valign="top" width="50%">
30+
<div id="myGrid" style="width:600px;height:500px;"></div>
31+
</td>
32+
<br/>
33+
34+
<div class="options-panel">
35+
<h2>Demonstrates:</h2>
36+
<ul>
37+
<li>RowDetailView Plugin</li>
38+
<li>See more detail of an item by toggling a row detail panel.<li></li>
39+
<li>"useRowClick: True" to toggle from any column</li>
40+
<li>"useRowClick: False" to toggle from the toggle icon only</li>
41+
<li>"panelRows: 4" DetailView is RowHeight * 4</li>
42+
<li>"loadOnce: True" Try shrink and reopen same row</li>
43+
<li>"loadOnce: False DEFAULT" Will call load every time row is expanded</li>
44+
<li>&nbsp;</li>
45+
<li>Example of using non templated view e.g. check any row multiple of 5<li>
46+
</ul>
47+
48+
<h2>Options:</h2>
49+
<button onclick="detailView.setOptions({ loadOnce: true, useRowClick: detailView.useRowClick })">Load Once ON</button>
50+
&nbsp;
51+
<button onclick="detailView.setOptions({ loadOnce: false, useRowClick: detailView.useRowClick})">Load Once OFF</button>
52+
<p>
53+
<button onclick="detailView.setOptions({ loadOnce: detailView.loadOnce, useRowClick: true })">Row Click ON</button>
54+
&nbsp;
55+
<button onclick="detailView.setOptions({ loadOnce: detailView.loadOnce, useRowClick: false })">Row Click OFF</button>
56+
<h2>View Source:</h2>
57+
<ul>
58+
<li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example16-row-detail.html" target="_sourcewindow"> View the source for this example on Github</a></li>
59+
</ul>
60+
</p>
61+
</div>
62+
</div>
63+
64+
<script src="../lib/firebugx.js"></script>
65+
66+
<script src="../lib/jquery-1.11.2.min.js"></script>
67+
<script src="../lib/jquery-ui-1.11.3.min.js"></script>
68+
<script src="../lib/jquery.event.drag-2.3.0.js"></script>
69+
70+
<script src="../slick.core.js"></script>
71+
<script src="../plugins/slick.rowdetailview.js"></script>
72+
<script src="../slick.formatters.js"></script>
73+
<script src="../plugins/slick.rowselectionmodel.js"></script>
74+
<script src="../slick.grid.js"></script>
75+
<script src="../slick.dataview.js"></script>
76+
77+
<script>
78+
var dataView;
79+
var grid;
80+
var data = [];
81+
var sortcol = "title";
82+
var sortdir = 1;
83+
84+
var fakeNames = ['John Doe', 'Jane Doe', 'Chuck Norris', 'Bumblebee', 'Jackie Chan', 'Elvis Presley', 'Bob Marley', 'Mohammed Ali', 'Bruce Lee', 'Rocky Balboa'];
85+
86+
var columns = [
87+
{id: "sel", name: "#", field: "num", behavior: "select", cssClass: "cell-selection", width: 40, resizable: false, selectable: false },
88+
{id: "title", name: "Title", field: "title", width: 110, minWidth: 110, cssClass: "cell-title", sortable: true},
89+
{id: "duration", name: "Duration", field: "duration", sortable: true},
90+
{id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, sortable: true},
91+
{id: "start", name: "Start", field: "start", minWidth: 60},
92+
{id: "finish", name: "Finish", field: "finish", minWidth: 60},
93+
{id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark}
94+
];
95+
var options = {
96+
editable: false,
97+
enableAddRow: false,
98+
enableCellNavigation: true,
99+
enableColumnReorder: true
100+
};
101+
var detailView;
102+
103+
function DataItem(i) {
104+
this.num = i;
105+
this.id = "id_" + i;
106+
this.percentComplete = Math.round(Math.random() * 100);
107+
this.effortDriven = (i % 5 == 0);
108+
this.start = "01/01/2009";
109+
this.finish = "01/05/2009";
110+
this.title = "Task " + i;
111+
this.duration = "5 days";
112+
}
113+
114+
function loadingTemplate() {
115+
return '<div class="preload">Loading...</div>';
116+
}
117+
118+
function loadView(itemDetail) {
119+
return [
120+
'<div>',
121+
'<h4>' + itemDetail.title + '</h4>',
122+
'<div class="detail"><label>Assignee:</label> <span>' + itemDetail.assignee + '</span></div>',
123+
'<div class="detail"><label>Reporter:</label> <span>' + itemDetail.reporter + '</span></div>',
124+
'<div class="detail"><label>Duration:</label> <span>' + itemDetail.duration + '</span></div>',
125+
'<div class="detail"><label>% Complete:</label> <span>' + itemDetail.percentComplete + '</span></div>',
126+
'<div class="detail"><label>Start:</label> <span>' + itemDetail.start + '</span></div>',
127+
'<div class="detail"><label>Finish:</label> <span>' + itemDetail.finish + '</span></div>',
128+
'<div class="detail"><label>Effort Driven:</label> <span>' + itemDetail.effortDriven + '</span></div>',
129+
'<div class="detail"><label>Effort Driven:</label> <span>' + itemDetail.effortDriven + '</span></div>',
130+
'</div>'
131+
].join('');
132+
}
133+
134+
function simulateServerCall(item) {
135+
// fill the template on delay
136+
setTimeout(function() {
137+
138+
// let's add some property to our item for a better simulation
139+
var itemDetail = item;
140+
itemDetail.assignee = fakeNames[randomNumber(0, 10)];
141+
itemDetail.reporter = fakeNames[randomNumber(0, 10)];
142+
143+
if(itemDetail.num % 5 == 0) {
144+
notifyNonTemplatedView(itemDetail)
145+
} else {
146+
notifyTemplate(itemDetail)
147+
}
148+
}, 1000);
149+
}
150+
151+
function notifyTemplate(itemDetail) {
152+
// notify the onAsyncResponse with the "args.itemDetail" (required property)
153+
// the plugin will then use itemDetail to populate the detail panel with "postTemplate"
154+
detailView.onAsyncResponse.notify({
155+
"itemDetail": itemDetail
156+
}, undefined, this);
157+
}
158+
159+
function notifyNonTemplatedView(itemDetail) {
160+
// notify the onAsyncResponse with the "args.itemDetail" (required property)
161+
// the plugin will then use itemDetail to populate the detail panel with "postTemplate"
162+
detailView.onAsyncResponse.notify({
163+
"itemDetail": itemDetail,
164+
165+
// detailView Ignores any template and use whats passed though instead
166+
"detailView": "<div><h4>Direct view inserting without template</h4><span>This is not using the template</span></div>"
167+
}, undefined, this);
168+
}
169+
170+
function randomNumber(min, max) {
171+
return Math.floor(Math.random() * (max - min + 1) + min);
172+
}
173+
174+
function percentCompleteSort(a, b) {
175+
return a["percentComplete"] - b["percentComplete"];
176+
}
177+
function comparer(a, b) {
178+
var x = a[sortcol], y = b[sortcol];
179+
return (x == y ? 0 : (x > y ? 1 : -1));
180+
}
181+
function toggleFilterRow() {
182+
grid.setTopPanelVisibility(!grid.getOptions().showTopPanel);
183+
}
184+
185+
$(function () {
186+
// prepare the data
187+
for (var i = 0; i < 5000; i++) {
188+
data[i] = new DataItem(i);
189+
}
190+
dataView = new Slick.Data.DataView({ inlineFilters: true });
191+
192+
// create the row detail plugin
193+
detailView = new Slick.Plugins.RowDetailView({
194+
cssClass: "detailView-toggle",
195+
preTemplate: loadingTemplate,
196+
postTemplate: loadView,
197+
process: simulateServerCall,
198+
useRowClick: true,
199+
200+
// how many grid rows do we want to use for the detail panel
201+
// also note that the detail view adds an extra 1 row for padding purposes
202+
// so if you choose 4 panelRows, the display will in fact use 5 rows
203+
panelRows: 4
204+
});
205+
206+
// push the plugin as the first column
207+
columns.unshift(detailView.getColumnDefinition());
208+
209+
grid = new Slick.Grid("#myGrid", dataView, columns, options);
210+
211+
// register the column
212+
grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false}));
213+
grid.registerPlugin(detailView);
214+
215+
detailView.onBeforeRowDetailToggle.subscribe(function(e, args) {
216+
console.log('before toggling row detail', args.item);
217+
});
218+
detailView.onAfterRowDetailToggle.subscribe(function(e, args) {
219+
console.log('after toggling row detail', args.item);
220+
});
221+
detailView.onAsyncEndUpdate.subscribe(function(e, args) {
222+
console.log('finished updating the post async template', args.itemDetail);
223+
});
224+
225+
grid.onSort.subscribe(function (e, args) {
226+
sortdir = args.sortAsc ? 1 : -1;
227+
sortcol = args.sortCol.field;
228+
229+
// using native sort with comparer
230+
// preferred method but can be very slow in IE with huge datasets
231+
dataView.sort(comparer, args.sortAsc);
232+
});
233+
234+
// initialize the model after all the events have been hooked up
235+
dataView.beginUpdate();
236+
dataView.setItems(data);
237+
dataView.endUpdate();
238+
});
239+
</script>
240+
</body>
241+
</html>

‎images/arrow-right.gif‎

63 Bytes
Loading

‎plugins/slick.rowdetailview.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.detailView-toggle
2+
{
3+
display: inline-block;
4+
cursor: pointer;
5+
}
6+
.detailView-toggle.expand
7+
{
8+
height: 20px;
9+
width: 20px;
10+
background: url(../images/arrow-right.gif) no-repeat center center;
11+
}
12+
13+
.detailView-toggle.collapse
14+
{
15+
height: 20px;
16+
width: 20px;
17+
background: url(../images/sort-desc.gif) no-repeat center center;
18+
}
19+
.dynamic-cell-detail
20+
{
21+
z-index: 10000;
22+
position: absolute;
23+
background-color: #dae5e8;
24+
margin: 0;
25+
padding: 0;
26+
width: 100%;
27+
overflow: auto;
28+
}
29+
30+
.dynamic-cell-detail > :first-child
31+
{
32+
vertical-align: middle;
33+
line-height: 13px;
34+
}
35+
36+
.dynamic-cell-detail > .detail-container {
37+
overflow: auto;
38+
display: block !important;
39+
}

0 commit comments

Comments
 (0)