-
Notifications
You must be signed in to change notification settings - Fork 78
/
test-modal-datagrid-tooltips.html
87 lines (79 loc) · 2.89 KB
/
test-modal-datagrid-tooltips.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<div class="row">
<div class="twelve columns">
<button class="btn-secondary" type="button" id="open-modal">Open Modal</button><br/><br/>
<div id="modal-content" style="display: none;">
<div id="datagrid">
</div>
</div>
</div>
</div>
<script>
$('body').one('initialized', function () {
//Locale.set('en-US').done(function () {
var grid,
columns = [],
data = [];
// Some Sample Data
data.push({ id: 1, productId: 'T100', summary: 'Is action oriented and full of energy'});
data.push({ id: 2, productId: '200', summary: 'Active Server Pages'});
data.push({ id: 3, productId: '300', summary: 'Analytical Skills'});
data.push({ id: 4, productId: 'Z400', summary: 'Is excellent at honest analysis'});
data.push({ id: 4, productId: 2445204, summary: 'Assessment Skills'});
data.push({ id: 5, productId: 2542205, summary: 'Practices attentive and active listening'});
data.push({ id: 5, productId: 2642205, summary: 'Creates a feeling of belonging to and commitment to the team'});
data.push({ id: 6, productId: 2642206, summary: 'Brings out the best in people'});
//Define Columns for the Grid.
columns.push({ id: 'selectionCheckbox', sortable: false, resizable: false, formatter: Soho.Formatters.SelectionCheckbox, align: 'center'});
columns.push({ id: 'productId', name: 'Id', field: 'productId', formatter: Soho.Formatters.Text});
columns.push({ id: 'summary', name: 'Summary', field: 'summary', formatter: Soho.Formatters.Editor, textOverflow: 'ellipsis', width: 300, singleline: true, contentTooltip: true, filterType: 'text', align: 'left' });
// Init and get the api for the grid
grid = $('#datagrid').datagrid({
columns: columns,
dataset: data,
saveColumns: false,
paging: true,
pagesize: 10,
actionableMode: true,
cellNavigation: true,
editable: false,
enableTooltips: true,
filterWhenTyping: false,
redrawOnResize: false,
rowHeight: 'small',
selectable: 'multiple',
showDirty: false,
// toolbar: {title: 'Compressors', actions: true, rowHeight: true, personalize: true}
}).data('datagrid');
var modals = {
'open-modal': {
'title': 'Open Modal',
'content': $('#modal-content')
}
},
setModal = function (opt) {
opt = $.extend({
buttons: [{
text: 'Cancel',
id: 'modal-button-1',
click: function(e, modal) {
modal.close();
}
}, {
text: 'Save',
id: 'modal-button-2',
click: function(e, modal) {
modal.close();
},
validate: false,
isDefault: true
}],
// maxWidth: 1000
autoFocus: false
}, opt);
$('body').modal(opt);
};
$('#open-modal').on('click', function () {
setModal(modals[this.id]);
});
});
</script>