Row Number

[William Morgenweck]

How do I add a column with the row number?  I believe it can be done but it is very difficult to find the answer.  

Thanks

[Seeni Sakthi Kumar Seeni Raj]

Hi William,  

Thanks for contacting Syncfusion Support. 

We can achieve your requirement using the Template Column feature of the Grid. Refer to the following code example and sample.  

<template> 

    <div id="app"> 

        <ejs-grid id="Grid" ref="grid" :height="400" :dataSource="data" > 

            <e-columns> 

                <e-column headerText="Employee Image" width="150" textAlign="Center" :template="cTemplate"></e-column> 

            . . . 

               . . . 

            </e-columns> 

        </ejs-grid> 

    </div> 

</template> 

 

<script> 

import Vue from "vue"; 

import { GridPlugin } from "@syncfusion/ej2-vue-grids"; 

import { data } from "./datasource"; 

 

Vue.use(GridPlugin); 

 

export default { 

  data() { 

    return { 

      data: data, 

      cTemplate: function() { 

        return { 

          template: Vue.component("columnTemplate", { 

            template: `<span>{{data.index}}</span>`, 

            data: function(e) { 

              return { 

                data: {} 

              }; 

            } 

          }) 

        }; 

      } 

    }; 

  }, 

  provide: {}, 

  methods: {} 

}; 

</script> 

https://codesandbox.io/s/vue-template-fvmjq 

Regards, 

Seeni Sakthi Kumar S. 

[William Morgenweck]

This maybe a dumb question but how can I get the number to start at 1?  Your example starts at 0 and if I try to add 1 it acts as a string and shows up as 01,11,21  etc

[Seeni Sakthi Kumar Seeni Raj]

Hi William,  

Thanks for contacting Syncfusion Support.  

We can use the Helper functions to modify the results to the template. Refer to the following code example.  

<template> 

    <div id="app"> 

        <ejs-grid id="Grid" ref="grid" :height="400" :dataSource="data"> 

            <e-columns> 

                <e-column headerText="Employee Image" width="150" textAlign="Center" :template="cTemplate"></e-column> 

                  . . . 

                     . . .  

            </e-columns> 

        </ejs-grid> 

    </div> 

</template> 

 

<script> 

import Vue from "vue"; 

import { GridPlugin } from "@syncfusion/ej2-vue-grids"; 

import { data } from "./datasource"; 

 

Vue.use(GridPlugin); 

 

export default { 

  data() { 

    return { 

      data: data, 

      cTemplate: function() { 

        return { 

          template: Vue.component("columnTemplate", { 

            template: `<span>{{modify(data.index)}}</span>`, 

            data: function(e) { 

              return { 

                data: {} 

              }; 

            }, 

            methods: { 

              modify: function(e) { 

                return parseInt(e,0) + 1; 

              } 

            } 

          }) 

        }; 

      } 

    }; 

  }, 

  provide: {}, 

  methods: {} 

}; 

</script> 

https://codesandbox.io/s/vue-template-73h6l 

Regards,  

Seeni Sakthi Kumar S.

[Michal Sipinski]

Hello,

How to implement this solution to show column with row numbers in Composition Api in Vue 3?

Cheers!

[Joseph Christ Nithin Issack]

Hi Michal,

Thanks for your patience.

Currently, the EJ2 Vue Grid does not have complete support for Composition API. We already logged a feature request - “Need add support for Provide/Inject in Vue Custom slot” for this requirement. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. And this feature will be included in any of our upcoming releases.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.

Feedback: https://www.syncfusion.com/feedback/36677/need-add-support-for-provide-inject-in-vue-custom-slot

Regards,

Joseph I.