I'm experimenting with the Kendo UI grid, data source, and AngularJS on the front end, and ASP.NET Web API on the back end. So far, everything is working well, except for a couple of issues creating new records. I have a Contact page, and on that page I have an Activities grid displaying various activities related to the contact.
My first issue is that I need to populate the contactID client-side when creating a new record. I am doing that using transport.create.data, but the contactID is always zero when sent to the server. I have worked around this by changing the case of the property to "ContactID" (capital C), so that it no longer matches the schema. This adds it to the list of parameters (so I have "ContactID" and "contactID") and Web API accepts it, but I must be doing this wrong. What is the correct way to handle it?
The second issue is that after a successful POST, the client-side row that was sent to the server is added to the grid. I got the impression that the JSON returned from the server after a successful POST is supposed to get added. It contains some properties (such as the activityID) that are populated server-side. How is this supposed to work?
Here's the data source code:
$scope.activityGridData =
function
() {
return
{
type:
"webapi"
,
transport: {
read: {
url:
"api/Activities"
},
update: {
url:
"api/Activities"
},
create: {
url:
"api/Activities"
,
data: { ContactID: $scope.contact ? $scope.contact.contactid :
""
}
},
destroy: {
url:
"api/Activities"
}
},
serverPaging:
true
,
serverFiltering:
true
,
pageSize: 20,
filter: { field:
"ContactID"
, operator:
"eq"
, value: $scope.contact ? $scope.contact.contactid : 0 },
"sort"
: [{
"field"
:
"isComplete"
,
"dir"
:
"asc"
}, {
"field"
:
"activityID"
,
"dir"
:
"desc"
}],
"schema"
: {
"data"
:
"data"
,
"total"
:
"total"
,
"errors"
:
"errors"
,
"model"
: {
"id"
:
"activityID"
,
"fields"
: {
"activityID"
: {
"type"
:
"number"
},
"contactID"
: {
"type"
:
"number"
},
"activityType"
: {
"type"
:
"number"
},
"activityTypeList"
: {
"editable"
:
false
,
"type"
:
"object"
},
"activityTypeName"
: {
"editable"
:
false
,
"type"
:
"string"
},
"description"
: {
"type"
:
"string"
},
"notes"
: {
"type"
:
"string"
},
"location"
: {
"type"
:
"string"
},
"startTime"
: {
"type"
:
"date"
,
"defaultValue"
:
null
},
"endTime"
: {
"type"
:
"date"
,
"defaultValue"
:
null
},
"isAllDay"
: {
"type"
:
"boolean"
},
"isComplete"
: {
"type"
:
"boolean"
}
}
}
}
};
};