Hi,
First of all, let me congratulate you about these really nice set of controls, methods and properties !
Great work.
Now, about what brings me here is the following :
Situation :
One grid, inline row editing, server sorting, server paging
4 columns : 3 string, 1 bool
Straight forward.
$(document).ready(function(){ $("#gridStatus").kendoGrid({ dataSource: { transport: { read: "/content/reference_tables/status/json.status.list.php", update: { url: "/content/reference_tables/status/json.status.update.php", type: "POST" }, destroy: { url: "/content/reference_tables/status/json.status.delete.php", type: "POST" }, create: { url: "/content/reference_tables/status/json.status.create.php", type: "POST" } }, error: function(e) { alert(e.responseText); }, schema: { data: "data", total: "total", model: { id: "id", fields: { table_name: { type: "string", validation: { required: true} }, status_name: { type: "string", validation: { required: true} }, description: { type: "string", validation: { required: true} }, active: { type: "boolean" } } } }, pageSize: 10, serverPaging: true, serverSorting: true, sort: { field: "table_name", dir: "asc" } }, sortable: { mode: "single", allowUnsort: false }, pageable: true, editable: "inline", toolbar: ["create"], columns: [{ field: "table_name", title: "Table", width: "25%" }, { field: "status_name", title: "Name", width: "20%" }, { field: "description", title: "Description", width: "35%" }, { field: "active", title: "Active", width: "100px", template: "<div align=center>#= active #</div>" }, { command: ["edit", "destroy"], title: " ", width: "210px" } ] });});
Working situation :
All string columns are edited as a textbox. Works fine, row is updated, .. nice and smooth as designed.
In fireBug, on updating, I see that the update PHP page is called as it has to be.
Not working :
But the issue happens when I turn the first row editing is a drop down list
(...)
columns: [{ field: "table_name", title: "Table", editor: tableNameDropDownEditor, width: "25%" }, { field: "status_name", title: "Name", width: "20%" }, { field: "description", title: "Description", width: "35%" }, { field: "active", title: "Active", width: "100px", template: "<div align=center>#= active #</div>" }, { command: ["edit", "destroy"], title: " ", width: "210px" } ]});function tableNameDropDownEditor(container, options){ $.ajax({ url: "/content/reference_tables/status/json.status.table_names.php", dataType: 'json', success: function(items) { $('<input id="idEditDropDown" data-bind="value:' + options.field + '"/>') .appendTo(container) .kendoDropDownList({ dataSource: items, dataTextField: "table_name", dataValueField: "table_name" }); $("#idEditDropDown").data('kendoDropDownList').value(options.model.table_name); }, error: function(data){ console.log('error occured loading the JSON'); } });}
This is the JSON returned by json.status.table_names.php :
(returns the list of the database table names filtered (select * except the one starting with .. bla bla and bla bla) )
[{"table_name":"audit_create"},{"table_name":"audit_visible"},{"table_name":"links"},{"table_name":"links_activity"},{"table_name":"msg_content"},{"table_name":"msg_flow"},{"table_name":"msg_status"},{"table_name":"ratings"},{"table_name":"shortlists"},{"table_name":"site_settings"},{"table_name":"users"},{"table_name":"vendor_websites"},{"table_name":"vendors"},{"table_name":"visitors"},{"table_name":"visitors_history"}]
Looks fine as the drop down populates the list.
So far so good, list is populated.
BUT .. the problem is that when I want to UPDATE the row !
As soon as I put a drop down list component, it does not update at all !
FireBug does not event show me the update PHP page called. It acts as no data has changed so it does not trigger the update process.
I am probably missing some things in the definition of the drop down ...
I tried with fixed values instead of filling it in with JSON .. but same behavior
If you please could assist a bit. It is propably a piece of cake but this starts to drive me crazy ;-)
Any help is welcome, obviously.
Wbr,
/Olivier