How personalized Toolbar Button with Link - Redirect URL

[André]

Hi People,

I need help:

How do I redirect a custom URL (links) after clicking o Grid Button Toolbar ?

Example: 

See above my code:

I need redirect url (  <router-link :to="'/managerdevice/device/edit/' + scope.row.uuid + '/'"> ) after clicking Edit Button. In other words, replace the alerta with this template html <<router-link :to="'/managerdevice/device/edit/' + scope.row.uuid + '/'"> Any doubt, write me.

Regards

Andre Justo

[Ajith Govarthan]

Hi André, 

Thanks for contacting Syncfusion support. 

Query: How do I redirect a custom URL (links) after clicking o Grid Button Toolbar ? 

Based on your query, we suspect that you want to use Vue routers to navigate to other pages using the toolbar buttons. So, before we proceed to your query, please share the below details to validate further on your requirement. 

1. Share the complete Grid Code Example.

2. Do you want to use default toolbar items along with custom items to navigate to other pages?

 

3. Do you want to use the Vue routers in the toolbar items?

 

4. Share the screenshot of your requirement.

 

5. Share the Syncfusion package version.

 

Regards, 

Ajith G. 

[André]

Hi,

Here are the answers to your question:

1. Share the complete Grid Code Example.

My new code template:

<template>

<div class="app-container">

<div id="Grid">

</div>

</div>

</template>

<script>

import { fetchList, deleteDevice,fetchPropertiesAPI } from "@/api/device";

import { GridPlugin,Grid,Page,Sort,Filter,Group,Toolbar,Search,PdfExport,ExcelExport,CommandColumn } from "@syncfusion/ej2-vue-grids";

import { L10n, setCulture } from '@syncfusion/ej2-base';

setCulture('pt-BR');

L10n.load({

'pt-BR': {

'grid': {

'EmptyRecord': 'Nenhum registro localizado.',

'GroupDropArea': 'Arraste um cabeçalho de coluna aqui para agrupar sua coluna',

'UnGroup': 'Clique oara desagrupar',

'EmptyDataSourceError': 'O DataSource não deve estar vazio no primeiro carregamento, como colunas do dataSource na grade de colunas AutoGenerate',

'Item': 'Item',

'Items': 'Itens'

},

'pager':{

'currentPageInfo': '{0} de {1} páginas.',

'totalItemsInfo': '({0} Total de registros).',

'firstPageTooltip': 'Para a primeira página.',

'lastPageTooltip': 'Para a última página.',

'nextPageTooltip': 'Para a próxima página.',

'previousPageTooltip': 'Voltar para última página.',

'nextPagerTooltip': 'Para a próxima página.',

'previousPagerTooltip': 'Para a página anterior.'

}

}

});

export default {

name: 'DeviceList',

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,

allowExcelExport: false,

allowPdfExport: false,

filterSettings:'filterOptions',

selectionOption: {type: 'Single'},

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",

"Print",

],

selectionSettings: { type: "Single", cellSelectionMode: 'Box' },

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" },

},

],

dataBound: function (args) {

this.grid.toolbarModule.enableItems( [this.grid.element.id + "_add"], true);

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");

},

gridtoolbarClick: function (args) {

var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0];

var uuid = grid.getSelectedRecords()[0][grid.getPrimaryKeyFieldNames()[0]];

alert(uuid);

if (args.item.id === "Grid_pdfexport") {

// 'Grid_pdfexport' -> Grid component id + _ + toolbar item name

this.grid.pdfExport();

}

else if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name

this.grid.excelExport();

}

else if (args.item.id === 'Grid_add') { // 'Grid_add' -> Grid component id + _ + toolbar item name

alert("Click Button ADD...");

}

else if (args.item.id === 'Grid_delete' ) { // 'Grid_delete' -> Grid component id + _ + toolbar item name

alert("Click Button DELETE...");

}

else if (args.item.id === 'Grid_edit') { // 'Grid_edit' -> Grid component id + _ + toolbar item name

alert("Click Button DELETE...");

}

},

getList: function () {

fetchList(this.listQuery).then(response => {

var data = response.data.items

this.grid.dataSource = data;

//this.grid.columns[0].visible = false;

//this.grid.columns[0].isprimarykey = true;

})

fetchPropertiesAPI(this.listQuery).then(response => {

var columns = response.data.listviews[0].columns

this.grid.GridGroupDropArea = response.data.listviews[0].titlegrid;

this.grid.columns = columns;

this.grid.columns[0].visible = false;

this.grid.columns[0].isPrimaryKey = true;

this.grid.refreshColumns();

})

},

},

