DataViewsJS Vue Component

Supports Vue version 2.0.0 or higher.

The DataViewsJS control can be integrated with the DataViewsJS component for Vue in Vue templates markup. A DataViewsJS Vue component is a wrapper for the DataViewsJS control it represents. The Component creates a DataViewsJS control behind the scenes, and provides a reference to the control instance via the dataView property. The Component also allows you to configure the control options and events declaratively in the Vue template markup.

DataViewsJS Vue component is shipped as a separate npm @grapecity/dataviews.vue package. The latest version of the package can be installed from npm by executing the following command from NodeJS command prompt:

npm install @grapecity/dataviews.vue

See this topic for more details about DataViewsJS npm packages.

After that you can import Vue component using ESM import statements. For example, the below import statement imports the DataViewsJS Vue component:

import '@grapecity/dataviews.vue';

Importing DataViewsJS Vue Component

With this setup, you can import DataViewsJS Vue module and use the component it provides. For example, this code adds a DataViewsJS component to App component's template:

<template>
  <gc-dataview :data="data"></gc-dataview>
</template>

<script>
  import Vue from 'vue';
  import '@grapecity/dataviews.vue';
  import '@grapecity/dataviews.grid'; // to apply default grid layout
  import { getData } from './data';

  let App = Vue.extend({
    name: 'app',
    data: function () {
      return {
        data: getData(),
      };
    },
  });
</script>

Note: DataViewsJS Vue component is registered globally, so you don't need to import any specific class or variable from the @grapecity/dataviews.vue package. This allows you to use an import statement without a from clause. It's enough to import DataViewsJS Vue module only once, somewhere in the root module of your Single Page Application. Alternatively, it is also acceptable to import this module multiple times.

Please see DataView component for referring the properties and events supported by the component.

The "create" Event

DataViewsJS Vue component includes a "create" event which is raised after the DataViewsJS control is initialized. You can use this event to perform further initalization in addition to setting up the properties in markup. For example:

<gc-dataview v-on:create="initDataView"> </gc-dataview>

Vue.extend({
  methods: {
    initDataView(dataView) {
      // expand some nodes manually
      dataView.data.nodes.forEach((node) => {
        node.collapsed = false;
      });

      dataView.invalidate();
    },
    // ...
  },
});

Creating DataViewsJS Control in Code

DataViewsJS component for Vue is intended to be used in Vue template markup. If you want to create a DataViewsJS control in code, you should use a DataViewsJS control from a core module for this purpose, instead of a Vue component. For example, this code creates a DataViewsJS control in code:

import DataView from '@grapecity/dataviews.core';

let data = [];
let dataView = new DataView('#host_element', data);

Note: To import DataViewsJS control, we use '@grapecity/dataviews.core' module instead of '@grapecity/dataviews.vue'.