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

Kendo Grid Virtual Scrolling not working

11 Answers 512 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Madhuchhanda
Top achievements
Rank 1
Madhuchhanda asked on 10 Feb 2016, 03:29 PM

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"}]

11 Answers, 1 is accepted

Sort by
0
Peter Filipov
Telerik team
answered on 11 Feb 2016, 01:09 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Madhuchhanda
Top achievements
Rank 1
answered on 11 Feb 2016, 03:08 PM

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                   
                }

0
Madhuchhanda
Top achievements
Rank 1
answered on 15 Feb 2016, 08:12 AM

Hi,

Could you get any solution to the problem?

0
Peter Filipov
Telerik team
answered on 15 Feb 2016, 09:28 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Madhuchhanda
Top achievements
Rank 1
answered on 15 Feb 2016, 05:07 PM

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]);
        }

 

0
Madhuchhanda
Top achievements
Rank 1
answered on 16 Feb 2016, 11:28 AM
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?
0
Peter Filipov
Telerik team
answered on 17 Feb 2016, 10:42 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Sam
Top achievements
Rank 2
answered on 24 Jan 2017, 08:33 AM

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

See attached.

0
Boyan Dimitrov
Telerik team
answered on 26 Jan 2017, 09:04 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Amlan
Top achievements
Rank 1
answered on 30 Mar 2020, 09:19 PM

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.

0
Tsvetomir
Telerik team
answered on 01 Apr 2020, 12:02 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Madhuchhanda
Top achievements
Rank 1
Answers by
Peter Filipov
Telerik team
Madhuchhanda
Top achievements
Rank 1
Sam
Top achievements
Rank 2
Boyan Dimitrov
Telerik team
Amlan
Top achievements
Rank 1
Tsvetomir
Telerik team
Share this question
or