forked from syncfusion/ej2-vue-samples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlock-row.vue
139 lines (136 loc) · 6.03 KB
/
lock-row.vue
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<template>
<div class="control-section">
<div class="col-md-9 control-section">
<ejs-treegrid :dataSource='data' ref='treegrid' :height='350' :enableHover='false' childMapping='subtasks' :treeColumnIndex='1' :allowPaging= 'true' :editSettings='editSettings' :toolbar='toolbar' :pageSettings='pageSettings' :rowDataBound='rowDataBound' :beginEdit='beginEdit'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='90' isPrimaryKey='true' textAlign='Right' :validationRules='taskidrules'></e-column>
<e-column field='taskName' headerText='Task Name' width='190' :validationRules='tasknamerules'></e-column>
<e-column field='startDate' headerText='Start Date' width='110' editType='datepickeredit' format="yMd" textAlign='Right' :validationRules='daterules'></e-column>
<e-column field='duration' headerText='Duration' width='90' editType='numericedit' :edit='editparams' textAlign='Right' :validationRules='durationrules'></e-column>
</e-columns>
</ejs-treegrid>
</div>
<div>
<div class="col-md-3 property-section">
<table id="property" title="Properties" style="width: 100%">
<tr style="height: 50px">
<td style="width: 70%">
<div>Disable Rows</div>
</td>
<td style="width: 70%">
<ejs-multiselect ref='rows' width='140px' id='multiselect-checkbox' :dataSource='ddldata' mode='CheckBox' :showDropDownIcon='true' :value='value' :select='onselect' :removed='removed'></ejs-multiselect>
</td>
</tr>
</table>
</div>
</div>
<div id="action-description">
<p>
This samples demonstrates the way of preventing editing for certain row and disable the locked rows to differentiate edit and non-editable rows in Tree Grid.
</p>
</div>
<div id="description">
<p>
The Tree Grid supports CRUD operations. This CRUD operations can be configured in Tree Grid using <code>editSettings</code>. Also, it has different modes to manipulate the datasource.
</p>
<p>
The available modes are,
</p>
<ul>
<li><code>Row </code></li>
<li><code>Cell</code></li>
<li><code>Dialog</code></li>
</ul>
<p>
In this sample, we have provided an option in property panel to prevent editing for certain rows. Using <code>beginEdit</code> event of Tree Grid, we prevent the editing for selected Task ID row in the dropdown and disable the corresponding row using <code>rowDataBound</code> event of Tree Grid.
</p>
<p style="font-weight: 500">Injecting Module:</p>
<p>
Tree Grid features are segregated into individual feature-wise modules. To use editing feature, we need to inject
<code>
Edit
</code> module into the <code>provide</code> method.
</p>
</div>
</div>
</template>
<style>
.material .disableRow .e-rowcell{
color: rgba(0, 0, 0, .38) !important;
}
</style>
<!-- custom code start -->
<style>
.material-dark .disableRow .e-rowcell, .fabric-dark .disableRow .e-rowcell,
.bootstrap-dark .disableRow .e-rowcell, .bootstrap5-dark .disableRow .e-rowcell, .highcontrast .disableRow .e-rowcell,
.tailwind .disableRow .e-rowcell, .tailwind-dark .disableRow .e-rowcell {
color: #757575 !important;
}
.fabric .disableRow .e-rowcell {
color: #c8c8c8 !important;
}
.bootstrap .disableRow .e-rowcell, .bootstrap4 .disableRow .e-rowcell,
.bootstrap5 .disableRow .e-rowcell {
color: rgba(0, 0, 0, .35) !important;
}
</style>
<!-- custom code end -->
<script lang="ts">
import Vue from "vue";
import { TreeGridPlugin, Edit, Page, Toolbar, TreeGridComponent } from "@syncfusion/ej2-vue-treegrid";
import { MultiSelectPlugin, ChangeEventArgs, MultiSelectComponent, CheckBoxSelection, DropDownListPlugin} from "@syncfusion/ej2-vue-dropdowns";
import { sampleData, lockRowDropDownData } from "./data-source";
import { RowDataBoundEventArgs, BeginEditArgs } from '@syncfusion/ej2-vue-grids';
import { addClass, removeClass, getValue } from '@syncfusion/ej2-base';
import { CheckBoxPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(TreeGridPlugin);
Vue.use(DropDownListPlugin);
Vue.use(MultiSelectPlugin);
Vue.use(CheckBoxPlugin)
export default Vue.extend({
data: () => {
return {
data: sampleData.slice(0),
editSettings: { allowEditing: true, mode: 'Row' },
pageSettings: {pageSize: 10},
editparams : { params: { format: 'n' } },
taskidrules : { required: true , number: true},
tasknamerules : { required: true},
daterules : { date: true},
durationrules : { number: true , min: 0},
toolbar: ['Edit', 'Update', 'Cancel'],
ddldata: lockRowDropDownData,
value: [2,6]
};
},
provide : {
treegrid: [Edit, Page, Toolbar],
multiselect: [CheckBoxSelection]
},
methods:{
onselect: function(e: ChangeEventArgs): void {
(<TreeGridComponent>this.$refs.treegrid).refresh();
},
removed: function(e: ChangeEventArgs){
(<TreeGridComponent>this.$refs.treegrid).refresh();
},
rowDataBound: function(args: RowDataBoundEventArgs) {
let value:Object[] = <Object[]>(<MultiSelectComponent>this.$refs.rows).ej2Instances.value;
let rowval = getValue('taskID', args.data );
if (value.indexOf(rowval) !== -1) {
addClass([args.row as Element], 'disableRow');
} else {
removeClass([args.row as Element], 'disableRow');
}
},
beginEdit: function(args: BeginEditArgs) {
let key = 'taskID';
let value:Object[] = <Object[]>(<MultiSelectComponent>this.$refs.rows).ej2Instances.value;
let rowval = getValue('taskID', args.rowData);
if (value.indexOf(rowval) !== -1) {
args.cancel = true;
}
}
}
});
</script>