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

Ajaxified Radgrid pager posts back twice on page index change (Randomly)

10 Answers 225 Views

Grid

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

Ankit asked on 19 Oct 2011, 09:36 PM

Hi

I have created a simple ajaxified radgrid. Everything works fine except that sometimes when I paginate (change page index), it triggers the OnCommand client event twice. And that too randomly. There is no fixed index at which it happens and that makes it even more difficult for me to identify the problem. For example if it happens when I click page 5, there are 2 postbacks.... the first one passes the correct pageIndex (4) and loads the proper data on the grid.... but the second post back passes pageIndex as 0 so the grid displays page 1 data.

My pagesize is 10 and I have more than 100 pages.

Here is my Aspx:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default3.aspx.vb" Inherits="Default3" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Event Log</title>

<style type="text/css">

.RadLoadingPanel { top: 0px; right: 0px; position: fixed; background-color: #EBEBEB; }

.RadLoadingPanel img { vertical-align: middle; margin: 2px; }

</style>

<script type="text/javascript" src="JS/jquery-1.6.4.min.js"></script>

<script type="text/javascript" src="JS/json2.js"></script>

<telerik:RadCodeBlock runat="server" ID="rc">

<script type="text/javascript">

var commandName = "";

var tableView = null;

function pageLoad()

{

setTimeout('LoadGrid();', 1);

}

function LoadGrid()

{

tableView = $find("<%= rg.ClientID %>").get_masterTableView();

commandName = "Load"

executeMethod("Default3.aspx", "GetDataAndCount", getRequestData(tableView), updateGrid);

}

function gridOnCommand(sender, args)

{

if (args.get_commandName() != "PageSize")

{

args.set_cancel(true);

LoadGrid();

}

function FailMessage()

{

alert('fail');

}

function updateGrid(result)

{

tableView.set_dataSource(result.d.Data);

tableView.set_virtualItemCount(result.d.Count);

tableView.dataBind();

}

function getRequestData(tableView)

{

return JSON.stringify({

"startIndex": tableView.get_currentPageIndex(),

"maximumRows": tableView.get_pageSize(),

"eID": $('#<%=txtEventID.ClientID %>').val(),

"fDate": $find("<%= rdFrom.ClientID %>").get_selectedDate(),

"tDate": $find("<%= rdTo.ClientID %>").get_selectedDate(),

"sortExpression": tableView.get_sortExpressions().toString(),

"filterExpression": tableView.get_filterExpressions().toDynamicLinq()

});

}

function executeMethod(location, methodName, methodArguments, onSuccess, onFail)

{

$.ajax({

type: "POST",

url: location + "/" + methodName,

data: methodArguments,

contentType: "application/json; charset=utf-8",

dataType: "json",

success: onSuccess,

fail: onFail,

beforeSend: function()

{

// Handle the beforeSend event

$("#<%=RadAjaxLoadingPanel1.ClientID %>").show()

},

complete: function()

{

// Handle the complete event

$("#<%=RadAjaxLoadingPanel1.ClientID %>").hide()

}

});

}

</script>

</telerik:RadCodeBlock>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">

</asp:ScriptReference>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">

</asp:ScriptReference>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">

</asp:ScriptReference>

</Scripts>

</telerik:RadScriptManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" CssClass="RadLoadingPanel"

IsSticky="True" EnableEmbeddedSkins="false" EnableAjaxSkinRendering="false">

<asp:Image runat="server" ID="imgLoading" ImageUrl="ajax-loader.gif" AlternateText="Loading..." />

<span>Loading...</span>

</telerik:RadAjaxLoadingPanel>

<table>

<tr>

<th>

From Date

</th>

<td>

<telerik:RadDatePicker ID="rdFrom" runat="server">

</telerik:RadDatePicker>

</td>

</tr>

<tr>

<th>

To Date

</th>

<td>

<telerik:RadDatePicker ID="rdTo" runat="server">

</telerik:RadDatePicker>

</td>

</tr>

<tr>

<th>

Event ID

</th>

<td>

<asp:TextBox ID="txtEventID" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<th>

</th>

<td>

<a href="javascript://" onclick="LoadGrid();return false;">Search</a>

</td>

</tr>

</table>

<br />

<telerik:RadAjaxPanel ID="rp" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">

<telerik:RadGrid ID="rg" runat="server" AutoGenerateColumns="False" AllowPaging="True"

CellSpacing="0" GridLines="None" AllowSorting="true" >

<ClientSettings EnableRowHoverStyle="True" >

<ClientEvents OnCommand="gridOnCommand" />

</ClientSettings>

<MasterTableView AllowNaturalSort="False" AllowMultiColumnSorting="false">

<Columns>

<telerik:GridBoundColumn DataField="EventID" HeaderText="Event ID">

<ItemStyle Width="10%" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="EventDate" HeaderText="Event Date" DataFormatString="{0:M/dd/yy h:mm tt}"

DataType="System.DateTime">

<ItemStyle Width="15%" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="EventDesc" HeaderText="Description" AllowSorting="false">

</telerik:GridBoundColumn>

</Columns>

<PagerStyle AlwaysVisible="True"></PagerStyle>

</MasterTableView>

</telerik:RadGrid>

</telerik:RadAjaxPanel>

</div>

</form>

</body>

</html>

And here is the VB Code:

Imports System.Web.Services

Imports System.Data

Partial Class Default3

Inherits System.Web.UI.Page

<WebMethod(True)> _

Public Shared Function GetDataAndCount(ByVal startIndex As Integer, ByVal maximumRows As Integer, ByVal eID As String, ByVal fDate As Nullable(Of Date), ByVal tDate As Nullable(Of Date)) As Dictionary(Of String, Object)

Dim data As New Dictionary(Of String, Object)()

Using dc As New DataClassesDataContext

'dc.Log = Console.Out

Dim EL = From e In dc.EventLogs _

Select e.EventID, e.EventDate, e.EventDesc _

Order By EventDate Descending

If IsNumeric(eID) Then

EL = EL.Where(Function(e) e.EventID = CLng(eID))

End If

If fDate.HasValue Then

EL = EL.Where(Function(e) e.EventDate >= fDate.Value)

End If

If tDate.HasValue Then

EL = From e In EL _

Where e.EventDate < tDate.Value.AddDays(1)

End If

data.Add("Data", EL.Skip(startIndex * maximumRows).Take(maximumRows).ToList())

data.Add("Count", EL.Count)

Return data

End Using

End Function

End Class

P.S: I am using v2011.2.915.35 of Telerik and this happens both in Firefox and IE.

10 Answers, 1 is accepted

answered on 26 Oct 2011, 08:21 PM

Hi Vasil

I have uploaded that sample code on this link:

http://66.64.17.108/AjaxSite

I have tested it rigorously on FireFox, IE and Chrome and the frequency of occurrence decreases in that order with the least occurrence in Chrome.

Thanks again for your reply.

Here are the code files..

Aspx Code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default3.aspx.vb" Inherits="Default3" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Event Log</title>

<style type="text/css">

.RadLoadingPanel { top: 0px; right: 0px; position: fixed; background-color: #EBEBEB; }

.RadLoadingPanel img { vertical-align: middle; margin: 2px; }

</style>

<script type="text/javascript" src="JS/jquery-1.6.4.min.js"></script>

<script type="text/javascript" src="JS/json2.js"></script>

<telerik:RadCodeBlock runat="server" ID="rc">

<script type="text/javascript">

var commandName = "";

var tableView = null;

function pageLoad()

{

setTimeout('LoadGrid();', 1);

}

function LoadGrid()

{

tableView = $find("<%= rg.ClientID %>").get_masterTableView();

commandName = "Load"

executeMethod("Default3.aspx", "GetDataAndCount", getRequestData(tableView), updateGrid);

}

function gridOnCommand(sender, args)

{

if (args.get_commandName() != "PageSize")

{

args.set_cancel(true);

LoadGrid();

}

function FailMessage()

{

alert('fail');

}

function updateGrid(result)

{

tableView.set_dataSource(result.d.Data);

tableView.set_virtualItemCount(result.d.Count);

tableView.dataBind();

}

function getRequestData(tableView)

{

return JSON.stringify({

"startIndex": tableView.get_currentPageIndex(),

"maximumRows": tableView.get_pageSize(),

"eID": $('#<%=txtEventID.ClientID %>').val(),

"fDate": $find("<%= rdFrom.ClientID %>").get_selectedDate(),

"tDate": $find("<%= rdTo.ClientID %>").get_selectedDate(),

"sortExpression": tableView.get_sortExpressions().toString(),

"filterExpression": tableView.get_filterExpressions().toDynamicLinq()

});

}

function executeMethod(location, methodName, methodArguments, onSuccess, onFail)

{

$.ajax({

type: "POST",

url: location + "/" + methodName,

data: methodArguments,

contentType: "application/json; charset=utf-8",

dataType: "json",

success: onSuccess,

fail: onFail,

beforeSend: function()

{

// Handle the beforeSend event

$("#<%=RadAjaxLoadingPanel1.ClientID %>").show()

},

complete: function()

{

// Handle the complete event

$("#<%=RadAjaxLoadingPanel1.ClientID %>").hide()

}

});

}

function gridRowBound(sender, args)

{

var EventID = args.get_item().get_dataItem().EventID;

var hlView = args.get_item().findElement("hlView");

$(hlView).unbind('click').click(function()

{

alert('EventID is ' + EventID);

});

var rm = $find(args.get_item().findElement("rm").id);

var itemView = rm.findItemByText("View")

//itemView.set_navigateUrl("javascript:alert('View Event " + EventID + "');");

$(itemView.get_element()).find("a").unbind('click').click(function()

{

alert('View EventID is ' + EventID);

});

var itemEdit = rm.findItemByText("Edit")

itemEdit.set_navigateUrl("javascript:alert('Edit Event " + EventID + "');");

}

</script>

</telerik:RadCodeBlock>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<%--<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">

</asp:ScriptReference>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">

</asp:ScriptReference>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">

</asp:ScriptReference>--%>

</Scripts>

</telerik:RadScriptManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" CssClass="RadLoadingPanel"

IsSticky="True" EnableEmbeddedSkins="false" EnableAjaxSkinRendering="false">

<asp:Image runat="server" ID="imgLoading" ImageUrl="ajax-loader.gif" AlternateText="Loading..." />

<span>Loading...</span>

</telerik:RadAjaxLoadingPanel>

<table>

<tr>

<th>

From Date

</th>

<td>

<telerik:RadDatePicker ID="rdFrom" runat="server">

</telerik:RadDatePicker>

</td>

</tr>

<tr>

<th>

To Date

</th>

<td>

<telerik:RadDatePicker ID="rdTo" runat="server">

</telerik:RadDatePicker>

</td>

</tr>

<tr>

<th>

Event ID

</th>

<td>

<asp:TextBox ID="txtEventID" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<th>

</th>

<td>

<%--<a href="javascript://" onclick="LoadGrid();return false;">Search</a>--%>

</td>

</tr>

</table>

<br />

<telerik:RadAjaxPanel ID="rp" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">

<telerik:RadGrid ID="rg" runat="server" AutoGenerateColumns="False" AllowPaging="True"

CellSpacing="0" GridLines="None" AllowSorting="true" >

<ClientSettings EnableRowHoverStyle="True" >

<ClientEvents OnCommand="gridOnCommand" />

</ClientSettings>

<MasterTableView AllowNaturalSort="False" AllowMultiColumnSorting="false">

<Columns>

<telerik:GridBoundColumn DataField="EventID" HeaderText="Event ID" ItemStyle-Width="25%" />

<telerik:GridBoundColumn DataField="EventDate" HeaderText="Event Date" DataFormatString="{0:M/dd/yy h:mm tt}" DataType="System.DateTime" ItemStyle-Width="25%" />

</Columns>

<PagerStyle AlwaysVisible="True" ></PagerStyle>

</MasterTableView>

</telerik:RadGrid>

</telerik:RadAjaxPanel>

</div>

</form>

</body>

</html>

VB Code:

Imports System.Web.Services

Imports System.Data

Partial Class Default3

Inherits System.Web.UI.Page

<WebMethod(True)> _

Dim data As New Dictionary(Of String, Object)()

Using dc As New DataClassesDataContext

'dc.Log = Console.Out

Dim EL = From e In dc.EventLogs _

Select e.EventID, e.EventDate _

Order By EventDate Descending

If IsNumeric(eID) Then

EL = EL.Where(Function(e) e.EventID = CLng(eID))

End If

If fDate.HasValue Then

EL = EL.Where(Function(e) e.EventDate >= fDate.Value)

End If

If tDate.HasValue Then

EL = From e In EL _

Where e.EventDate < tDate.Value.AddDays(1)

End If

data.Add("Data", EL.Skip(startIndex * maximumRows).Take(maximumRows).ToList())

data.Add("Count", EL.Count)

Return data

End Using

End Function

Protected Sub rg_NeedDataSource(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) 'Handles rg.NeedDataSource

Dim i As Integer = 0

Dim arr As New ArrayList

For i = 0 To rg.PageSize - 1

arr.Add(i)

Next

rg.DataSource = arr

End Sub

End

Class

Accepted

answered on 27 Oct 2011, 07:17 AM

Hi Ankit,

The problem comes when you set set_virtualItemCount different to the previous one. This forces the grid to reset it's paging.
So in random time your database get's more records. For example they was 561424 in one moment and after the next paging they was 561426. So when this happens the pager get's reseted wtich is expected when changing the virtualItemCount.

Regards,
Vasil
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

answered on 12 Dec 2011, 05:57 PM

Hi Vasil

Thanks a lot...

Here is what I did for those interested...

This code is wired to the onCommand event of the grid.

if (args.get_commandArgument() != 0) {

LoadGrid();

}

else {

tableView.CurrentPageIndex = lastPagerIndex;

}

Noticed that when the grid resets the page index when virtual count is changed, the grid's args.get_commandArgument() becomes 0 instead of 1. When we page normally to the 1st page, its value is 1.
So this way we can distinguish between normal paging and reset and then load the grid accordingly.