provide: {

grid: [Sort, Group, Page, Filter,Toolbar],

},

}

</script>

<style scoped>

.edit-input {

padding-right: 100px;

}

.cancel-btn {

position: absolute;

right: 15px;

top: 10px;

}

</style>

2. Do you want to use default toolbar items along with custom items to navigate to other pages?

I 'm migrating my old template form to new form with syncfusion data_grid package.

My old code have a router personalized called <router-link> above:

template>

<div class="app-container">

<el-table

v-loading="listLoading"

:data="list"

border

fit

highlight-current-row

style="width: 100%"

>

<el-table-column align="left" label="UUID" width="285" v-if="false">

<template slot-scope="scope">

<span>{{ scope.row.uuid }}</span>

</template>

</el-table-column> -->

<el-table-column min-width="180px" label="Nome">

<template slot-scope="{ row }">

<router-link :to="'/managerdevice/device/view/' + row.uuid + '/'" class="link-type">

<span>{{ row.name }}</span>

</router-link>

</template>

</el-table-column>

<el-table-column width="250px" align="left" label="Descrição">

<template slot-scope="scope">

<span>{{ scope.row.description }}</span>

</template>

</el-table-column>

<el-table-column class-name="status-col" label="Status" width="80">

<template slot-scope="{ row }">

<el-tag :type="row.islocked | statusFilter">

{{ row.islocked }}

</el-tag>

</template>

</el-table-column>

<el-table-column align="center" label="Ação" width="240">

<template slot-scope="scope">

<router-link :to="'/managerdevice/device/edit/' + scope.row.uuid + '/'">

<el-button

type="primary"

style="margin-left: 10px"

size="mini"

icon="el-icon-edit"

>Alterar

</el-button>

</router-link>

<el-button

type="danger"

style="margin-left: 10px"

size="mini"

icon="el-icon-delete"

@click="handleDelete(scope.row.uuid)"

>Deletar

</el-button>

</template>

</el-table-column>

</el-table>

<pagination

v-show="total > 0"

:total="total"

:page.sync="listQuery.page"

:limit.sync="listQuery.limit"

@pagination="getList"

/>

</div>

</template>

3. Do you want to use the Vue routers in the toolbar items?

See in my new code template, i have three custom button data grid (ADD,EDIT AND DELETE) and ,today, each button open a alert windows examples (alert("Click Button ADD...");).

I want change this row (remove alert msg) and include a other function which open other page after clicked through router url customized by me. Per example: After the user click the Edit Button, i need to open another page whose url router (router_link) below:

<router-link :to="'/managerdevice/device/edit/' + scope.row.uuid + '/'">

<el-button

type="primary"

style="margin-left: 10px"

size="mini"

icon="el-icon-edit"

>Alterar

</el-button>

</router-link>

4. Share the screenshot of your requirement.

See Attached

5. Share the Syncfusion package version.

"@syncfusion/ej2-vue-grids": "^19.2.59",

Any doubt/problem, write me.

Regards,

Andre

Attachment: Screenshot_from_20210924_155514_e0c9017a.zip

[Rajapandiyan Settu]

Hi André, 

 

Thanks for your update. 

 

Based on your requirement, you want to call the function to open the router link when click the toolbar item in the Grid. 

 

Currently, we are checking the feasibility to achieve this at our end. So, we will update the further details on Sep 29^th 2021. 

 

We appreciate your patience until then. 

 

Regards, 

Rajapandiyan S 

[Ajith Govarthan]

Hi André, 

  

Sorry for the delayed update. 

  

Query: How personalized Toolbar Button with Link - Redirect URL 

  

Based on your query you want to navigate programmatically when you click the toolbar buttons in your Grid application. So, we have shared the code example in that we have used the router.push method to navigate dynamically using the Vue JS Router feature with toolbar click event. Please refer below code example and reference links for your reference. 

  

Code Example: 

App.vue 

  

gridtoolbarClick: function (args) { 

var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

  

if (args.item.id === "Grid_pdfexport") { 

// literal string path 

router.push('home')  

// push the component to navigate dynamically with toolbar click event. 

} 

} 

  

Reference Links:  

https://router.vuejs.org/guide/essentials/navigation.html 

  

https://flaviocopes.com/vue-router/ 

  

please get back to us if you need further assistance. 

  

Regards, 

Ajith G.