1. Home
  2. Forum
  3. Vue
  4. Problem Enable Button Toolbar and click event Button VUE

Problem Enable Button Toolbar and click event Button VUE

Hi support,

Please help me

I have a four problem:

1)  How enable buttons in toolbar after one row selected. Example: After selected a row, enable the button EDIT and DELETE in toolbar
2) How capture click event in each button. My function toobarclick don work. 
3) How capture UUID columns selected in grid
4) Error javascript when after clicked button Exportpdf OR button CVSExport

OBS:  I have a problem javascript error when click Exportpdf button:
Uncaught TypeError: cur.handler.call is not a function
    at Observer.push../node_modules/@syncfusion/ej2-base/src/observer.js.Observer.notify (observer.js:99)
    at Grid.push../node_modules/@syncfusion/ej2-base/src/base.js.Base.trigger (base.js:181)
    at Toolbar.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/toolbar.js.Toolbar.toolbarClickHandler (toolbar.js:337)
    at Observer.push../node_modules/@syncfusion/ej2-base/src/observer.js.Observer.notify (observer.js:99)
    at Toolbar.push../node_modules/@syncfusion/ej2-base/src/base.js.Base.trigger (base.js:181)
    at Toolbar.push../node_modules/@syncfusion/ej2-navigations/src/toolbar/toolbar.js.Toolbar.clickHandler (toolbar.js:576)

 <template>
<div class="app-container">
<div id="Grid">
</div>
</div>
</template>

<script>
import { fetchListAPI,deletePackageAPI,fetchPropertiesAPI } from '@/api/core/package'
import Vue from "vue";
import { GridPlugin,Grid,Page,Sort,Filter,Group,Toolbar,Search,PdfExport,ExcelExport,CommandColumn } from "@syncfusion/ej2-vue-grids";

Vue.use(GridPlugin);

export default {
name: 'PackageList',
components: { },
data() {
return {
data: {},
selectedRow: 0,
list: "",
displayFields: "",
grid: new Grid(),
pageOptions: { pageSize: 5, pageSizes: true },
listQuery: {
page: 1,
limit: 20,
offset: 19
}
//DataService: new DataService(),
};
},
mounted() {
// Used vue mounted hook to provide dataSource to Grid and handled the initial paging
let state = { skip: 0, take: this.pageOptions.pageSize };
this.createDataGrid();
//this.dataStateChange(state);
},
methods: {
dataStateChange: function (state) {
// Handled the other Grid actions like paging, sorting etc.. by using dataState change event
this.DataService
.execute(state)
.then((gridData) => (this.data = gridData));
},
createDataGrid: function () {
Grid.Inject(
Page,
Sort,
Filter,
Group,
Toolbar,
Search,
PdfExport,
ExcelExport,
CommandColumn
);
this.grid = new Grid({
width: '100%',
pageSettings: { pageSize: 50 },
allowEditing: true,
allowAdding: true,
allowDeleting: true,
allowSorting: true,
allowGrouping: true,
allowTextWrap: true,
allowPaging: true,
filterSettings:'filterOptions',
toolbarClick:'toolbarClick',
//rowSelected:'rowSelected',
resizeSettings: { mode: "Normal" },
created: function () {
this.grid.showSpinner();
this.getList();
}.bind(this),
toolbar: [
"Add",
"Edit",
"Delete",
"Search",
"PdfExport",
"ExcelExport",
"Print",
],
selectionSettings: { persistSelection: true , type: "Single"},
filterOptions: { type: "Menu", type: "CheckBox" },
commands: [
{
type: "Edit",
buttonOption: { cssClass: "e-flat", iconCss: "e-edit e-icons" },
},
{
type: "Delete",
buttonOption: { cssClass: "e-flat", iconCss: "e-delete e-icons" },
},
{
type: "Save",
buttonOption: { cssClass: "e-flat", iconCss: "e-update e-icons" },
},
{
type: "Cancel",
buttonOption: { cssClass: "e-flat", iconCss: "e-cancel-icon e-icons" },
},
],
});
this.grid.appendTo("#Grid");
},
getList: function () {
fetchListAPI(this.listQuery).then(response => {
var data = response.data.items
this.grid.dataSource = data;
})
fetchPropertiesAPI(this.listQuery).then(response => {
var columns = response.data.listviews[0].columns
this.grid.columns = columns;
this.grid.columns[0].visible = false;
this.grid.columns[0].isprimarykey = true;
this.grid.refreshColumns();
})
},
// Function Toolbar events Button
toolbarClick: function (args) {
var gridObj = document.getElementById("Grid").ej2_instances[0];
console.log(gridObj)
debugger
if (args.item.id === 'Grid_pdfexport') { // 'Grid_pdfexport' -> Grid component id + _ + toolbar item name
this.$refs.grid.pdfExport();
}
else if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
this.$refs.grid.excelExport();
}
else if (args.item.id === 'Grid_add') { // 'Grid_add' -> Grid component id + _ + toolbar item name
alert("Clicou botão ADD...");
}
else if (args.item.id === 'Grid_delete' ) { // 'Grid_delete' -> Grid component id + _ + toolbar item name
console.log(args.form.querySelector("uuid").value);
//handleDelete(args.form.querySelector("#Freight"))
}
else if (args.item.id === 'Grid_edit') { // 'Grid_edit' -> Grid component id + _ + toolbar item name
alert("Clicou botão EDIT...");
}
},
},
provide: {
grid: [Sort, Group, Page, Filter,Toolbar],
},
}

