row is missing while binding to Kendo ui grid

Question

I have table called User Account. which have values as follows:

[{"Amount":17.0000,"DateOfTransaction":"/Date(1422815400000+0530)/","UserAccountId":12,"UserAccountType":"UserAward","UserPoints":150},

{"Amount":3.1700,"DateOfTransaction":"/Date(1431596225417+0530)/","UserAccountId":44,"UserAccountType":"UserOrder","UserPoints":32},

{"Amount":15.0000,"DateOfTransaction":"/Date(1432625433707+0530)/","UserAccountId":53,"UserAccountType":"UserOrder","UserPoints":150}]"

I am trying to displaying these values using Kendo UI Grid. among these, only last two rows are displaying. first row is missing which have User Account Type as "User Award".

values return from server is having three rows. but at the time of binding it is only shows last two rows.

here is my code:

$("#transactions-grid").kendoGrid({

        dataSource: {
            transport: {
                read: "/CustomerCall/GetUserTransactionsHistory/" + $('#SystemUserId').val(),               
            },            
            total: function () {

                console.log(response.data);
                return response.data.length;                
            },
            schema: {
                model: {
                    fields: {
                        UserAccountType: { type: "string" },
                        UserPoints: { type: "number" },
                        Amount: { type: "number", format: "{0:c2}" },
                        DateOfTransaction: { type: "date", format: "{0:dd-MM-yyyy}" }
                    }
                },
                errors: function (e) {                    
                    console.log(e);    
                }
            },
            pageSize: 5,
            serverPaging: false,
            serverFiltering: false,
            serverSorting: false
        },
        filterable: false,
        sortable: true,
        pageable: true,        
        detailInit: detailInit,        
        dataBound: function () {
            this.expandRow(this.tbody.find("tr.k-master-row").first());
        },
        scrollable: true,
        columns: [{
            field: "UserAccountType",
            title: "Transaction Type",
            lockable: false,
            width: 100
        }, {
            field: "UserPoints",
            title: "User Points",
            lockable: false,
            width: 80
        }, {
            field: "Amount",
            title: "Amount",
            lockable: false,
            width: 80
        }, {
            field: "DateOfTransaction",
            title: "Transaction Date",
            lockable: false,
            width: 80,
            template: "#= kendo.toString(kendo.parseDate(DateOfTransaction, 'yyyy-MM-dd'), 'dd/MM/yyyy') #"
        }, {
            template: '<button class="btn btn-sm btn-white" data-useraccountid="#=UserAccountId#">Details</button>',
            title: "Action",
            lockable: false,
            width: 55
        }],
        dataBound: function () {
            var rows = this.items();
            var index = 0;
            $(rows).each(function () {
                alert("success");
                index = index + 1;                
            });

            if (index > 0) {
                $("#filtered-transactions").show();
            }
        }
    });
});

My Controller is:

[HttpGet]

        public PartialViewResult GetUserTransactionsSummary(int id)
        { var result = _systemUserService.GetUserTransactionHistory(new BusinessObjects.Messaging.UserAccounts.GetUserTransactionHistoryRequest(id));

            var modal = _mappingService.Map<UserTransactionHistoryDto, EmployeeDetailsWithPointsVM>(result.UserTransactionHistory);

            modal.JsonUserTransactionHistory = JsonHelper.JsonSerializer<List<UserAccountVM>>(modal.UserTransactionHistory);
            return PartialView("GetUserTransactionsSummary", modal);

        }

I dont why that row only is missing. also how shall i check the error of missing row?