BoldDeskPremium customer service software with affordable pricing: $10 for 3 agents. Try it for free.
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:
Script Section:
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] <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 <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
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.
Hi Rajapandiyan,
Please update the customer ASAP.
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.
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.
<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