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

No loading data on the kendoui grid using jquery

9 Answers 21 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ivan
Top achievements
Rank 1
Ivan asked on 27 Nov 2018, 10:41 PM

I am using Asp.net core on the , in my controller I have the following code

       [HttpPost]

          public IActionResult GetUsers(string search)
        {
            var result = new List<UserDto>
            {
                new UserDto
                {
                    UserId = 1,
                    FirstName = "jhon",
                    LastName = "doe",
                    UserName = "jhond",
                    Email = "jhond@AOL.com"
                },
                new UserDto
                {
                    UserId = 2,
                    FirstName = "james",
                    LastName = "bond",
                    UserName = "jamesd",
                    Email = "jamesd@gmail.com"
                }
            };

            var data = new DataSourceResult
            {
                Total = 2,
                Data = result
            };

            return Json(data);
        }

Now my DataSourceResult object looks like this

 public class DataSourceResult<T>
    {
        /// <summary>
        /// Extra data
        /// </summary>
        public object ExtraData { get; set; }

        /// <summary>
        /// Data
        /// </summary>
        public T Data { get; set; }

        public bool Success => !Errors.Any();
        /// <summary>
        /// Errors
        /// </summary>
        public List<string> Errors { get; set; } = new List<string>();
        public Exception Exception { get; set; } 
        /// <summary>
        /// Total records
        /// </summary>
        public int Total { get; set; }
    }

    public class DataSourceResult : DataSourceResult<object>
    {

    }

My   view has this code inside

  <div id="gridUserInfo"></div>

$(document).ready(() => {

 $("#gridUserInfo").kendoGrid({
            dataSource: {
                transport: {
                    read: {
                        url: "/User/GetUsers",
                        type: "POST",
                        dataType: "json",
                        data: function() {
                            var data = {
                                search: $('#search').val()
                            };
                            return data;
                        }
                    }
                },
                schema: {
                    data: "Data",
                    total: "Total",
                    errors: "Errors",
                    model: {
                        id: "userId",
                        fields: {
                            firstName: { editable: false, type: "string" },
                            lastName: { editable: false, type: "string" },
                            userName: { editable: false, type: "string" },
                            email: { editable: false, type: "string" }
                        }
                    }
                }
            },
            height: 550,
            columns: [
                {
                    field: "firstName",
                    title: "First Name"
                },
                {
                    field: "lastName",
                    title: "Last Name"
                },
                {
                    field: "userName",
                    title: "UserName"
                },
                {
                    field: "email",
                    title: "Email"
                }
            ],
            pageable: {
                pageSizes: [10, 20, 30],
                buttonCount: 5
            }
        });

}

 

After making a POST to my UserControllerI get the following json

{"extraData":null,"data":[{"userId":1,"firstName":"jhon","lastName":"doe","email":"jhond@AOL.com","userName":"jhond"},{"userId":2,"firstName":"james","lastName":"bond","email":"jamesd@gmail.com","userName":"jamesd"}],"success":true,"errors":[],"exception":null,"total":2}

 

But it is not displaying that information on the grid, What am I doing wrong?

 

 

9 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 28 Nov 2018, 10:00 AM
Hello Ivan,

Make sure that you have the following setting added to your project:
.AddJsonOptions(options =>
            options.SerializerSettings.ContractResolver = new DefaultContractResolver());

As mentioned here:
https://docs.telerik.com/aspnet-core/getting-started/getting-started

I am also sending a sample working Kendo Core web site.

I hope this will prove helpful.

Regards,
Eyup
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ivan
Top achievements
Rank 1
answered on 28 Nov 2018, 07:03 PM

Hi Eyup:
The option that you are giving me is to use the extension methods of Kendo for AspNet Core, which is not what I am doing, I am not using any Kendo html Helper, it is just jquery as you can see in my example above.

Thanks

Ivan

0
Eyup
Telerik team
answered on 29 Nov 2018, 02:45 PM
Hi Ivan,

In this case, I suggest that you open a formal support thread and send us a very basic isolated runnable version of your web site. This will enable us to reproduce the issue locally and provide more accurate and precise suggestions. 

Regards,
Eyup
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ivan
Top achievements
Rank 1
answered on 29 Nov 2018, 06:40 PM

Hi Eyup:

Lets put it on this way, the example below works with in memory data object for the datasource,as you can see is the same response that I put on the top, but when I am trying to bind the response from my REST endpoint is where I don't know how to show the grid, my intent was the code from the main question, the one below works fine if it is in memory. Thanks in advance

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Kendo UI Basic Demo</title>
 
    <link rel="stylesheet" href="./styles/kendo.common.min.css"></link>
    <link rel="stylesheet" href="./styles/kendo.default.min.css"></link>
 
    <script src="./scripts/jquery.min.js"></script>
    <script src="./scripts/kendo.all.min.js"></script>
</head>
 
<body>
    <div id="grid"></div>
 
    <script>
        $(document).ready(function(){
            var dataToBind =
            {
                "extraData":null,
                "data":[
                        {"userId":1,"firstName":"jhon","lastName":"doe","email":"jhond@AOL.com","userName":"jhond"},
                        {"userId":2,"firstName":"james","lastName":"bond","email":"jamesd@gmail.com","userName":"jamesd"}
                    ],
                "success":true,
                "errors":[],
                "exception":null,
                "total":2};
 
            debugger;
 
            $('#grid').kendoGrid({
                dataSource: dataToBind.data,
                columns: [{
                    field:"firstName",
                    title:"First Name"
                },
                {
                    field: "lastName",
                    title: "Last Name"
                },
                {
                    field: "email",
                    title: "Email"
                }
                ]
            });
        });
    </script>
</body>
 
</html>
0
Ivan
Top achievements
Rank 1
answered on 30 Nov 2018, 05:21 PM
Do you have any idea of what is happening?
0
Eyup
Telerik team
answered on 30 Nov 2018, 06:18 PM
Hi Ivan,

Do you have this endpoint data as a live URL so you can prepare a sample dojo to send to us?
https://dojo.telerik.com/IcICucIW

Regards,
Eyup
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ivan
Top achievements
Rank 1
answered on 30 Nov 2018, 07:45 PM

I don't have the endpoint published, but I am giving you the example code I did, please notice the configuration that I have on the Startup is using a  .

This is where you can download it: 

https://drive.google.com/file/d/1Y_dVxiCjeXX515phM26SkgoX-oSs1Yn_/view?usp=sharing

 

0
Ivan
Top achievements
Rank 1
answered on 03 Dec 2018, 03:31 AM

Were you able to see what was happening in my code?

Regards

Ivan

0
Eyup
Telerik team
answered on 04 Dec 2018, 03:48 PM
Hi Ivan,

You can check the reply provided in your ticket with ID: 1363842. I hope the suggestion will prove helpful in resolving the issue.

Regards,
Eyup
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Ivan
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Ivan
Top achievements
Rank 1
Share this question
or