Kendo UI with WebAPI and MVC Wrapper

13 posts, 1 answers
  1. apostolis
    apostolis avatar
    3 posts
    Member since:
    Jun 2007

    Posted 06 May 2013 Link to this post

    <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
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 06 May 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. apostolis
    apostolis avatar
    3 posts
    Member since:
    Jun 2007

    Posted 06 May 2013 Link to this post

    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
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 07 May 2013 Link to this post

    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!
  6. apostolis
    apostolis avatar
    3 posts
    Member since:
    Jun 2007

    Posted 07 May 2013 Link to this post

    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
  7. apostolis
    apostolis avatar
    3 posts
    Member since:
    Jun 2007

    Posted 08 May 2013 Link to this post

    Hi,

    pleas find attached the requested Test Project file 1.

    Regards,
    Apostolis
  8. apostolis
    apostolis avatar
    3 posts
    Member since:
    Jun 2007

    Posted 08 May 2013 Link to this post

    file 2 please rename from temp.z01.zip to temp.z01
  9. apostolis
    apostolis avatar
    3 posts
    Member since:
    Jun 2007

    Posted 08 May 2013 Link to this post

    file 2 please rename from temp.z02.zip to temp.z02
  10. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 08 May 2013 Link to this post

    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!
  11. apostolis
    apostolis avatar
    3 posts
    Member since:
    Jun 2007

    Posted 08 May 2013 Link to this post

    Hi,

    I've just submitted the Support Ticket:

    Your ticket ID is: 691051

    Regards,
    Apostolis
  12. apostolis
    apostolis avatar
    3 posts
    Member since:
    Jun 2007

    Posted 10 May 2013 Link to this post

    Hi,

    any news on this?

    Regards,
    Apostolis 
  13. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 10 May 2013 Link to this post

    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!
  14. Answer
    apostolis
    apostolis avatar
    3 posts
    Member since:
    Jun 2007

    Posted 10 May 2013 Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready