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