We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Inertia Link in Column Template - Vue3

Is it possible to use an inertia link in a column template?  I am able to modify the column with the template but when I try to p

pass the Link component it breaks.

Grid:

<ejs-grid ref='bomtable' id='bomtable' class='mt-6 flex center' width="1000" :dataSource='data'
          :toolbarClick='toolbarClick' :toolbar='toolbarOptions' :allowExcelExport='true' :groupSettings='groupOptions'
          :allowSorting="true">
          <e-aggregates>
            <e-aggregate>
              <e-columns>
                <e-column type="Sum" field="UnitWeight" format='N0'></e-column>
                <e-column type="Sum" field="ExtWeight" format='N0'></e-column>
              </e-columns>
            </e-aggregate>
          </e-aggregates>
          <e-columns>

            <e-column field='Item' headerText='Item' width="350" textAlign='LEFT' :template='colTemplate'></e-column>
            <e-column field='Grade' headerText='Grade' width="150" textAlign="left"></e-column>
            <e-column field='Qty' headerText='Qty' textAlign="Right"></e-column>
            <e-column field='UnitWeight' headerText='Weight (lbs)' textAlign="Right"></e-column>
            <e-column field='ExtWeight' headerText='Ext. Weight (lbs)' textAlign="Center"></e-column>
          </e-columns>

        </ejs-grid>


Script Section:

<script >
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import Project from '@/Components/Project.vue';
import InputError from '@/Components/InputError.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import { useForm, Head, Link } from '@inertiajs/inertia-vue3';
import { Grid, Sort, Page, Resize, Group, Aggregate, ExcelExport, Toolbar   } from '@syncfusion/ej2-vue-grids';
import { createApp } from "vue";
import { ref } from "vue";
Grid.Inject(Sort, Page, Resize, Group, Aggregate, ExcelExport, Toolbar)

const app = createApp();
var colVue = app.component("colTemplate", {
  data: () => ({}),
  template: `<Link :rel='nofollow' href="route('bom.show', data.item)" tag='button' class="mt-6 text-blue-700">{{data.Item}}</Link>`,
  components: {
    Link
  }
});

export default {
  props: ['project', 'arm_summary', 'base_summary', 'pole_summary', 'shaft_summary', 'bom'],
  components: {
    AuthenticatedLayout,
    Project,
    InputError,
    PrimaryButton,
    useForm, Sort,
    Head, Link
  },
  data () {
    return {
        arms: this.arm_summary,
        base: this.base_summary,
        pole: this.pole_summary,
        shafts: this.shaft_summary,
        groupOptions: {showDropArea: false, columns: ['Pole'] },
        toolbarOptions: ['ExcelExport'],
        data: this.bom,  
        colTemplate: function () {
        return { template: colVue };
      }, }},

    methods: {
      dataBound: function() {
        this.$refs.grid.autoFitColumns();
      },
      toolbarClick: function(args) {
          if (args.item.id === 'bomtable_excelexport') {  
            var name = "BOM - " + this.project.plsname  + ".xlsx"
            var exportProperties = {
                fileName: name,          
             };
              this.$refs.bomtable.excelExport(exportProperties);
          }
      }
  },
  provide: {
      grid: [Sort, Page, Resize, Group, Aggregate, ExcelExport, Toolbar ]
  },

}

Errors
Screenshot 2022-10-26 142318.jpg

4 Replies

RS Rajapandiyan Settu Syncfusion Team October 27, 2022 01:40 PM UTC

Hi Hank,


Thanks for contacting Syncfusion support.


We have prepared a simple sample for requirement, you can get it from the below link. In which we have maintained the columnTemplate element in separate Vue file.


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue3_columntemplate-85916825.zip


 

[App.Vue]

<template>

  <div id="app">

    <ejs-grid :dataSource='data' :allowPaging="true" :actionFailure="actionFailure">

      <e-columns>

          ----

          <e-column headerText='Employee Details' width='150' textAlign='Center' :template="colTemplate"></e-column>

      </e-columns>

    </ejs-grid>

  </div>

</template>

 

<script>

import columnTemplate1 from "./ColumnTemp.vue";

 

import { createApp } from "vue";

const app = createApp();

// Template declaration

var colVue = app.component("colTemplate", columnTemplate1);

 

export default {

  name: 'App',

  data() {

    return {

      data:  data,

        colTemplate: function () {

          return { template: colVue};

        },

      };

  },

};

</script>

 

 

[ColumnTemp.Vue]

// render your custom component here
<template>

  <ejs-button> {{data.OrderID}} - {{data.CustomerID}}

  </ejs-button>

</template>

<script>

  import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";

export default {

  name: "columnTemplate1",

  components: {

    "ejs-button": ButtonComponent

  },

  data() {

    return {

    };

  },

};

</script>


Please get back to us if you need further assistance.


Regards,

Rajapandiyan S



HA hank October 28, 2022 02:22 PM UTC

Thanks for your reply.  Am I to put the inertia link in the new component?


With this solution, wouldn't I have to load a new component for every row?  So if I have 100 rows its loading that component 100 times?


All I'm trying to accomplish is to be able to have a grid of products and when I click on the product name it takes me to a new page with the product details.



SG Suganya Gopinath Syncfusion Team November 1, 2022 04:47 AM UTC

Hi Rajapandiyan,

Please update the customer ASAP.



RS Rajapandiyan Settu Syncfusion Team November 1, 2022 01:43 PM UTC

Hi Hank,


Query #1: Am I to put the inertia link in the new component? With this solution, wouldn't I have to load a new component for every row?  So if I have 100 rows its loading that component 100 times?

You can define the custom component in a separate folder. By using the following code you can render your custom component in the Grid through the columnTemplate feature. It will render the custom component on each row of the Grid.



[App.vue]

<script>

import colTemp from "./ColumnTemp.vue";

 

import { createApp } from "vue";

const app = createApp();

 

// Template declaration

var colVue = app.component("colTemplate", colTemp);

 

export default {

  data() {

    return {

       colTemplate: function () {

          return { template: colVue};

        },

     };

  },

};

</script>

 


Query #2: All I'm trying to accomplish is to be able to have a grid of products and when I click on the product name it takes me to a new page with the product details.

By using the following code, you can get the current row details in the column template.



[ColumnTemp.Vue]

<template>

  <div>

  <button v-on:click="btnClick">{{data.CustomerID}}</button>

  <a :rel='nofollow' href="UrlLink">{{data.Doc}}</a>

  </div>

</template>

<script>

export default {

  name: "colTemp",

  data() {

    return {

    };

  },

  computed: {

    UrlLink: function() {

      return “https://ej2.syncfusion.com/vue/documentation/” + this.data.Doc;

    },

  },

  methods:{

    btnClick: function(args){

      console.log(this.data); // get the row details

    }

  }

};

</script>


Please get back to us if you need further assistance.


Regards,

Rajapandiyan S


Loader.
Live Chat Icon For mobile
Up arrow icon