1. Home
  2. Forum
  3. Vue
  4. Issue printing column template component's contents from a grid

Issue printing column template component's contents from a grid

Greetings.

I've been enjoying developing my SaaS through Vue3, and was wondering if the support team could help me out with this issue - also a moment to thank the stellar ecosystem Syncfusion really is. I exhausted the documentation, but was unable to look into why printing template components didn't go too well.


Actual Issue Starts Here:


Here's the code snippet to the grid:

                <ejs-grid :dataSource="data" ref='grid'>
                    <e-columns>
                        <e-column :header-text="$t('active')" :template="'badge_active'"></e-column>
                    </e-columns>
                    <template v-slot:badge_active="{ data }"
                        :valueAccessor="function (data) { data.deleted_at ? false : true }">
                        <c-badge #badge_active="{ data }" :is_active="data.deleted_at ? false : true"></c-badge>
                    </template>
                </ejs-grid>


The test template is a very mundane one as follows:

<template>
    <CBadge :color="badgeClass" class="ms-auto">{{ badgeLabel }}</CBadge>
</template>

<script>
export default {
    props: {
        is_active: {
            type: Boolean,
            required: true,
        },
    },
    computed: {
        value: function () {
            return this.is_active;
        },
        badgeLabel: function () {
            return this.is_active ? this.$t('active') : this.$t('inactive');
        },
        badgeClass: function () {
            return this.is_active ? 'success' : 'danger';
        },
    },
    i18n: {
        messages: {
            en: {
                active: 'Active',
                inactive: 'Inactive',
            },
            np: {
                active: 'सक्रिय',
                inactive: 'निष्क्रिय',
            },
            jp: {
                active: 'アクティブ',
                inactive: '非アクティブ',
            },
        },
    },
};
</script>


The issue is, it displays perfectly in the grid itself. As follows:

Image_1971_1704975799833


However, during print, the following happens:

Image_5213_1704975867398


What I am unable to do, but wish to, is to get a prop/computed value passed to the print function, so it prints the actual content/string rendered by the template, than the component name.


How should I go about achieving so? Is there any sort of Accessor(I tried using the dataAccessor without avail), or something similar so print output is formatted correctly?


1 Reply
VK Vasanthakumar K Syncfusion Team January 16, 2024 05:42 PM UTC

Hi Nobel Dahal,


Greetings from Syncfusion Support.


We validated the query. Based on your query, we understood that you are trying to print the v-slot template column. You can achieve the v-slot template column printing by using the grid's beforePrint event args customization. Based on your query, we have prepared a simple Vue3 slot column template printing sample with the customization. You can refer to that sample to achieve the same at your application level.


[code example]

<template>

    <ejs-grid ref='grid' id='grid' :beforePrint="beforePrint">

        . . . . . . . .

        . . . . . . . .

    </ejs-grid>

</template>

<script>

export default {

   methods: {

    beforePrint: function (args) {

      if (args.requestType == "print") {

        var elemArr = args.element.querySelectorAll('table tbody')[1].querySelectorAll('tr');

        var gridRows = this.$refs.grid.getRows();

        for (var i = 0; i < elemArr.length; i++) {

          elemArr[i].innerHTML = '';

          elemArr[i].innerHTML = gridRows[i].innerHTML;

        }

      }

    }

  },

}


Sample Link: forums/186215-print-column-template - StackBlitz


Please get back to us if you need further assistance with this. 


Regards,

Vasanthakumar K


Loader.
Up arrow icon