</script>


3 Replies 1 reply marked as answer
PG Praveenkumar Gajendiran Syncfusion Team April 7, 2021 11:15 AM UTC

Hi Andre,

Thanks for contacting Syncfusion support.

Query1: “How enable buttons in toolbar after one row selected. Example: After selected a row, enable the button EDIT and DELETE in toolbar” 
Based on your query, we suggest you to use enableItems method of toolbarModule, using which you can dynamically enable/disable the toolbar items in Grid. Refer to the below documentation for more information. 

You can achieve your requirement by using following code example in the dataBound, actionComplete, rowSelected, rowDeselected events of Grid. In which we dynamically enable and disable the edit and delete toolbar button based on the selected records.  


 

createDataGrid: function () { 
      this.grid = new Grid({ 
        width: "100%", 
        pageSettings: { pageSize: 5 }, 
        editSettings: { 
          allowEditing: true, 
          allowAdding: true, 
          allowDeleting: true, 
        }, 
        allowExcelExport: true, 
        allowPdfExport: true, 
        allowSorting: true, 
        allowGrouping: true, 
        allowPaging: true, 
       filterSettings: "filterOptions", 
        toolbarClick: function (args) { 
          this.gridtoolbarClick(args); 
        }.bind(this), 
        resizeSettings: { mode: "Normal" }, 
        created: function () { 
          this.grid.showSpinner(); 
          this.getList(); 
        }.bind(this), 
        toolbar: [ 
          "Add", 
          "Edit", 
          "Delete", 
          "Search", 
          "PdfExport", 
          "ExcelExport", 
          "Print", 
        ], 
        selectionSettings: { type: "Single" }, 
        filterOptions: { type: "Menu" }, 
        columns: […], 
        dataBound: function (args) { 
          if (this.grid.getSelectedRecords().length < 1) { 
            this.grid.toolbarModule.enableItems([this.grid.element.id + "_delete"], false); 
            this.grid.toolbarModule.enableItems( [this.grid.element.id + "_edit"], false); 
          } 
        }.bind(this), 
        rowSelected: function (args) { 
          if (this.grid.getSelectedRecords().length > 0) { 
            this.grid.toolbarModule.enableItems([this.grid.element.id + "_delete"], true); 
            this.grid.toolbarModule.enableItems( [this.grid.element.id + "_edit"], true); 
          } 
        }.bind(this), 
        rowDeselected: function (args) { 
          if (this.grid.getSelectedRecords().length === 0) { 
          this.grid.toolbarModule.enableItems([this.grid.element.id + "_delete"], false); 
            this.grid.toolbarModule.enableItems( [this.grid.element.id + "_edit"], false);
          } 
        }.bind(this), 
        actionComplete: function (args) { 
          setTimeout(() => { 
            var gridObj = document.getElementById("Grid").ej2_instances[0]; 
            if (gridObj.getSelectedRecords().length < 1) { 
              gridObj.toolbarModule.enableItems([gridObj.element.id + "_delete"], false); 
              gridObj.toolbarModule.enableItems([gridObj.element.id + "_edit"], false); 
            } 
          }); 
        }, 
      }); 
      this.grid.appendTo("#Grid"); 
    }, 

