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

Virtual scrolling in kendo grid

6 Answers 227 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Palanisamy
Top achievements
Rank 1
Palanisamy asked on 29 Sep 2015, 03:16 PM

Hi,

In kendo grid demo,all the records are loaded at the very first time(Ex - 2000 records) itself. After that page size and virtual scrolling option enabled.When i scroll,records are loaded.I dont want this scenario. I need like,I have totally 14000 records. I have to fetch only 50 records and need to bind in grid. After that  when i scroll,next 50 records should get loaded and need to bind..

 

 

 

Kindly help me out.

6 Answers, 1 is accepted

Sort by
0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 29 Sep 2015, 07:57 PM
Hello Palanisamy,

Take a look at the demo I made based on the Grid/Virtualization of Remote Data Demo.

The pageSize property controls how many records will be binded and loaded into the Grid.  As you scroll beyond the specified pageSize, the Grid's DataSource makes a Get request for the next pageSize amount.

Here's how you can observe only the pageSize is being loaded(50) and not the total amount of records(830):

1.  Run the demo and open your DevTools with F12.
2.  Choose the Network tab, choose the Response Tab.
3.  Watch the Get requests being made by scrolling down the Grid.

Hopefully, this helps clear things.

Regards,
Pat
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Palanisamy
Top achievements
Rank 1
answered on 30 Sep 2015, 05:03 AM
Whoops my bad I will double check and come back to you man
0
Palanisamy
Top achievements
Rank 1
answered on 30 Sep 2015, 06:15 AM

In the following scenario,virtual scrolling not working. I mean it fetches entire 1000 records first time itself. So no use of virtual scrolling here. Since i am binding the columns dynamically.Please find the below cshtml code and controller code and then help me out.

cshtml

-------------

  @model System.Data.DataTable
<html>
<head>
    <link href="~/Content/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Content/kendo.default.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/kendo.all.min.js"></script>
    <title></title>
    <style>
        .k-loading-text {
    text-indent: -4000px !important;
    text-align: center;
}

    </style>
</head>
<body>
    <div>
        @(Html.Kendo().Grid<dynamic>()
    .Name("gridnew")
    .DataSource(dataSource => dataSource
     .Ajax()
      .Read(read => read.Action("MsgContentDetails_Read", "Home"))
     .PageSize(100)
     )
    .Columns(columns =>
    {
        foreach (System.Data.DataColumn column in Model.Columns)
        {
            columns.Bound(column.ColumnName);
        }

    })
    .Sortable()
    .Scrollable(scrollable => scrollable.Virtual(true))
    .Pageable()
    .HtmlAttributes(new { style = "height:430px;" })

        )
    </div>  

</body>
</html>     

 

Controller

-------------------------

 public ActionResult MsgContentDetails_Read([DataSourceRequest]DataSourceRequest request)
        {
            DataTable messageContents = MessageDetails();
            DataSourceResult result = messageContents.ToDataSourceResult(request);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

 

 

 public DataTable MessageDetails()
        {
            var connection = ConfigurationManager.ConnectionStrings["WC3Entities"].ConnectionString;
            using (var dataAdapter = new SqlDataAdapter("SELECT MsgNum,MsgDesc,MsgFileNm from tblCVMsgContent", connection))
            {
                var dataTable = new DataTable();

                dataAdapter.Fill(dataTable);
                dataAdapter.FillSchema(dataTable, SchemaType.Mapped);
                return dataTable;
            }
        }​​​

0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 30 Sep 2015, 04:15 PM
Hello Palanisamy,

The functionality of the Kendo UI demo is the same as the Kendo MVC.  I've attached a demo exactly the same as dojo I sent you.  Repeat the same procedure with the DevTools.  You will see the Grid makes a Post request for the next 50 records.

Regards,
Pat
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Palanisamy
Top achievements
Rank 1
answered on 01 Oct 2015, 04:52 AM

Hi Pat,

I need sample for my case. Since i am using dynamic columns binding with virtual scrolling.If am using normal model class,it is working fine. Please see my above mail clearly.And then please help me.

0
Nikolay Rusev
Telerik team
answered on 06 Oct 2015, 07:01 AM

Hello Palanisamy,

How you are building of columns doesn't matter for case of virtual scrolling. My colleague Patrick already send you runnable example. You should be able to use his second example as a starting point for your implementation.

There is a also a code-library project demonstrating binding to DataTable which you can use. I'm attaching that code-library project with virtually scrolling enabled. You can run it and inspect the Network tab of browser console to see the request-response payload (it depends on the PageSize of the DataSource).

 

Regards,
Nikolay Rusev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Palanisamy
Top achievements
Rank 1
Answers by
Patrick | Technical Support Engineer, Senior
Telerik team
Palanisamy
Top achievements
Rank 1
Nikolay Rusev
Telerik team
Share this question
or