Grid DataSource question

[Simon]

Hello,

I'm currently trying to create a variable that will be used as a grid DataSource.  When I create a typeless variable, this is working perfectly.... however, if I cast my variable as a kendo.data.DataSource, the grid doesn't work anymore.

Here's my code:

var myDataSource = {

    schema: {

        model: {

            id: "RecordID",

            fields: {

                RecordID: { editable: false, nullable: true },

                FirstName: { editable: true },

                LastName: { editable: true }

            }

        }

    },

    type: "odata",

    serverPaging: true,

    serverSorting: true,

    pageSize: 100,

    batch: false,

    transport: {

        read: "http://localhost:1625/Data/GetPatients",

        create: { url: "http://localhost:1625/Data/Create", contentType: "application/json; charset=utf-8", type: "POST" },

        update: { url: "http://localhost:1625/Data/Update", contentType: "application/json; charset=utf-8", type: "POST" },

        destroy: { url: "http://localhost:1625/Data/Destroy", contentType: "application/json; charset=utf-8", type: "POST", dataType: "json" },

        parameterMap: function (data, operation) {

            if (operation !== "read") {

                return kendo.stringify(data);

            } else {

                return kendo.data.transports["odata"].parameterMap(data, operation);

            }

        }

 

    }

 

 

};

 

var myDataSource2 = new kendo.data.DataSource({

    schema: {

        model: {

            id: "RecordID",

            fields: {

                RecordID: { editable: false, nullable: true },

                FirstName: { editable: true },

                LastName: { editable: true }

            }

        }

    },

    type: "odata",

    serverPaging: true,

    serverSorting: true,

    pageSize: 100,

    batch: false,

    transport: {

        read: "http://localhost:1625/Data/GetPatients",

        create: { url: "http://localhost:1625/Data/Create", contentType: "application/json; charset=utf-8", type: "POST" },

        update: { url: "http://localhost:1625/Data/Update", contentType: "application/json; charset=utf-8", type: "POST" },

        destroy: { url: "http://localhost:1625/Data/Destroy", contentType: "application/json; charset=utf-8", type: "POST", dataType: "json" },

        parameterMap: function (data, operation) {

            if (operation !== "read") {

                return kendo.stringify(data);

            } else {

                return kendo.data.transports["odata"].parameterMap(data, operation);

            }

        }

 

    }

 

 

});

 

$(document).ready(function () {

    $("#grid").kendoGrid({

        dataSource: myDataSource, //This is working but if you change it to myDataSource2, then it doesn't work

        height: 500,

        scrollable: {

            virtual: true

        },

        editable: true,

        sortable: true,

        toolbar: ["create", "save"],

        columns: ["RecordID", "FirstName", "LastName", { command: "destroy"}]

    });

});

As mentionned in the code, myDataSource is working but not myDataSource2.

Am I missing something here?

Best regards,

Simon

[Alexander Valchev]

Hello Simon,

Your code snippet looks OK. I tried to reproduce your case, but to no avail.
Could you please check the screen cast and the test page that I used and let me know if I missed something?

Greetings,
Alexander Valchev
the Telerik team

[Simon]

Hello Alexander,

Yes, the code snipped was suppose to be working working...

You had to change myDataSource to myDataSource2 to see the problem

Here's the "not working" code snippet (Maybe I forgot to include a .js file???)

var myDataSource2 = new kendo.data.DataSource({

  

    schema: {

  

        model: {

  

            id: "RecordID",

  

            fields: {

  

                RecordID: { editable: false, nullable: true },

  

                FirstName: { editable: true },

  

                LastName: { editable: true }

  

            }

  

        }

  

    },

  

    type: "odata",

  

    serverPaging: true,

  

    serverSorting: true,

  

    pageSize: 100,

  

    batch: false,

  

    transport: {

  

        read: "http://localhost:1625/Data/GetPatients",

  

        create: { url: "http://localhost:1625/Data/Create", contentType: "application/json; charset=utf-8", type: "POST" },

  

        update: { url: "http://localhost:1625/Data/Update", contentType: "application/json; charset=utf-8", type: "POST" },

  

        destroy: { url: "http://localhost:1625/Data/Destroy", contentType: "application/json; charset=utf-8", type: "POST", dataType: "json" },

  

        parameterMap: function (data, operation) {

  

            if (operation !== "read") {

  

                return kendo.stringify(data);

  

            } else {

  

                return kendo.data.transports["odata"].parameterMap(data, operation);

  

            }

  

        }

  

  

  

    }

  

  

  

  

  

});

  

  

  

$(document).ready(function () {

  

    $("#grid").kendoGrid({

  

        dataSource: myDataSource2,

  

        height: 500,

  

        scrollable: {

  

            virtual: true

  

        },

  

        editable: true,

  

        sortable: true,

  

        toolbar: ["create", "save"],

  

        columns: ["RecordID", "FirstName", "LastName", { command: "destroy"}]

  

    });

  

});

[Alexander Valchev]

Hi Simon,

Did you checked the example and the screen cast from my previous reply?
I am afraid I cannot run your code, because I have no access to the service in use. But I tested both cases - with a dataSource defined as plain object and with the one defined as new kendo.data.DataSource().

Did you received any errors in the JavaScript console? Maybe you could modify my jsFiddle example and demonstrate what I am missing?

Regards,
Alexander Valchev
the Telerik team

[Simon]

My fault...

I'll change my code to match yours and I'll try to see if it's working.

Meanwhile, can you tell me which js libraries are include in your example?

[Alexander Valchev]

Hi Simon,

In my example I included jQuery v1.7.1 and the latest official release of KendoUI (2012.1.322).
For more information about script dependencies please check this help topic - it explains in details which JavaScript files are required by each widget.

All the best,
Alexander Valchev
the Telerik team

[Simon]

Hello Alexander,

I created a sample application starting from your code snippet and everything is working on my side.  After a couple of tests, I realized the problem with my code was outside the code snippet I posted earlier.

For some reason, I included 3 libraries that are not needed and it this is what caused the problem:

<script src="/js/kendo.core.min.js" type="text/javascript"></script>

<script src="/js/kendo.data.min.js" type="text/javascript"></script>

<script src="/js/kendo.data.odata.min.js" type="text/javascript"></script>

Commenting thoses solved my problem.

Thanks!

Simon