Sample: https://codesandbox.io/s/297565-edit-in-single-click-forked-r7f01?file=/src/App.vue

Query2 & 4: “ How capture click event in each button. My function toobarclick don work” && “Error javascript when after clicked button Exportpdf OR button CVSExport” 

We checked your provided code example, in that we found you have not defined the toolbarClick function properly to Grid. So we have prepared a sample based on your provided code example, in that we defined the proper toolbarClick function to the Grid to resolve your reported issue. Refer the below code example and sample for more information.

Sample: https://codesandbox.io/s/297565-edit-in-single-click-forked-r7f01?file=/src/App.vue 

createDataGrid: function () { 
      this.grid = new Grid({ 
        width: "100%", 
        pageSettings: { pageSize: 5 }, 
        editSettings: { 
          allowEditing: true, 
          allowAdding: true, 
          allowDeleting: true, 
        }, 
        allowExcelExport: true, 
        allowPdfExport: true, 
        allowSorting: true, 
        allowGrouping: true, 
        allowPaging: true, 
       filterSettings: "filterOptions", 
        toolbarClick: function (args) { 
          this.gridtoolbarClick(args); 
        }.bind(this), 
        resizeSettings: { mode: "Normal" }, 
        created: function () { 
          this.grid.showSpinner(); 
          this.getList(); 
        }.bind(this), 
        toolbar: [ 
          "Add", 
          "Edit", 
          "Delete", 
          "Search", 
          "PdfExport", 
          "ExcelExport", 
          "Print", 
        ], 
        selectionSettings: { type: "Single" }, 
        filterOptions: { type: "Menu" }, 
        columns: […], 
      }); 
      this.grid.appendTo("#Grid"); 
    }, 
   gridtoolbarClick: function (args) { 
      var gridObj = document.getElementById("Grid").ej2_instances[0]; 
      console.log(gridObj); 

      if (args.item.id === "Grid_pdfexport") { 
        // 'Grid_pdfexport' -> Grid component id + _ + toolbar item name 
        this.grid.pdfExport(); 
      }
}, 

Query3: How capture UUID columns selected in grid

Based on your query, we suspect that your requirement is to get the grid column UID, for this we suggest you to use the getUidByColumnField("column field name”) method of Grid to achieve your requirement. Refer the below API documentation for more information.

API Documentation: https://ej2.syncfusion.com/vue/documentation/api/grid/#getuidbycolumnfield

Please get back to us if you need further assistance.

Regards,
Praveenkumar G 


Marked as answer
AN André April 7, 2021 03:44 PM UTC

Problem 1: Done !
Problem 2: Done !
Problem 3: Fail. Open other Thread.
Problem 4: Half done: Error javascript when after clicked button Exportpdf:   See screen above:

 Uncaught (in promise)

(anonymous)@pdf-export.js:146

PG Praveenkumar Gajendiran Syncfusion Team April 8, 2021 10:09 AM UTC

Hi Andre,

Thanks for your update.

Query1: “Fail. Open other Thread”.

We are not able to clearly understand your requirement from the provided information. So please elaborate on it with more details based on which we will check from our end and provide the further details. 

Query 2: “Half done: Error javascript when after clicked button Exportpdf:   See screen above:” 
We checked your reported issue at our end, but we are not able to reproduce the reported issue and Grid with pdfExport feature is working properly at our end. Please check the below sample for your reference.

Sample: https://codesandbox.io/s/297565-edit-in-single-click-forked-93u5b?file=/src/App.vue 
So please share us the below information that will be helpful to validate further on this,  
1)                 Share your modified Grid rendering code. 
2)                 If possible share us a simple sample to replicate the problem or try reproducing it in the above provided sample. 
3)                 Let us know the replication procedure for reproducing the problem. 
4)                 Syncfusion package version used. 

Please get back to us with the requested details which will be helpful for us to validate the reported issue at our end and provide solution as early as possible 

Regards,
Praveenkumar G 


Loader.
Up arrow icon