How can i add auto row number to grid?

[Davood]

Hi, i want to add auto row number in grid, i have tested itemtemplate but it doesnot work, also in group mode i want to work row numbers!

<template>

  <div class="wrapper wrapper-content animated fadeInRight">

    <div class="k-rtl">

      <kendo-datasource

        ref="datasource1"

        :transport-read-url="'/trips'"

        :transport-read-data-type="'json'"

        :transport-parameter-map="parameterMap"

        :schema-model-id="'ID'"

        :schema-model-fields="schemaModelFields"

        :batch="false"

        :page-size="25"

      ></kendo-datasource>

      <kendo-grid

        ref="grid"

        :page="page"

        @databinding="onDataBinding"

        :height="600"

        :data-source-ref="'datasource1'"

        :editable="'inline'"

     :groupable="groupable"

      >

        <kendo-grid-column title="#" :template="itemTemplate"></kendo-grid-column>

        <kendo-grid-column field="TruckID" title="T"></kendo-grid-column>

        <kendo-grid-column field="ShovelID" title="S"></kendo-grid-column>

        <kendo-grid-column field="ShovelMeta" title="M"></kendo-grid-column>

        <kendo-grid-column field="UnloadingID" title="TT"></kendo-grid-column>

        <kendo-grid-column field="ServiceStatus" title="V"></kendo-grid-column>

        <kendo-grid-column field="DT_ExitShovel" title="E"></kendo-grid-column>

        <kendo-grid-column field="DT_ExitUnloading" title="ET"></kendo-grid-column>

      </kendo-grid>

      <script id="itemTemplate" type="text/x-kendo-template">

        <div>{{ ++record}}</div>

      </script>

    </div>

  </div>

</template>

 

<script>

const swal = require("sweetalert2");

 

export default {

  data() {

    return {

      record: 0,

      gpage: 1,

groupable: {
messages: {
empty: "تگ ها را انتخاب کنید"
}
},

      }

 },

   

 

  mounted() {},

 

  methods: {

    itemTemplate: function(e) {

      var template = kendo.template(kendo.jQuery("#itemTemplate").html());

      return template(e);

    },

    parameterMap: function(options, operation) {

      if (operation !== "read" && options.models) {

        return { models: kendo.stringify(options.models) };

      }

    },

    onDataBinding: function(ev) {

      this.record = (this.gpage - 1) * this.$refs.datasource1.pageSize;

      console.log(this.record);

    },

    onDataBound: function(ev) {

      //console.log("Grid is now bound!");

    },

    page: function(e) {

      this.gpage = e.page;

    }

  }

};

</script>

<style src="sweetalert2/dist/sweetalert2.min.css"></style>

[Viktor Tachev]

Hello Davood,

Check out the example below that illustrates how row numbers can be shown in the Grid widget;

• https://stackblitz.com/edit/5hp5kb?file=index.js

Regards,
Viktor Tachev
Progress Telerik