This is a migrated thread and some comments may be shown as answers.

Struggle with CREATE, UPDATE and DESTROY

4 Answers 172 Views

Data Source

This is a migrated thread and some comments may be shown as answers.

Jack asked on 23 Sep 2011, 12:43 PM

I am trying to build a prototype consuming WebAPI services from KendoUI datasource based on the ContactManager sample which you can fin at:
http://wcf.codeplex.com/wikipage?title=Getting%20started%3a%20Adding%20support%20for%20getting%20a%20single%20resource%20and%20supporting%20POST%2c%20PUT%20and%20DELETE%20methods

Getting a dataSource and a bound grid populated with contacts is extremely easy based on the dpocumentatin on the Kendo web site bur I Struggle to add CREATE, UPDATE and DESTROY operations.

The approach I have taken is:
1) add create, update and destroy to the tranport array in the datasource definition
2) wire the click event of buttons to dataSource.create(), dataSource.update() and dataSource.destroy()

According to VS intellisense, dataSource.create() requires tow arguments named a and b. A quick look in the sources gives id and values which are passed to modelSet.create which calls model.set. Apparently, index is not required and in this case it assumes data.length. model.set takes two parameters fields and values. Whatwever the format I try for values, it does not seem to work.

Note that each contact has two properties, a ContactId set by the server InMemoryRepository and a Name.

Any clues?

01.<script type="text/javascript">

02. $(document).ready(function () {

03. // create a template using the above definition

04. var template = kendo.template($("#template").html());

05.

06. var dataSource = new kendo.data.DataSource({

07. transport: {

08. read: {

09. // the remote service url

10. url: "/api/contacts",

11. dataType: "json"

12. // additional parameters sent to the remote service

13. //,data: { $top: "4", $orderby: "Name" }

14. },

15. create: {

16. // the remote service url

17. url: "/api/contacts",

18. dataType: "json"

19. }

20. },

21. // subscribe to the CHANGE event of the data source

22. change: function () {

23. $("#contacts tbody").html(kendo.render(template, this.view())); // populate the table

24. }

25. });

26.

27.

28. $('#add').click(function () {

29. dataSource.create({Name: "hello"});

30. });

31.

32.

33. // read data

34. dataSource.read();

35.

36. //debugger;

37. });

38.</script>

Struggle with CREATE, UPDATE and DESTROY

4 Answers, 1 is accepted