Rank 1
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
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
Rank 1
Rank 1
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;
}
}​​​
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
Rank 1
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.
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