CODEWITHSUNDEEP
javascriptkendo-uikendo-grid
Abolfazl
Abolfazl

Reputation: 1690

Why Kendo datasource functions is not called?

I am trying to bind returned data from datasource to grid but the problem is that non of my data source functions is called...

transactionHistoryGridDS: new kendo.data.DataSource({
    error: function () {
        alert("erroe")
    },
    complete: function () {
        alert("completed")
    },
    success: function () {
        alert("success");
    },
    transport: {
        read: {
            dataType: "json",
            type: 'POST',
            url: args.TransactionHistoryUrl,
            data: {
                id: function () {return vm.transactionHistoryParams.id },
                originBranch: function () {return vm.transactionHistoryParams.originBranch },
                take: function () {return vm.transactionHistoryParams.take },
                skip: function () {return vm.transactionHistoryParams.skip }
            }
        },
        schema: {
            parse: function (data) {
                alert("hey...")
                return data;
            },
            data: "data",
            total: "total",
        },
        pageSize: 20,
        serverPaging: false
    }
}),

When i call read datasource through below code

 vm.transactionHistoryGridDS.read();

Ajax request is called and data successfully returned from the server,but non of the functions including success and error and complete and parse is called and consequently, data is not bind to the grid.

Upvotes: 0

Views: 1036

Answers (1)

dev_in_progress
dev_in_progress

Reputation: 2494

I can see some bugs that need to be fixed before your grid will work.

First of all, schema, pageSize, serverPaging is on wrong indent level, it should be on same level as transport not inside it.

transport: {...},
schema: {...},
serverPaging: ...,
pageSize: ...

Every grid should have dataSource property, read will be called automatically and data will be populated, you dont need to set data to grid or call read() function:

$('#grid').kendoGrid({
    dataSource: {
        transport: {
            read: {...}
        }
    }
});

In your case I assume vm is a grid so you need to set dataSource:transactionHistoryGridDS, check example links below

If you need to send data with request use parameterMap:

$('#grid').kendoGrid({
    resizable: true,
    filterable: true,
    sortable: true,
    pageable: {
        pageSize: 10,
        refresh: true,
        pageSizes: [5, 10, 20, 100, 500, 1000]
    },
    dataSource: {
        pageSize: 10,
        serverPaging: true,
        serverFiltering: true,
        transport: {
            read: {
                url: 'url',
                type: 'POST',
                dataType: 'JSON',
                contentType: 'application/json'
            },
            update: {...},
            destroy: {...},
            parameterMap(data, type) {
                switch (type) {
                    case 'read':
                        let request = {};
                        request.page = data.page - 1;
                        request.page_size = data.pageSize;
                        request.sort = data.sort;
                        request.filter = data.filter;

                        return JSON.stringify(request);
                    case 'destroy':
                        return kendo.stringify(data);
                    default:
                        break;
                }
            }
        }
    }
});

There is two way of geting data from kendo dataSource request, first one it with complete function that is called when request and response is finished. The second is promise on every dataSource request.

First example: complete call

Second example: promise call

Upvotes: 1

Related Questions