When binding Kendo UI Grid to odata data source implemented by .NET
EntityDataSetController, I find out the creating function did not work
well: The creation of record is successfully at the back end but the
Kendo grid does not update the record id returned from creation call.
Here is the code for CreateEntity() function:
[HttpPost]
protected override SupplierEntity CreateEntity(SupplierEntity se)
{
Supplier supplier = new Supplier()
{
SupplierCode = se.SupplierCode,
SupplierName = se.SupplierName,
SupplierAddress = se.SupplierAddress,
SupplierCountry = se.SupplierCountry,
ModifiedOn = DateTime.Now
};
db.Suppliers.AddObject(supplier);
db.SaveChanges();
se.SupplierID = supplier.SupplierID;
return se;
}
Here is the data source definition in front end:
var supplierModel = {
id: "SupplierID",
fields: {
SupplierID: {
editable: false,
type: "number",
nullable: false
},
SupplierCode: {
type: "string",
validation: {
required: true
},
defaultValue: ""
},
SupplierName: {
type: "string",
defaultValue: ""
},
SupplierAddress: {
type: "string",
defaultValue: ""
},
SupplierCountry: {
type: "number",
validation: {
required: true
}
}
}
};
var gridDataSource = new kendo.data.DataSource({
type: "odata",
schema: {
model: supplierModel,
data: function (data) {
return data["value"];
}, total: function (data) {
return data['odata.count'];
}
},
serverFiltering: true,
serverPaging: true,
serverSorting: true,
pageSize: 50,
transport: {
read: {
url: "/odata/Suppliers",
dataType: "json"
},
create: {
url: "/odata/Suppliers",
type: "POST",
dataType: "json"
},
update: {
url: function (data) {
return "/odata/Suppliers(" + data.SupplierID + ")";
},
type: "PUT",
dataType: "json"
},
destroy: {
url: function (data) {
return "/odata/Suppliers(" + data.SupplierID + ")";
},
type: "DELETE",
dataType: "json"
}
}
});
The issue is the data source schema data definition (the text above in red). According the documentation about data source in Kendo UI: The data is the array of data items which the data source contains. The data source will wrap those items as kendo.data.ObservableObject or kendo.data.Model (if schema.model is set). When I checked the return from CreateEntity method, it just returned a single entity. In order to convert the single entity to array of entity, I changed the data definition (the text above in red) into following:
data: function (data) {
if (!data["value"]) {
data["value"] = [{}];
for (var field in this.model.fields)
data["value"][0][field] = data[field];
}
return data["value"];
},
After that, the creation function of Kendo grid works as expected.
Here is the code for CreateEntity() function:
[HttpPost]
protected override SupplierEntity CreateEntity(SupplierEntity se)
{
Supplier supplier = new Supplier()
{
SupplierCode = se.SupplierCode,
SupplierName = se.SupplierName,
SupplierAddress = se.SupplierAddress,
SupplierCountry = se.SupplierCountry,
ModifiedOn = DateTime.Now
};
db.Suppliers.AddObject(supplier);
db.SaveChanges();
se.SupplierID = supplier.SupplierID;
return se;
}
Here is the data source definition in front end:
var supplierModel = {
id: "SupplierID",
fields: {
SupplierID: {
editable: false,
type: "number",
nullable: false
},
SupplierCode: {
type: "string",
validation: {
required: true
},
defaultValue: ""
},
SupplierName: {
type: "string",
defaultValue: ""
},
SupplierAddress: {
type: "string",
defaultValue: ""
},
SupplierCountry: {
type: "number",
validation: {
required: true
}
}
}
};
var gridDataSource = new kendo.data.DataSource({
type: "odata",
schema: {
model: supplierModel,
data: function (data) {
return data["value"];
}, total: function (data) {
return data['odata.count'];
}
},
serverFiltering: true,
serverPaging: true,
serverSorting: true,
pageSize: 50,
transport: {
read: {
url: "/odata/Suppliers",
dataType: "json"
},
create: {
url: "/odata/Suppliers",
type: "POST",
dataType: "json"
},
update: {
url: function (data) {
return "/odata/Suppliers(" + data.SupplierID + ")";
},
type: "PUT",
dataType: "json"
},
destroy: {
url: function (data) {
return "/odata/Suppliers(" + data.SupplierID + ")";
},
type: "DELETE",
dataType: "json"
}
}
});
The issue is the data source schema data definition (the text above in red). According the documentation about data source in Kendo UI: The data is the array of data items which the data source contains. The data source will wrap those items as kendo.data.ObservableObject or kendo.data.Model (if schema.model is set). When I checked the return from CreateEntity method, it just returned a single entity. In order to convert the single entity to array of entity, I changed the data definition (the text above in red) into following:
data: function (data) {
if (!data["value"]) {
data["value"] = [{}];
for (var field in this.model.fields)
data["value"][0][field] = data[field];
}
return data["value"];
},
After that, the creation function of Kendo grid works as expected.
Comments