'Kendo template auto increasement

Hello I would like to know how I can use a for loop in a template to add on a number 1 onward as this is what I would get in the picture below

the rest are being call by the backend but however this S/N is just a number incensement from 1 onward

enter image description here

// Call the table to the kendogrid where we use our datasource
$("#customer-list").kendoGrid({
    dataSource: dataSource,
    height: $(window).height()-$("#customer-list").position()["top"]-180,
    selectable: "single, row",
    change: function(e) {
        console.log("change", this.dataItem(this.select()[0]));
    },
    scrollable: {
        endless: true,
    },
    columns: [{
        field: "",
        title: "S/N",
        headerAttributes: { "class": "k-text-center" },
        width: 60,
        template: `1`
    }, {
        field: "",
        title: "Profile",
        headerAttributes: { "class": "k-text-center" },
        width: 150,
        template:`
            <img class="imageinside" src='#=data.Picture#' width="100px" height="100px" onError="this.onerror=null;this.src='../../assets/images/avatar.png';" style="border-radius:50px"/>
        `
    }, {
        field: "",
        title: "Customer Name",
        template:`
            <div id="customernameid">#=data.Name#</div>                  
        `
    }],  
});

kendo-ui kendo-grid

Solution 1:^[1]

There's a solution for this in the knowledge base here, using the page() and pageSize() methods of the Data Source, as well as a counter variable.

See the code snippet for the proposed solution.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.all.min.js"></script>
</head>
<body>
  
  <div id="grid"></div>
    <script>
      var record = 0;

      $("#grid").kendoGrid({
        dataSource: {
          type: "odata",
          transport: {
            read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
          },
          pageSize: 20

        },
        sortable: true,
        columns: [
          {
            title: "#",
            template: "#= ++record #",
            width: 50
          }, {
            field: "ContactName", title: "Contact Name"
          }, {
            field: "CompanyName",
            title: "Company Name"
          }, {
            field: "Country",
            width: 150
          }
        ],
        pageable: true,
        dataBinding: function() {
          record = (this.dataSource.page() -1) * this.dataSource.pageSize();
        }
      });
    </script>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Shai

'Kendo template auto increasement

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]