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

Kendo UI with WebAPI and MVC Wrapper

12 Answers 290 Views

General Discussions

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

apostolis asked on 06 May 2013, 01:24 PM

<section id="maincontent">

<div class="container">

@(Html.Kendo().Grid<Person>()

.Name("Grid")

.Columns(columns =>

{

columns.Bound(s => s.PersonID);

columns.Bound(s => s.FirstName);

columns.Bound(s => s.Surname);

columns.Bound(s => s.IsEmployed);

columns.Command(c =>

{

c.Edit();

c.Destroy();

});

})

.ToolBar(tools =>

{

tools.Create();

})

.Sortable()

.Pageable()

.Filterable()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(s => s.PersonID);

})

.Read(read => read.Url("api/Person").Type(HttpVerbs.Get))

.Create(create => create.Url("api/Person").Type(HttpVerbs.Post))

.Update(update => update.Url("api/Person").Type(HttpVerbs.Put))

.Destroy(destroy => destroy.Url("api/Person").Type(HttpVerbs.Delete))

)

</div>

</section>

<script>

$(function() {

var grid = $("#Grid").data("kendoGrid");

// WebAPI needs the ID of the entity to be part of the URL e.g. PUT /api/Person/PutPerson/80

grid.dataSource.transport.options.update.url = function(data) {

return "api/Person/PutPerson/" + data.personID;

};

// WebAPI needs the ID of the entity to be part of the URL e.g. DELETE /api/Person/DeletePerson/80

grid.dataSource.transport.options.destroy.url = function(data) {

return "api/Person/DeletePerson/" + data.personID;

};

});

</script>

Hi,
I'm trying to accomplish following Task as this example shows :

Binding to a Web ApiController
http://www.kendoui.com/code-library/mvc/grid/binding-to-a-web-apicontroller.aspx

The problem is that without giving any error the DataGrid simply doesn't show/Bind the data. When checking the Traffic and the data which is retrieved everything looks fine.

Any ideas?
thanks in advance

, here the return json data:

....

[{"personID":"3123","firstName":"231","surname":"312321","isEmployed":null},{"personID":"999","firstName":"The","surname":"Best Employee","isEmployed":"Master"},{"personID":"P001","firstName":"XXX","surname":"XXX","isEmployed":null},{"personID":"P002","firstName":"XXX","surname":"XXX","isEmployed":null},{"personID":"P003","firstName":"XXX","surname":"XXX","isEmployed":null},{"personID":"P004","firstName":"XXX","surname":"XXX","isEmployed":null},{"personID":"P005","firstName":"XXX","surname":"XXX","isEmployed":null},{"personID":"P006","firstName":"XXX","surname":"XXX","isEmployed":null},{"personID":"P007","firstName":"XXX","surname":"XXX","isEmployed":null},{"personID":"P008","firstName":"XXX","surname":"XXX","isEmployed":null}]

....

and here my View:

and here my ApiController:

namespace KiScope.RemoteClient.WebAPI.Controllers.Apis

{

// Specify on Controller level that the user has to authorize before he can start

// The actual implementation of the Redirect to Login functionality has to be done on the client side

// here is a video explaining this: http://www.asp.net/web-api/videos/getting-started/authorization

//[Authorize]

public class PersonController : ApiController

{

// Remember that the UOW disposes itself after usage, so no need to handle this manually

private readonly IRemoteClientUoW uow;

// Ninject Initialization

public PersonController(IRemoteClientUoW _uow)

{

uow = _uow;

}

public DataSourceResult GetPeople([ModelBinder(typeof(ModelBinders.DataSourceRequestModelBinder))] DataSourceRequest request)

{

var seaman = uow.Person.GetAll();

return seaman.ToDataSourceResult(request,s => new

{

s.PersonID,

s.FirstName,

s.Surname,

s.IsEmployed

}

);

}

// ... MORE CODE

12 Answers, 1 is accepted

Accepted

answered on 10 May 2013, 03:01 PM

Hi,

I changed the casing in GlobalConfig.cs:

json.SerializerSettings.ContractResolver =
new CamelCasePropertyNamesContractResolver();

this was giving an issue since the json was expected like this (Solution from Atanas korchev):

{"data":[{"personID":"1","firstName":"Apostolis","surname":"Papaioannou","isEmployed":true},{"personID":"2","firstName":"Mr.","surname":"Perfect","isEmployed":true}],"total":2,"aggregateResults":null,"errors":null}

whereas the grid expects (notice the case):

{"Data":[{"personID":"1","firstName":"Apostolis","surname":"Papaioannou","isEmployed":true},{"personID":"2","firstName":"Mr.","surname":"Perfect","isEmployed":true}],"Total":2,"AggregateResults":null,"Errors":null}

After removing this line it works!

Wow many thanks !

Regards,
Apostolis