Kendo UI does not call create if a function is specified

Question

Using Kendo.web.js versions 2013.2.716 and 2012.3.1315, I am trying to use a function in my transport.create rather than calling a URL. What I find is that the function does not get called. Instead a default URL is called and the resulting HTML appears to cause an error in the bowels of kendo because it is expected to be JSON instead.

I assume that this is some type of configuration error, but I can't figure out where the problem is.

Here is a snippet of the code:

    var clientListDS = new kendo.data.DataSource({
    transport: {
        read: {
            url: window.baseUrl + 'HealthCheck/ClientSummary',
            dataType: 'json',
            type: 'POST'
        },
        create: function(a,b,c) { alert('Create'); },
        createY: window.baseUrl + 'HealthCheck/DontCallMe',
        createX: {
            url: window.baseUrl + 'HealthCheck/DontCallMe',
            dataType: 'json',
            type: 'POST'
        },
        whatWeWantCreateToDo: function () {
            showChooseDialog('Some Random String', 'Select Client', OnRefreshInactiveClientList);
        },
        destroy: function () {
            alert('destroy');
        },
        update: function () {
            alert('update');
        }
    },
    autoSync: true,
    schema: {
        model: {
            id: 'ID',
            fields: {
                ID: { required: false, type: 'number', nullable: true },
                ClientName: { type: 'string' },
                ClientTag: { type: 'string' },
                Status: { type: 'string' }
            }
        }
    }
});

Then I use the resulting data source to build a grid like this:

    $('#cClientGrid').kendoGrid({
    dataSource: clientListDS,
    columns: [
        { field: 'ClientTag', title: 'Tag'},
        { field: 'ClientName', title: 'Name' },
        { field: 'Status' }
    ],
    editable: {
        mode: 'incell',
        createAt: 'bottom'
    },
    edit: function (pEvent) {
        if (pEvent.model.isNew())
            alert('create');
        else
            alert('Edit');
    },
    toolbar: ['create']
});

Some behavior that is worthy of note:

• You see several attempts at the create configuration. If I use CreateY or CreateX, it will call the resulting URL. If I use Create or WhatWeWantCreateToDo, I end up downloading the containing page with each element of my schema as get string items (I assume this is some type of default behavior as I can't find a reference to the URL which is downloaded).
• When I turn off autoSync, the grid will call its edit function when I use the toolbar to create a new item. When I turn on autoSync, the edit function does not get called. Instead the data source create functionality runs.

Any thoughts or insight on how I might be able to call a function instead of a URL will be appreciated.

Answer 1

First make in transport everything being an URL or a function, do not mix them up.
If you need to implement read as a function, you simply do:

transport: {
    read : function (options) {
        $.ajax({
            url: window.baseUrl + 'HealthCheck/ClientSummary',
            dataType: 'json',
            type: 'POST',
            success : function (result) {
                options.success(result);
            }
        });
    },