[Solved] No loading data on the kendoui grid using jquery

[Ivan]

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 = "[e-mail]"
                },
                new UserDto
                {
                    UserId = 2,
                    FirstName = "james",
                    LastName = "bond",
                    UserName = "jamesd",
                    Email = "[e-mail]"
                }
            };

            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":"[e-mail]","userName":"jhond"},{"userId":2,"firstName":"james","lastName":"bond","email":"[e-mail]","userName":"jamesd"}],"success":true,"errors":[],"exception":null,"total":2}

 

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

 

 

[Eyup]

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

[Ivan]

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

[Eyup]

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

[Ivan]

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":"[e-mail]","userName":"jhond"},
                        {"userId":2,"firstName":"james","lastName":"bond","email":"[e-mail]","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>

[Ivan]

Do you have any idea of what is happening?

[Eyup]

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

[Ivan]

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

 

[Ivan]

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

Regards

Ivan

[Eyup]

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