DimitarChristoff / slickgrid-es6

SlickGrid fork rewrites for ES6 for use under npm and Babel / Rollup builds
https://dimitarchristoff.github.io/slickgrid-es6/
101 stars 42 forks source link

When using in Vue.js don't work "enableTextSelectionOnCells: true" #27

Open e23fx opened 6 years ago

e23fx commented 6 years ago
npm install --global vue-cli
vue init webpack my-project
cd my-project

in package.json add dependencies: "slickgrid-es6": "^2.1.0" and devDependencies:

    "less": "^2.5.3",
    "less-loader": "^2.2.1"

npm install

create assets/slick.less:

@import '~slickgrid-es6/dist/slick.grid.variables.less';
@import '~slickgrid-es6/dist/slick.grid.less';
@import '~slickgrid-es6/dist/slick-default-theme.less';

HelloWorld.vue:

<template>
  <div class="hello">
    <div id="myGrid"
    class="slickgrid-container"
    style="width:600px;height:500px;"></div>
  </div>
</template>

<script>
import { Grid } from 'slickgrid-es6'
import '../assets/slick.less'

export default {
  name: 'HelloWorld',
  data () {
    return {
      grid: {}
    }
  },
  mounted: function () {
    this.$nextTick(function () {
      var columns = [
        {id: 'title', name: 'Title', field: 'title'},
        {id: 'duration', name: 'Duration', field: 'duration'}
      ]
      var options = {
        enableCellNavigation: true,
        enableColumnReorder: false,
        enableTextSelectionOnCells: true
      }
      var data = []
      for (var i = 0; i < 500; i++) {
        data[i] = {
          title: 'Task ' + i,
          duration: '5 days'
        }
      }
      this.grid = new Grid('#myGrid', data, columns, options)
    })
  }
}
</script>

<style scoped>
</style>

npm run dev

And text is not can be selected in cells. Please check it.

harit2101 commented 6 years ago

Even am struggling to copy cell text value.Any help would be really helpful ..

Thanks in advance