How to add serial number column in kendo ui grid

Using MVC

<script type="text/javascript">
    var rowNumber = 0;

    function resetRowNumber(e) {
        rowNumber = 0;
    }

    function renderNumber(data) {
        return ++rowNumber;
    }

    function renderRecordNumber(data) {
        var page = parseInt($("#Grid").data("kendoGrid").dataSource.page()) - 1;
        var pagesize = $("#Grid").data("kendoGrid").dataSource.pageSize();
        return parseInt(rowNumber + (parseInt(page) * parseInt(pagesize)));
    }

</script>

@(Html.Kendo().Grid<MvcApplication1.Models.TestModels>() 
.Name("Grid") 
.Columns(columns => { 
             columns.Bound(p => p.ID); 
             columns.Bound(p => p.Name); 
             columns.Template(t => { }).Title("Row No").ClientTemplate( "#= renderNumber(data) #" ); 
             columns.Template(t => { }).Title("Record No").ClientTemplate( "#= renderRecordNumber(data) #" ); 
         }) 
.Pageable(x => x.PageSizes(new int[] { 10, 20, 30, 50 }).Refresh(true)) 
.Sortable() 
.Filterable() 
.DataSource(dataSource => dataSource.Ajax()
            .Read(read => read.Action("Grid_Read", "Home")) 
            ) 
 .Events(ev => ev.DataBound("resetRowNumber")) 
) 

Using Javascript

<div id="Grid">
</div>
<script>
    
    var rowNumber = 0;

    function resetRowNumber(e) {
        rowNumber = 0;
    }

    function renderNumber(data) {
        return ++rowNumber;
    }

    function renderRecordNumber(data) {
        var page = parseInt($("#Grid").data("kendoGrid").dataSource.page()) - 1;
        var pagesize = $("#Grid").data("kendoGrid").dataSource.pageSize();
        return parseInt(rowNumber + (parseInt(page) * parseInt(pagesize)));
    }

    $(document).ready(function () {

        $("#Grid").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
                    dataType: "jsonp"
                },
                pageSize: 10
            },
            pageable: {
                refresh: true,
                pageSizes: true
            },
            dataBound: resetRowNumber,
            columns: [
                                { field: "OrderID", title: "Order ID", width: 60 },
                                { field: "CustomerID", title: "Customer ID", width: 90 },
                                { title: "Row No", width: 90, template: "#= renderNumber(data) #" },
                                { title: "Record No", width: 90, template: "#= renderRecordNumber(data) #" }
                            ]
        });

    });
</script>