How can i add auto row number to grid?

1 Answer 808 Views
Davood
Top achievements
Rank 1
Davood asked on 27 Nov 2018, 07:52 PM
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>

1 Answer, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 29 Nov 2018, 01:49 PM
Hello Davood,

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



Regards,
Viktor Tachev
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Davood
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Share this question
or