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

Kendo UI with WebAPI and MVC Wrapper

12 Answers 248 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
apostolis
Top achievements
Rank 1
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

Sort by
0
Atanas Korchev
Telerik team
answered on 06 May 2013, 02:21 PM
Hello,

 The response which is returned isn't what the Kendo UI Grid expects. Can you confirm that the GetPeople method is actually being hit? You can check this with the debugger.

Regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
apostolis
Top achievements
Rank 1
answered on 06 May 2013, 03:40 PM
Hello,

yes certainly, I can debug the method also the Unit of Work function returns my data as json. It is 100% hitting the breakpoint.

The DataSourceResult was also used in the example I've found from your Team.

Regards and thanks in advance,
Apostolis
0
Atanas Korchev
Telerik team
answered on 07 May 2013, 07:25 AM
Hi,

 Unfortunately we are out of ideas what may be causing it. Your code looks correct however for some reason the response is a plain JavaScript array where it should be an object of the type { data: [], total: 42 }.

 Does the code library project work as expected for you? Is there a chance to send us your project so we can troubleshoot it?

Regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
apostolis
Top achievements
Rank 1
answered on 07 May 2013, 07:30 AM
Hi,

the json data which is returned looks like you described, I just copied it as string as an example.  Since the project is somehow huge I will try to prepare something "light" and send to you, can I have your email address so I don't post it on the Forum?

Thanks and regards,
Apostolis
0
apostolis
Top achievements
Rank 1
answered on 08 May 2013, 11:14 AM
Hi,

pleas find attached the requested Test Project file 1.

Regards,
Apostolis
0
apostolis
Top achievements
Rank 1
answered on 08 May 2013, 11:16 AM
file 2 please rename from temp.z01.zip to temp.z01
0
apostolis
Top achievements
Rank 1
answered on 08 May 2013, 11:17 AM
file 2 please rename from temp.z02.zip to temp.z02
0
Atanas Korchev
Telerik team
answered on 08 May 2013, 01:33 PM
Hello,

 Unfortunately I cannot open the archive even after renaming the files. Windows explorer just says
"The same volume can not be used as both the source and destination". 

  I recommend opening a support ticket and attaching your project there.

Kind regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
apostolis
Top achievements
Rank 1
answered on 08 May 2013, 01:41 PM
Hi,

I've just submitted the Support Ticket:

Your ticket ID is: 691051

Regards,
Apostolis
0
apostolis
Top achievements
Rank 1
answered on 10 May 2013, 09:21 AM
Hi,

any news on this?

Regards,
Apostolis 
0
Atanas Korchev
Telerik team
answered on 10 May 2013, 10:21 AM
Hello,

 We replied some time ago to your support ticket. The project you sent doesn't include the code required to use Kendo UI for ASP.NET MVC with WebAPI (included in the code library linked in your original post).

Greetings,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Accepted
apostolis
Top achievements
Rank 1
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
Tags
General Discussions
Asked by
apostolis
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
apostolis
Top achievements
Rank 1
Share this question
or