Hello,
We're currently evaluating Kendo UI and we've jumped on a strange issue. When using fields with dropdown widgets, the grid sends a not serialized JavasSript object, which basically the string "[object Object]". I've tried to serialize this data by myself, using `parameterMap(options)`, but even there the values were already two "[object Object]" string. Checkout the screenshot I've attached.
I've created a static example in order to present you the issue more easily. This my data store:
I initialize the grid in an empty div
I use jQuery 1.8.3, the latest version of KendoUI Web and this is how the external resources are loaded.:
Cheers,
Kiril Vladimirov
We're currently evaluating Kendo UI and we've jumped on a strange issue. When using fields with dropdown widgets, the grid sends a not serialized JavasSript object, which basically the string "[object Object]". I've tried to serialize this data by myself, using `parameterMap(options)`, but even there the values were already two "[object Object]" string. Checkout the screenshot I've attached.
I've created a static example in order to present you the issue more easily. This my data store:
kendo.django_stores = {};kendo.django_stores.RoomTypeDataStore = new kendo.data.DataSource({ "sort": [], "serverPaging": false, "serverFiltering": false, "serverSorting": false, "pageSize": null, "transport": { "read": { "dataType": "json", "type": "GET" }, "destroy": { "dataType": "json", "type": "POST" }, "create": { "dataType": "json", "type": "POST" }, "update": { "dataType": "json", "type": "POST" } }, "schema": { "type": "json", "model": { "fields": { "capacity": { "nullable": false, "defaultValue": 0, "editable": true, "values": [], "validation": { "required": true }, "type": "number" }, "name": { "nullable": false, "defaultValue": null, "editable": true, "values": [ { "text": "Single room", "value": "single" }, { "text": "Double room", "value": "double" } ], "validation": { "required": true }, "type": "string" }, "hotel": { "nullable": false, "defaultValue": null, "editable": true, "values": [], "validation": { "required": true }, "type": "string" }, "pk": { "editable": false, "nullable": true }, "breakfast": { "nullable": false, "defaultValue": null, "editable": true, "values": [ { "text": "With breakfast", "value": "breakfast" }, { "text": "With continential breakfast", "value": "continential" }, { "text": "With buffet breakfast", "value": "buffet" }, { "text": "With English breakfast", "value": "English" }, { "text": "Without breakfast", "value": "without" } ], "validation": { "required": true }, "type": "string" }, "id": { "nullable": false, "defaultValue": null, "editable": true, "values": [], "validation": { "required": false }, "type": "string" } }, "id": "pk" }, "total": "total", "data": "results" }});<div id="rooms_grid"></div>$(document).ready(function() { var RoomTypeDataStore = kendo.django_stores.RoomTypeDataStore; var fields = RoomTypeDataStore.options.schema.model.fields; $('#rooms_grid').kendoGrid({ dataSource: RoomTypeDataStore, height: 800, sortable: true, scrollable: true, editable: 'popup', destroyable: true, toolbar: ["create"], columns: [ {field: "name", title: "Name", values: fields.name.values}, {field: "capacity", title: "Capacity", format: "{0:n0}"}, {field: "breakfast", title: "Breakfast", values: fields.breakfast.values}, {command: ["edit", "destroy"]} ] });});<link href="./static/styles/kendo.common.min.css" rel="stylesheet" type="text/css"><link href="./static/styles/kendo.default.min.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="./static/js/jquery.js" charset="utf-8"></script><script type="text/javascript" src="./static/js/kendo.web.min.js" charset="utf-8"></script>Kiril Vladimirov
5 Answers, 1 is accepted
0
Brett
Top achievements
Rank 2
Rank 2
answered on 17 Jan 2013, 07:27 PM
Here's the thing...Kendo expects the fields in your DataSource to be scalar types, like number, date, and string. What you are saying in your implementation is that breakfast and name are complex objects, so, it's doing exactly what you're telling it to and posting them as objects. The property values is not a valid property of a model field object (http://docs.kendoui.com/api/framework/model#modeldefine). What you want is something configured similar to this example:
Then, you declare your grid, using the above DataSource, and be sure to define the editors used for the name and breakfast fields.
kendo.django_stores.RoomTypeDataStore = new kendo.data.DataSource({ pageSize: 24, transport: { read: { dataType: "json", type: "GET" }, destroy: { dataType: "json", type: "POST" }, create: { dataType: "json", type: "POST" }, update: { dataType: "json", type: "POST" } }, schema: { model: { id: "pk", fields: { capacity: { validation: { required: true }, type: "number" }, name: { validation: { required: true } }, hotel: { validation: { required: true } }, pk: { editable: false, nullable: true }, breakfast: { validation: { required: true } }, id: { validation: { required: false } } }, names: [ { text: "Single room", value: "single" }, { text: "Double room", value: "double" } ], breakfasts: [ { text: "With breakfast", value: "breakfast" }, { text: "With continental breakfast", value: "continental" }, { text: "With buffet breakfast", value: "buffet" }, { text: "With English breakfast", value: "English" }, { text: "Without breakfast", value: "without" } ], }, total: "total", data: "results" }});$(function() { $("#rooms_grid").kendoGrid({ dataSource: kendo.django_stores.RoomTypeDataStore, height: 800, sortable: true, scrollable: true, editable: "popup", toolbar: ["create"], columns: [ { field: "name", title: "Name", editor: "<input data-role='dropdownlist' data-text-field='text' data-value-field='value' data-bind='source: names, value: name' />" }, { field: "capacity", title: "Capacity", format: "{0:n0}" }, { field: "breakfast", title: "Breakfast", editor: "<input data-role='dropdownlist' data-text-field='text' data-value-field='value' data-bind='source: breakfasts, value: breakfast' />" }, { command: ["edit", "destroy"] } ] });});0
Kiril
Top achievements
Rank 1
Rank 1
answered on 18 Jan 2013, 12:14 PM
I've tried the exact same code you proposed:
TypeError: r[e].get is not a function
/static/js/kendo.web.min.js
Line 14
If that could help, here is the error using the raw kendo.web.js:
TypeError: source[idx].get is not a function
/static/js/kendo.web.js
Line 8658
Also, I'm not sure if this should be the best way to do it, because it seems quite inconsistent. From one point of view I have this handy attribute `values` for every field and using it I receive a handy dropdown widget. It seems very unlikely that attribute to be useless if you try to send data. It would an obvious case of a bad design decision.
I've tried forcing the custom editor to use this values attribute, without any success, though. Any other ideas?
TypeError: r[e].get is not a function
/static/js/kendo.web.min.js
Line 14
If that could help, here is the error using the raw kendo.web.js:
TypeError: source[idx].get is not a function
/static/js/kendo.web.js
Line 8658
Also, I'm not sure if this should be the best way to do it, because it seems quite inconsistent. From one point of view I have this handy attribute `values` for every field and using it I receive a handy dropdown widget. It seems very unlikely that attribute to be useless if you try to send data. It would an obvious case of a bad design decision.
I've tried forcing the custom editor to use this values attribute, without any success, though. Any other ideas?
0
Brett
Top achievements
Rank 2
Rank 2
answered on 18 Jan 2013, 01:25 PM
Hmm, I think I ran into this same error before. I believe the framework is trying to "get" the text and value from the properties, but since they weren't converted to observables, they don't have the get() function. Try turning the names and breakfasts properties into ObservableArrays, like so:
... names: new kendo.data.ObservableArray([ { text: "Single room", value: "single" }, { text: "Double room", value: "double" } ]), breakfasts: new kendo.data.ObservableArray([ { text: "With breakfast", value: "breakfast" }, { text: "With continental breakfast", value: "continental" }, { text: "With buffet breakfast", value: "buffet" }, { text: "With English breakfast", value: "English" }, { text: "Without breakfast", value: "without" } ])...0
Kiril
Top achievements
Rank 1
Rank 1
answered on 18 Jan 2013, 01:45 PM
Turning them into ObservableArray did the trick, but once again - this is more of a hack than a pleasurable solution.
Why is that attribute values there in a first place if it just...does not work for anything else than example dropdown!?
Listing the possible values in the data store, but outside the field definition is obviously a bad decision, because splits definitions about a single object in two different places without any adequate reason. Not to mention how useless is that approach if the data store is being generated by a server side application (json object).
Anyone from Telerik with a pleasurable solution by the book, keeping in mind that the DataStore is just a JSON object?
P.S.: @Brett, thank you for you answers, even though they didn't give me the solution I'm searching for.
Why is that attribute values there in a first place if it just...does not work for anything else than example dropdown!?
Listing the possible values in the data store, but outside the field definition is obviously a bad decision, because splits definitions about a single object in two different places without any adequate reason. Not to mention how useless is that approach if the data store is being generated by a server side application (json object).
Anyone from Telerik with a pleasurable solution by the book, keeping in mind that the DataStore is just a JSON object?
P.S.: @Brett, thank you for you answers, even though they didn't give me the solution I'm searching for.