I have one data.js and App.vue.
I have used DevExtream to display UI. It is referring data.js for input
but the checkbox are in readable format. I want it in editable format.
What I have tried:
export const statuses = [{ 'id': 1, 'name': 'Not Started', 'profile':true }, { 'id': 2, 'name': 'In Progress', 'profile':true }, { 'id': 3, 'name': 'Deferred', 'profile':false }, { 'id': 4, 'name': 'Need Assistance', 'profile':true }, { 'id': 5, 'name': 'Completed', 'profile':true }];
<template>
<DxDataGrid
:data-source="statuses"
:show-borders="true"
>
<DxEditing
:allow-updating="true"
:allow-adding="true"
mode="cell"
/>
<DxColumn
:width="150"
:allow-sorting="false"
data-field="name"
>
<DxRequiredRule/>
</DxColumn>
<DxColumn
:width="150"
data-field="profile"
>
<DxCheckBox :value="false"/>
<DxRequiredRule/>
</DxColumn>
</DxDataGrid>
</template>
<script>
import {
DxDataGrid,
DxPaging,
DxHeaderFilter,
DxSearchPanel,
DxEditing,
DxColumn,
DxLookup,
DxRequiredRule,
DxCheckBox
} from 'devextreme-vue';
import { statuses } from './data.js';
App.vue:
export default {
components: {
DxDataGrid,
DxPaging,
DxCheckBox,
DxHeaderFilter,
DxSearchPanel,
DxEditing,
DxColumn,
DxLookup,
DxRequiredRule
},
data() {
return {
statuses: statuses
};
},
methods: {
}
};
</script>
<style>
.status-icon {
height: 16px;
width: 16px;
display: inline-block;
margin-right: 8px;
}
.middle {
vertical-align: middle;
}
</style>