Grid not displaying data

8 posts, 1 answers
  1. Veer
    Veer avatar
    14 posts
    Member since:
    Jul 2011

    Posted 23 Feb 2016 Link to this post

    Hello,

    This is my first Kendo UI application. I am trying to create a simple project where it gets data from database and binds it to grid. There are about 350k records I am retrieving from the database. However, the data is not displayed/bind to the grid. I can see the data is being retrieved from database to the calling method but not sure why its unable to bind. I am not sure if its problem returning Json response or something else. Below is the code.

    @{
        ViewBag.Title = "Home Page";
    }
     
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-18 col-md-12">
                <div id="grid"></div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
     
            $(".textButton").kendoButton();
     
            $("#grid").kendoGrid({
                dataSource: {
                    type: "aspnetmvc-ajax",
                    transport: {
                        read: {
                            url: "Read"
                        }
                    },
                    schema: {
                        data: "Data",
                        model: {
                            id: "Id",
                            fields: {
                                "UserName": { type: "string" },
                                "Application": { type: "string" },
                                "Environment": { type: "string" },
                                "LoginTime": { type: "date" },
                                "IsSuccess": { type: "boolean" },
                                "IP": { type: "string" },
                                "Source": { type: "string" }
                            }
                        }
                    },
                    pageSize: 20,
                    serverPaging: true,
                    serverSorting: true,
                    serverSorting: true,
                },
                height: 550,
                filterable: true,
                sortable: true,
                pageable: true,
                columns: [{ field: "UserName",title: "User Name" },
                    { field: "Application"},
                    { field: "Environment"},
                    { field: "LoginTime", title: "Login Time" },
                    { field: "IsSuccess"},
                    { field: "IP" },
                    { field: "Source" }
                ]
            });
        });
    </script>

    public ActionResult Read([DataSourceRequest]DataSourceRequest request)
           {
               IQueryable<Login> logins = db.Logins;
     
               DataSourceResult result = logins.ToDataSourceResult(request, c => new Models.Logins
               {
                   Id = c.Id,
                   UserName = c.UserName,
                   Application = c.Application,
                   Environment = c.Environment,
                   LoginTime = c.LoginTime,
                   IsSuccess = c.IsSuccess,
                   IP = c.IP,
                   Source = c.Source
               });
     
               return Json(result);
           }

    Thanks!

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2478 posts

    Posted 24 Feb 2016 Link to this post

    Hi,

    In order for the dataSource to retrieve the data it should call the corresponding ActionMethod. Try to modify the read like below and see how it works for you. The code will call the Read Action in the Home Controller.


    transport: {
        read: {
            url: '@Url.Action("Read", "Home")'
        }
    },



    Regards,
    Viktor Tachev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Veer
    Veer avatar
    14 posts
    Member since:
    Jul 2011

    Posted 24 Feb 2016 in reply to Viktor Tachev Link to this post

    I now see the method in controller is being called. However, that data is still not displayed. Please find the screenshot of Json response attached. I am not sure if this is how it supposed to be.

    Thanks

  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2478 posts

    Posted 26 Feb 2016 Link to this post

    Hi,

    I tested the behavior with dummy data and the items are shown as expected in the grid. This is the setup I was using.


    <div id="grid2"></div>
     
    <script>
    $(document).ready(function () {
     
        $("#grid2").kendoGrid({
            dataSource: {
                type: "aspnetmvc-ajax",
                transport: {
                    read: {
                        url: '@Url.Action("Read"  /*Action*/, "Home" /* Controller */)'
                    }
                },
                schema: {
                    data: "Data",
                    model: {
                        id: "ProductID",
                        fields: {
                            "ProductID": { type: "string" },
                            "ProductName": { type: "string" }
                        }
                    }
                },
                pageSize: 20,
                serverPaging: true,
                serverSorting: true,
                serverSorting: true,
            },
            height: 550,
            filterable: true,
            sortable: true,
            pageable: true,
            columns: [{ field: "ProductID", title: "User Name" },
                { field: "ProductName" }
            ]
        });
    });
    </script>

    public ActionResult Read([DataSourceRequest]DataSourceRequest request)
    {
     
        return Json(GetProducts().ToDataSourceResult(request));
     
     
    }
     
    private static IEnumerable<ProductViewModel> GetProducts()
    {
     
        List<ProductViewModel> collection = new List<ProductViewModel>();
     
        for (int i = 0; i < 100; i++)
        {
            collection.Add(new ProductViewModel()
            {
                ProductID = i,
                Discontinued = true,
                ProductName = "ProductName" + i.ToString(),
                UnitsOnOrder = i,
                UnitPrice = 10.45M + i,
                UnitsInStock = i + 3,
                LastSupply = DateTime.Now.AddHours(i),
                CategoryID = i,
                Category = new CategoryViewModel() { CategoryID = i, CategoryName = "Name " + i.ToString() }
            });
        }
     
        return collection.AsEnumerable();
    }

    Let me know if I am missing something.

    Also, would you elaborate on why are you not using the MVC Grid wrapper?


    Regards,
    Viktor Tachev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Veer
    Veer avatar
    14 posts
    Member since:
    Jul 2011

    Posted 26 Feb 2016 in reply to Viktor Tachev Link to this post

    I figured the issue.

    I had to set the behavior for Json response and it worked. However, I am not getting all the records from the database. It only shows one page on grid.

    Also what is the difference using grid via MVC wrapper or creating via Script?

    return Json(result, JsonRequestBehavior.AllowGet);
  6. Answer
    Viktor Tachev
    Admin
    Viktor Tachev avatar
    2478 posts

    Posted 29 Feb 2016 Link to this post

    Hi,

    I am glad that the issue has been resolved.

    With that said the server operations are enabled for the grid. With such setup you need to implement the paging and sorting operations manually on the server.

    Check out the following resources that describe the functionality in more detail:



    Regards,
    Viktor Tachev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Veer
    Veer avatar
    14 posts
    Member since:
    Jul 2011

    Posted 09 Mar 2016 Link to this post

    Thanks Viktor,

    I was able to get it to work. 

    Can you please guide me with filtering on server side now.

    Thanks

  8. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2478 posts

    Posted 10 Mar 2016 Link to this post

    Hi,

    Using server-side filtering would require implementing custom logic that will filter the data. Also you need to ensure that the serverFiltering property is set to true.



    Regards,
    Viktor Tachev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top