3

ag-grid-vue documentation from ag-grid website clearly says:

You can provide Vue Router links within the Grid, but you need to ensure that you provide a Router to the Grid Component being created.

with sample code:

// create a new VueRouter, or make the "root" Router available
import VueRouter from "vue-router";
const router = new VueRouter();

// pass a valid Router object to the Vue grid components to be used within the grid
components: {
    'ag-grid-vue': AgGridVue,
    'link-component': {
        router,
        template: '<router-link to="/master-detail">Jump to Master/Detail</router-link>'
    }
},

// You can now use Vue Router links within you Vue Components within the Grid
{
    headerName: "Link Example",
    cellRendererFramework: 'link-component',
    width: 200
}

What's missing here is how to make the "root" Router available. I've been looking into various sources and see many people have the same problem, but none got a clear answer.

https://github.com/ag-grid/ag-grid-vue/issues/1

https://github.com/ag-grid/ag-grid-vue/issues/23

https://github.com/ag-grid/ag-grid-vue-example/issues/3

https://forum.vuejs.org/t/vue-cant-find-a-simple-inline-component-in-ag-grid-vue/21788/10

Does ag-grid-vue still work with vue-router, then how, or is this just outdated documentation? Some people claim it worked for them so I assume it worked at one point.

I am not looking for cool answer at this point. I just want to know if it is possible. I tried passing router using window or created() and none worked so far.

Thank you!

kennethc
  • 814
  • 1
  • 10
  • 26
  • 1
    It's likely supposed to work in this way but from the number of people that are stuck on it, something's probably broken. And it's going to take ag-grid a while to fix it. You might have a better chance using this approach: https://router.vuejs.org/guide/essentials/navigation.html. With an ag-grid `cellRenderer`: https://stackoverflow.com/a/45231951/405015. Let me know if this doesn't make sense and I'll write a full answer. I don't really use Vue.js but it looks similar enough to React, for this problem. – thirtydot Sep 02 '18 at 15:22
  • Is it possible the click event is being triggered on another overlapping dom element? I would also try using Vue's provide / inject api. – Brian Lee Sep 03 '18 at 10:48
  • @thirtydot, thank you so much. It works. I wrote up a full answer with one more tip to support right-click behavior. – kennethc Sep 06 '18 at 19:52
  • 1
    Looks like ag-grid have got around to fixing this: https://github.com/ag-grid/ag-grid-vue/issues/1#issuecomment-430685517. – thirtydot Oct 20 '18 at 12:30

1 Answers1

9

the approach suggested by @thirtydot works well. The only downside was the user cannot right-click, but I found you can just define href link. So when you left-click, event listener makes use of router. When you right-click and open in new tab, browser takes href link.

You still need to make your root router available. Below code sample assumes you have the code inside the vue-router-aware Vue component that consumes ag-grid, hence this.$router points to the root router.

{
    headerName: 'ID',
    field: 'id',
    cellRenderer: (params) => {
        const route = {
          name: "route-name",
          params: { id: params.value }
        };

        const link = document.createElement("a");
        link.href = this.$router.resolve(route).href;
        link.innerText = params.value;
        link.addEventListener("click", e => {
          e.preventDefault();
          this.$router.push(route);
        });
        return link;
    }
}
kennethc
  • 814
  • 1
  • 10
  • 26
  • Excellent @kennethc! Creating a link DOM element w/ an event listener within the cellRenderer illustrates a very useful pattern beyond just triggering a route. Super helpful! – ElliotPsyIT Jan 20 '19 at 19:41
  • This is a really good and easier approach to solve the problem. Using `this.router.navigateByUrl()` in Angular works for me. – Jimmy Lin May 28 '20 at 13:06