Click here to Skip to main content
15,031,207 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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>
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900