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

Row Number

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

5 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 1, 2019 09:59 AM UTC

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> 


Regards, 
Seeni Sakthi Kumar S. 



WM William Morgenweck August 5, 2019 03:08 AM UTC

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


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 5, 2019 11:17 AM UTC

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> 


Regards,  
Seeni Sakthi Kumar S.


MS Michal Sipinski October 13, 2022 02:58 PM UTC

Hello,


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


Cheers!



JC Joseph Christ Nithin Issack Syncfusion Team October 14, 2022 10:46 AM UTC

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.


Loader.
Live Chat Icon For mobile
Up arrow icon