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

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

3 Replies

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

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 4, 2019 07:08 PM

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 03:17 AM

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.

Loader.
Live Chat Icon For mobile
Up arrow icon