jQWidgets Forums
jQuery UI Widgets › Forums › Grid › virtualmode not working
Tagged: asp .net grid paging
This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 2 months ago.
-
Authorvirtualmode not working Posts
-
We are using a grid that is going to load a large dataset. We are experimenting problems when we execute this in IE 8 because it appears an message that alert us that the sript execution is bad in performance. We dont want that alert so we want to use the virtualmode option to treat this slow execution.
We have tried the example that appears in the demo web but when we use the same concepts in our small application it doesn´t work.
We don´t know what is the problem. We are retrieving the data in xml format not in array format like in the example. We use asp.net
This is the code:<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”NoVale.aspx.cs” MasterPageFile=”Site.master” Inherits=”NoVale” %>
<asp:Content ID=”HeaderContent” runat=”server” ContentPlaceHolderID=”HeadContent”>
<title id=’Description’>In this demo jqxGrid uses a virtualized paging which enables you to handle very large data sets without any impact on client side performance.</title>
<link rel=”stylesheet” href=”Styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”js/jquery1.10.2.js”></script>
<script type=”text/javascript” src=”js/jqxcore.js”></script>
<script type=”text/javascript” src=”js/jqxdata.js”></script>
<script type=”text/javascript” src=”js/jqxbuttons.js”></script>
<script type=”text/javascript” src=”js/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”js/jqxmenu.js”></script>
<script type=”text/javascript” src=”js/jqxlistbox.js”></script>
<script type=”text/javascript” src=”js/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”js/jqxgrid.js”></script>
<script type=”text/javascript” src=”js/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”js/jqxgrid.selection.js”></script><script type=”text/javascript”>
$(document).ready(function () {var source =
{
datatype: “xml”,
datafields: [
{ name: ‘Historia’, type: ‘string’ },
{ name: ‘Nombre’, type: ‘string’ },
{ name: ‘Apellido1’, type: ‘string’ },
{ name: ‘Apellido2’, type: ‘string’ },
{ name: ‘Cic’, type: ‘string’ },
{ name: ‘Fecha_Prescripcion’, type: ‘string’ },
{ name: ‘Procedencia’, type: ‘string’ },
{ name: ‘Tipo_Tratamiento’, type: ‘string’ },
{ name: ‘Turno’, type: ‘string’ },
{ name: ‘Medico_Medulares’, type: ‘int’ },
{ name: ‘Fecha_Alta’, type: ‘string’ },{ name: ‘Fisioterapeuta’, type: ‘int’ },
{ name: ‘Transporte’, type: ‘boolean’ },
{ name: ‘Fecha_Inicio’, type: ‘string’ },
{ name: ‘Fecha_Revision’, type: ‘string’ },
{ name: ‘Sesion’, type: ‘string’ },
{ name: ‘L’, type: ‘boolean’ },
{ name: ‘M’, type: ‘boolean’ },
{ name: ‘X’, type: ‘boolean’ },
{ name: ‘J’, type: ‘boolean’ },
{ name: ‘V’, type: ‘boolean’ },
{ name: ‘S’, type: ‘boolean’ },
{ name: ‘D’, type: ‘boolean’ },{ name: ‘Observaciones’, type: ‘string’ }
],
async: false,
record: ‘Table1’,
pagesize: 10,
url: ‘Paginas/Metodos.aspx/ConsultarTratamientoPendiente’
};// load virtual data.
var rendergridrows = function (params) {
var data = params.data;
return data;
}var dataAdapter = new $.jqx.dataAdapter(source, { contentType: ‘application/json; charset=utf-8’ });
$(“#jqxgrid”).jqxGrid(
{
width: 850,
autoheight: true,
source: dataAdapter,
virtualmode: true,
pageable: true,
rendergridrows: rendergridrows,
columns: [
{ text: ‘Historia’, datafield: ‘Historia’, width: ‘9%’, align: ‘center’ },
{ text: ‘Cic’, datafield: ‘Cic’, width: ‘9%’, align: ‘center’ },
{ text: ‘Nombre’, datafield: ‘Nombre’, width: ‘9%’, align: ‘center’ },
{ text: ‘Apellido1’, datafield: ‘Apellido1’, width: ‘9%’, align: ‘center’ },
{ text: ‘Apellido2’, datafield: ‘Apellido2’, width: ‘9%’, align: ‘center’ },
{ text: ‘Fecha de Prescripcion’, datafield: ‘Fecha_Prescripcion’, width: ‘9%’, align: ‘center’, cellsformat: ‘dd/MM/yyyy HH:mm’ },
{ text: ‘Procedencia’, datafield: ‘Procedencia’, width: ‘9%’, align: ‘center’ },
{ text: ‘Tipo de Tratamiento’, datafield: ‘Tipo_Tratamiento’, width: ‘9%’, align: ‘center’ },
{ text: ‘Turno’, datafield: ‘Turno’, width: ‘9%’, align: ‘center’ }
]
});
});
</script>
</asp:Content>
<asp:Content ID=”BodyContent” runat=”server” ContentPlaceHolderID=”MainContent”>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid”></div>
</div>
</asp:Content>Hi wormie007,
Actually, Virtual mode is not implemented in the provided code. You just enabled it, but you still load All the data so there’s no particular difference. To learn how to impleemnt it, please look at: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-grid-paging.htm
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comIt is correctly if i change the code to this or isn’t implemented yet?
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”NoVale.aspx.cs” MasterPageFile=”Site.master” Inherits=”NoVale” %>
<asp:Content ID=”HeaderContent” runat=”server” ContentPlaceHolderID=”HeadContent”>
<title id=’Description’>In this demo jqxGrid uses a virtualized paging which enables you to handle very large data sets without any impact on client side performance.</title>
<link rel=”stylesheet” href=”Styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”js/jquery1.10.2.js”></script>
<script type=”text/javascript” src=”js/jqxcore.js”></script>
<script type=”text/javascript” src=”js/jqxdata.js”></script>
<script type=”text/javascript” src=”js/jqxbuttons.js”></script>
<script type=”text/javascript” src=”js/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”js/jqxmenu.js”></script>
<script type=”text/javascript” src=”js/jqxlistbox.js”></script>
<script type=”text/javascript” src=”js/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”js/jqxgrid.js”></script>
<script type=”text/javascript” src=”js/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”js/jqxgrid.selection.js”></script><script type=”text/javascript”>
$(document).ready(function () {var source =
{
datatype: “xml”,
datafields: [
{ name: ‘Historia’, type: ‘string’ },
{ name: ‘Nombre’, type: ‘string’ },
{ name: ‘Apellido1’, type: ‘string’ },
{ name: ‘Apellido2’, type: ‘string’ },
{ name: ‘Cic’, type: ‘string’ },
{ name: ‘Fecha_Prescripcion’, type: ‘string’ },
{ name: ‘Procedencia’, type: ‘string’ },
{ name: ‘Tipo_Tratamiento’, type: ‘string’ },
{ name: ‘Turno’, type: ‘string’ },
{ name: ‘Medico_Medulares’, type: ‘int’ },
{ name: ‘Fecha_Alta’, type: ‘string’ },
{ name: ‘Fisioterapeuta’, type: ‘int’ },
{ name: ‘Transporte’, type: ‘boolean’ },
{ name: ‘Fecha_Inicio’, type: ‘string’ },
{ name: ‘Fecha_Revision’, type: ‘string’ },
{ name: ‘Sesion’, type: ‘string’ },
{ name: ‘L’, type: ‘boolean’ },
{ name: ‘M’, type: ‘boolean’ },
{ name: ‘X’, type: ‘boolean’ },
{ name: ‘J’, type: ‘boolean’ },
{ name: ‘V’, type: ‘boolean’ },
{ name: ‘S’, type: ‘boolean’ },
{ name: ‘D’, type: ‘boolean’ },
{ name: ‘Observaciones’, type: ‘string’ }
],
async: false,
record: ‘Table1’,
pagesize: 10,
url: ‘Paginas/Metodos.aspx/ConsultarTratamientoPendiente’
};var dataAdapter = new $.jqx.dataAdapter(source, { contentType: ‘application/json; charset=utf-8’ });
// load virtual data.
var rendergridrows = function (params) {
var data = generatedata(params.startindex, params.endindex, params.data);
return data;
}var generatedata = function (startindex, endindex, datos) {
var data = {};
for (var i = startindex; i < endindex; i++) {
var row = {};row[“id”] = i;
row[“Historia”] = datos[i][“Historia”];
row[“Cic”] = datos[i][“Cic”];
row[“Nombre”] = datos[i][“Nombre”];
row[“Apellido1”] = datos[i][“Apellido1”];
row[“Apellido2”] = datos[i][“Apellido2”];
row[“Fecha_Prescripcion”] = datos[i][“Fecha_Prescripcion”];
row[“Procedencia”] = datos[i][“Procedencia”];
row[“Tipo_Tratamiento”] = datos[i][“Tipo_Tratamiento”];
row[“Turno”] = datos[i][“Turno”];
data[i] = row;
}
return data;
}$(“#jqxgrid”).jqxGrid(
{
width: 850,
autoheight: true,
source: dataAdapter,
virtualmode: true,
pageable: true,
rendergridrows: rendergridrows,
columns: [
{ text: ‘Historia’, datafield: ‘Historia’, width: ‘11%’, align: ‘center’ },
{ text: ‘Cic’, datafield: ‘Cic’, width: ‘11%’, align: ‘center’ },
{ text: ‘Nombre’, datafield: ‘Nombre’, width: ‘11%’, align: ‘center’ },
{ text: ‘Apellido1’, datafield: ‘Apellido1’, width: ‘11%’, align: ‘center’ },
{ text: ‘Apellido2’, datafield: ‘Apellido2’, width: ‘11%’, align: ‘center’ },
{ text: ‘Fecha de Prescripcion’, datafield: ‘Fecha_Prescripcion’, width: ‘12%’, align: ‘center’, cellsformat: ‘dd/MM/yyyy HH:mm’ },
{ text: ‘Procedencia’, datafield: ‘Procedencia’, width: ‘11%’, align: ‘center’ },
{ text: ‘Tipo de Tratamiento’, datafield: ‘Tipo_Tratamiento’, width: ‘11%’, align: ‘center’ },
{ text: ‘Turno’, datafield: ‘Turno’, width: ‘11%’, align: ‘center’ }
]
});
});
</script>
</asp:Content>
<asp:Content ID=”BodyContent” runat=”server” ContentPlaceHolderID=”MainContent”>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid”></div>
</div>
</asp:Content>Hi wormie007,
Please, ready the help topic which I pointed you out. The idea is to load your data on demand, not at once as you do now.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.