Kendo Grid Virtual Scrolling not working

[Madhuchhanda]

I am evaluating Kendo UI Grid trial version to replace a third party grid control being used in one existing web forms application.
Environment : ASP.NET Web Forms Application (NOT MVC) (.NET Framework 4.5, upgraded from .NET Framework 2.0), Oracle 11g.
Browser : IE 11.
I am trying to implement Virtual scrolling with Remote data.
But it is not working. Data is only visible up to the height of the grid. Scroll bar is not appearing.
Setting
serverPaging: true,
serverSorting: true
does not show any data.

Could anyone tell me where I am going wrong ?
The server side function GetData() invokes database stored procedure which returns all data. It will not be possible to implement paging in the store procedures as there are a very large number of different grids aka stored procedures. If this is the cause of Virtual Scrolling not working, please suggest me the work around.

Sample code is as follows:

 

ManageUsers.aspx

<asp:Content ContentPlaceHolderID="mainContent" ID="conPort" runat="server">

    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.metro.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            $('#dvGrid').kendoGrid({
                scrollable: { virtual: true },
                sortable: true,
                selectable: "row",
                filterable: true,
                dataSource:
                    {
                        transport:
                            {
                                read:
                                    {
                                        url: "ManageUsers.aspx/GetData",
                                        type: "POST",
                                        contentType: "application/json; charset=utf-8",
                                        dataType: "json"
                                    }
                            },
                        schema:
                            {
                                data:
                                  function (response)
                                  {
                                      return $.parseJSON(response.d);
                                  }
                            },
                        type:"json",
                        pageSize: 10//,
                        //serverPaging: true,
                        //serverSorting: true,
                        //batch: true
                    },
                columns: [
                {field: "ID", title: "USER ID"},
                {field: "USER_NAME", title: "USER NAME"}
                ]
            });
        });
    </script>

    <div>
        <div id="dvGrid" class="k-widget k-grid" style="width:450px;height:350px"></div>
    </div>

</asp:Content>

////////////////////////////////////////

ManageUsers.aspx.cs

using Newtonsoft.Json;

[System.Web.Services.WebMethod]
        public static string GetData()
        {
            TblUser objTblUser = new TblUser();
            DataSet objDataSet = new DataSet();
            objDataSet = objTblUser.DataSetLoad("A", 0);

            DataView dvw = objDataSet.Tables[0].DefaultView;
            dvw.RowFilter = " USER_NAME LIKE 'E%' ";

            return JsonConvert.SerializeObject(dvw.ToTable());
        }


////////////////////////////

The converted JSon data is as follows:

[{"ID":2.0,"USER_NAME":"DANIEL S"},{"ID":3.0," USER _NAME":"DANIEL Z"},{"ID":6.0," USER _NAME":"DANIELS"},{"ID":19.0," USER _NAME":"DAVID"},{"ID":42.0," USER _NAME":"DEEPAK"},{"ID":48.0," USER _NAME":"DELIA"},{"ID":56.0," USER _NAME":"DEYAN"},{"ID":57.0," USER _NAME":"DHEERAJ"},{"ID":67.0," USER _NAME":"DURIAN"},{"ID":71.0," USER _NAME":"DIMITAR"},{"ID":89.0," USER _NAME":"DIMITAR Z"},{"ID":90.0," USER _NAME":"DOBROMIR"},{"ID":96.0," USER _NAME":"DUNCAN"}]

[Peter Filipov]

Hello Madhuchhanda,

Thank you for contacting Telerik Support.

I have setup a sample project which implements your case, please try the attached project. Also review the following demo which show cases similar scenario. 

Let me know if this works for you.

Regards,
Peter Filipov
Telerik

 

 

[Madhuchhanda]

Thank you for your reply.

The GridVirtualization code works for small set of data.

But it is not working for larger set of data (e.g.,Total Row Count 1583).

I tried to introduce the below code according to the Demo, but it did not work, too.

