Is it possible to hide the tool bar or some of the CRUD operations in Vue Grid?

[David Nyakundi]

Is it possible to hide the tool bar or some of the Crud Operation is a user has no permission to perform any crud.

I have a data property called Permissions which hold the required access level for the logged in User such as "canEdit:true". I would like to hide Edit button on the Data grid if the user is not allowed to edit.

I have tried to access the Grid on Created life hook 

this.$refs.grid.allowEditing......

but am getting an error "undefined"

[Rajapandiyan Settu]

Hi David, 

 

Thanks for contacting Syncfusion support. 

 

Query: Is it possible to hide the tool bar or some of the Crud Operation is a user has no permission to perform any crud. 

 

You can achieve your requirement by using editSettings and toolbar properties of Grid in its load event. Please find the below code example and sample for more information. 

 

Load: https://ej2.syncfusion.com/vue/documentation/api/grid/#load 

editSettings: https://ej2.syncfusion.com/vue/documentation/api/grid/#editsettings  

toolbar: https://ej2.syncfusion.com/vue/documentation/api/grid/#toolbar 

 

[App.vue] 

 

<template> 

  <div id="app"> 

    <ejs-grid 

      ref="grid" 

      :dataSource="data" 

      :editSettings="editSettings" 

      height="270" 

      :toolbar="toolbar" 

      :load="load" 

    > 

      <e-columns> 

        <e-column 

          field="OrderID" 

          headerText="Order ID" 

          textAlign="Right" 

          :isPrimaryKey="true" 

          width="100" 

        ></e-column> 

        <e-column 

          field="CustomerID" 

          headerText="Customer ID" 

          width="120" 

        ></e-column> 

        <e-column 

          field="Freight" 

          headerText="Freight" 

          textAlign="Right" 

          width="120" 

          format="C2" 

        ></e-column> 

        <e-column 

          field="ShipCountry" 

          headerText="Ship Country" 

          width="150" 

        ></e-column> 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { GridPlugin, Page, Toolbar, Edit } from "@syncfusion/ej2-vue-grids"; 

import { data } from "./datasource.js"; 

 

Vue.use(GridPlugin); 

 

export default { 

  data() { 

    return { 

      data: data, 

      editSettings: { 

        allowEditing: true, 

        allowAdding: true, 

        allowDeleting: true, 

      }, 

      toolbar: ["Add", "Edit", "Delete", "Update", "Cancel", "Search"], 

    }; 

  }, 

  methods: { 

    load: function (args) { 

      var isPermitted = false; 

      if (!isPermitted) { 

// disable the editing actions in the Grid 

        this.$refs.grid.$el.ej2_instances[0].editSettings = { 

          allowEditing: false, 

          allowAdding: false, 

          allowDeleting: false, 

        }; 

// define the toolbar buttons 

        this.$refs.grid.$el.ej2_instances[0].toolbar = ["Search"]; 

      }  

    }, 

  }, 

  provide: { 

    grid: [Page, Edit, Toolbar], 

  }, 

}; 

</script> 

 

 

 

Sample: https://codesandbox.io/s/156225-vue-recordclick-forked-4kdtr?file=/src/App.vue 

 

In another way, you can dynamically enable/disable the toolbar items in Grid by using enableItems method of toolbarModule. Refer to the below documentation for more information. 

https://ej2.syncfusion.com/vue/documentation/grid/tool-bar/#enabledisable-toolbar-items 

You can achieve this by using following code example in the dataBound, actionComplete events of Grid. 

 

dataBound: https://ej2.syncfusion.com/vue/documentation/api/grid/#databound 

actionComplete: https://ej2.syncfusion.com/vue/documentation/api/grid/#actioncomplete 

 

 

 

    dataBound: function (args) { 

      var gridid = this.$refs.grid.ej2Instances.element.id; 

      this.$refs.grid.ej2Instances.toolbarModule.enableItems( 

        [ 

          gridid + "_add", 

          gridid + "_edit", 

          gridid + "_cancel", 

          gridid + "_update", 

          gridid + "_delete", 

        ], 

        false 

      ); //Disable toolbar items. 

    } 

 

 

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S