Please help.

pageable: {
                    numeric: false,
                    previousNext: false
                }

[Madhuchhanda]

Hi,

Could you get any solution to the problem?

[Peter Filipov]

Hello,

I have setup the project to work with the mentioned amount of rows and everything seems to be fine. Please review the attachment and change it in order to reproduce the problem.  

Regards,
Peter Filipov
Telerik

 

 

[Madhuchhanda]

Hi,

Thank you for your reply.

I found the issue with presence of HTML characters like &, \r\n in the data being populated.

I tried to use the function for escaping HTML, but it is not working.

Sample Code:

ManageUsers.aspx

<script type="text/javascript">
        var entityMap = {
            "&": "&amp;",
            "\r\n": "<br/>",
            "<": "&lt;",
            ">": "&gt;",
            '"': '&quot;',
            "'": '&#39;',
            "/": '&#x2F'
        };

        function escapeHtml(str)
        {
            return String(str).replace(/[&<>"'\/]/g, function (s)
            {
                return entityMap[s];
            });
        }

        $(document).ready(function ()
        {
            var successCallback = function (users)
            {
                $('#dvGrid').kendoGrid({
                    dataSource:
                        {
                            data: JSON.parse(users.d),
                            pageSize: 3
                        },
                    height: 160,
                    pageSize: 3,
                    columns: [
                    { field: "ID", title: "USER ID" },
                    { field: "USER_NAME", title: "USER NAME" },
                    {
                        field: "REMARKS", title: "REMARKS",
                        template: function (dataItem) { return escapeHtml(dataItem.REMARKS); }
                    }
                    ],

                    scrollable: { virtual: true },
                    sortable: true
                });
            }


            $.ajax({
                type: "POST",
                url: "ManageUsers.aspx/GetData",
                success: successCallback,
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            });
        });

    </script>

/////////////////////////////////
ManageUsers.aspx.cs

[WebMethod]
        public static string GetData()
        {
            DataSet ds = new DataSet();
            DataTable dt = new DataTable();
            dt.Columns.Add("ID");
            dt.Columns.Add("USER_NAME");
            dt.Columns.Add("REMARKS");
            DataRow dr;
            for (int i = 1; i <= 1583; i++)
            {
                dr = dt.NewRow();
                dr[0] = i;
                dr[1] = "U_" + i;
                dr[2] = "L & T";
                dt.Rows.Add(dr);
            }
            ds.Tables.Add(dt);
            return JsonConvert.SerializeObject(ds.Tables[0]);
        }

 

[Madhuchhanda]

Basically I will need to show the texts in the grid columns as it comes from database fields. It may contain HTML characters, any ascii or non-ascii characters. The spaces should be preserved also. Could you help me?

[Peter Filipov]

Hi Madhuchhanda,

I have tested the sample and it works fine. Please inspect the element in the developer tools - e.g. right click on the element edit as html. The replacement of special characters could be done an the server it depends on you. 

Regards,
Peter Filipov
Telerik

 

 

[Sam]

For me the scrolling is very buggy, my configuration is fairly standard, is this a known issue? 

See attached.

[Boyan Dimitrov]

Hello,

Could you please share your code or prepare a sample dojo example based on our Grid / Virtualization of local data demo? 

Regards,
Boyan Dimitrov
Telerik by Progress

[Amlan]

Hi,

 

I know this is an old post from 2016 but I am having issues with virtual scrolling not working after sorting on a column. Only the pagesize is returned and after that scrolling does not get back more results.

[Tsvetomir]

Hi Amlan,

Based on the provided information, I cannot be sure what might be causing the issue. The following live demo implements the virtual scrolling functionality along with the sorting. Is it possible for you to modify the example in order to replicate the faulty behavior on your side and send it back to me?

https://demos.telerik.com/kendo-ui/grid/virtualization-remote-data

Thank you for your cooperation in advance.

 

Regards,
Tsvetomir
Progress Telerik