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

Paging template does not show on top

7 Answers 193 Views

Grid

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

Richard asked on 22 Mar 2012, 01:43 PM

Hello Telerik team,
If I use a paging template for my RadGrid control and and place it to the top, it will not show up. I already have set both the AlwaysVisible property and the AllowPaging property to true. If I place the paging template at the bottom of the RadGrid control it shows up correctly (even if no paging is neccessary).

The RadGrid control itself is inside a RadPane control which is inside a RadSplitter control (vertical splitting, bottom half), and this is inside a SlidingPane (I know it sounds a little bit confusing, but this is the design of my web page project).

I know that in some threads the same problem was described and that a solution was given (i.e. a bug fix for the 2008...version).

I currently use the newest version 2012.1.215.40, but the bug is still there.

Any ideas?

Greetings,
Richard Huber.

7 Answers, 1 is accepted

answered on 27 Mar 2012, 11:01 AM

WebSite.zip

Hello Richard,

I am not sure that I completely understand your scenario. Please find attached a sample project, where I am trying to simulate your scenario by following the described steps. Could you review the project and let me know what I am missing in replicating the issue?

Greetings,
Milena
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 29 Mar 2012, 07:40 AM

Hello Milena,
thanks for your sample code.
I tried it and yes, it works (if all is programmed in the aspx code).
But unfortunately, when I uncomment the PagerTemplate in the ASPX code and instead implement a PagerTemplate in the code behind (own class derived from ITemplate) it does not work properly.

In the Page_Load method I call the constructor of the new PagerTemplate class and use this object as a pager template with

protected void Page_Init(object sender, EventArgs e)

{

RadGridPagerItemTemplate pagerTemplate = new RadGridPagerItemTemplate();

RADGRID1.MasterTableView.PagerTemplate = pagerTemplate;
}

In the pager template I use a simple table with a few ImageButtons for backward, forward, last page, first page etc.

Now try the two scenarios:

- using the code behind pager template and PagerStyle-Position "Top" : pager template does not show on top of the data grid (if you look closely, e.g. with an IE Web debugger, you will see that in the HTML code there is on top of the RadGrid control the table for the image buttons, but without the buttons)

- using the code behind pager template and PagerStyle-Position "Bottom" : pager template shows up at the bottom of the RadGrid control

By the way if as position "TopAndButtom" is used, the paging template does not show on the top, but on the bottom.

I must say, I'm a little lost a this point.

Greetings,
Richard.

answered on 03 Apr 2012, 06:41 AM

Hellp Milena,
hm interesting that in your code the pager template shows at the top of the grid control.
I change the position of the pager in the aspx file and it shows only on the bottom. In another project I tried to change the position in the code behind and it showed only on the bottom also.
I used your code sample and created an own pager template in the code behind.
I will give you the code snippet of the pager template and the aspx.cs file (I changed only the OnNeedDataSource event handler because I could not work out how to use youre database file, so I simple fill the DataSource of the RadGrid control in this event handler, but I think this has nothing to do with the pager problem).
As you can see in the code behind I used for testing some own icons for the pager template. I think you can skip them, but the pager templage should still be visible at the top, even without the right icon.

PagerTemplate class:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

using System.Text;

using Telerik.Web.UI;

/// <summary>

/// Class for the paget item template at the top (or button) of the

/// RadGrid control. This template contains buttons for custom commands like

/// Select/Unselect or delete grid elements and buttons for paging

/// (i.e. page forward/backward go to first/last page)

/// </summary>

public class RadGridPagerItemTemplate : ITemplate

{

private List<string> controlOrderList;

private string m_separator = "separator";

private string m_fillRightCell = "fillRightCell";

private HtmlTable m_buttonTable;

#region /* language dependent strings (text pager and tool tips */

#endregion /* language dependent strings (text pager and tool tips) */

#region /* Properties */

/// <summary>

/// ImageButton to go to the first page

/// </summary>

public ImageButton GridButtonFirstPage { get; set; }

/// <summary>

/// ImageButton to go back one page

/// </summary>

public ImageButton GridButtonBackward { get; set; }

/// <summary>

/// ImageButton to go forward one page

/// </summary>

public ImageButton GridButtonForward { get; set; }

/// <summary>

/// ImageButton to go to the last page

/// </summary>

public ImageButton GridButtonLastPage { get; set; }

/// <summary>

/// ImageButton to select all items <b>of the current visible page</b> of the data grid.

/// </summary>

public ImageButton GridButtonSelectAll { get; set; }

/// <summary>

/// ImageButton to unselect all items of the current visible page of the data grid.

/// </summary>

public ImageButton GridButtonUnselectAll { get; set; }

/// <summary>

/// ImageButton to delete all selected items.

/// </summary>

public ImageButton GridButtonDeleteSelected { get; set; }

/// <summary>

/// HtmlGenericControl (div in html) for the text format of the pager

/// </summary>

public Literal PagerTextFormatLiteral { get; set; }

#region /* language dependent tool tips and urls for the buttons */

public string TextCalendarGridPage { get; set; }

public string TextOf { get; set; }

public string TextOutOf { get; set; }

public string TextCalendarGridItem { get; set; }

public string TextCalendarGridItems { get; set; }

public string TextFirst { get; set; }

public string TextRewind { get; set; }

public string TextPrevious { get; set; }

public string TextNext { get; set; }

public string TextFastForward { get; set; }

public string TextLast { get; set; }

public string TextSelectAll { get; set; }

public string TextUnselectAll { get; set; }

public string TextDeleteSelected { get; set; }

//ImageUrls

public string UrlFirst { get; set; }

public string UrlPrevious { get; set; }

public string UrlRewind { get; set; }

public string UrlNext { get; set; }

public string UrlFastForward { get; set; }

public string UrlLast { get; set; }

public string UrlFirstDisabled { get; set; }

public string UrlPreviousDisabled { get; set; }

public string UrlRewindDisabled { get; set; }

public string UrlNextDisabled { get; set; }

public string UrlFastForwardDisabled { get; set; }

public string UrlLastDisabled { get; set; }

public string UrlSelectAll { get; set; }

public string UrlUnselectAll { get; set; }

public string UrlDeleteActivated { get; set; }

public string UrlDeleteDeactivated { get; set; }

#endregion /* language dependent tool tips and urls for the buttons */

#endregion /* Properties */

#region /* Constructors */

public RadGridPagerItemTemplate()

{

GridButtonFirstPage = new ImageButton();

GridButtonFirstPage.ID = "IDGridButtonFirstPage";

GridButtonFirstPage.CommandName = "Page";

GridButtonFirstPage.CommandArgument = "First"; // Goes to the first page.

GridButtonBackward = new ImageButton();

GridButtonBackward.ID = "IDGridButtonBackward";

GridButtonBackward.CommandName = "Page";

GridButtonBackward.CommandArgument = "Prev"; // Goes to the previous page.

PagerTextFormatLiteral = new Literal();

PagerTextFormatLiteral.ID = "IDPagerTextFormat";

PagerTextFormatLiteral.DataBinding += new EventHandler(PagerTextFormatLiteral_DataBinding);

GridButtonForward = new ImageButton();

GridButtonForward.ID = "IDGridButtonForward";

GridButtonForward.CommandName = "Page";

GridButtonForward.CommandArgument = "Next"; //Goes to the next page.

GridButtonLastPage = new ImageButton();

GridButtonLastPage.ID = "IDGridButtonLastPage";

GridButtonLastPage.CommandName = "Page";

GridButtonLastPage.CommandArgument = "Last"; // Goes to the last page.

GridButtonSelectAll = new ImageButton();

GridButtonSelectAll.ID = "IDGridButtonPagerSelectAll";

//GridButtonSelectAll.OnClientClick = "return SelectAllGridItems();";

GridButtonUnselectAll = new ImageButton();

GridButtonUnselectAll.ID = "IDGridButtonPagerUnselectAll";

//GridButtonUnselectAll.OnClientClick = "return UnselectAllGridItems();";

GridButtonDeleteSelected = new ImageButton();

GridButtonDeleteSelected.ID = "IDGridButtonPagerDeleteSelected";

GridButtonDeleteSelected.CommandName = "DeleteSelectedItems";

//GridButtonDeleteSelected.OnClientClick = "return DeleteSelectedGridItems();";

controlOrderList = new List<string>();

controlOrderList.Add(GridButtonFirstPage.ID);

controlOrderList.Add(GridButtonBackward.ID);

controlOrderList.Add(PagerTextFormatLiteral.ID);

controlOrderList.Add(GridButtonForward.ID);

controlOrderList.Add(GridButtonLastPage.ID);

controlOrderList.Add(m_separator);

controlOrderList.Add(GridButtonSelectAll.ID);

controlOrderList.Add(GridButtonUnselectAll.ID);

controlOrderList.Add(m_separator);

controlOrderList.Add(GridButtonDeleteSelected.ID);

controlOrderList.Add(m_fillRightCell);

TextCalendarGridPage = string.Empty;

TextOf = string.Empty;

TextOutOf = string.Empty;

TextCalendarGridItem = string.Empty;

TextCalendarGridItems = string.Empty;

TextFirst = string.Empty;

TextRewind = string.Empty;

TextPrevious = string.Empty;

TextNext = string.Empty;

TextFastForward = string.Empty;

TextLast = string.Empty;

TextSelectAll = string.Empty;

TextUnselectAll = string.Empty;

TextDeleteSelected = string.Empty;

//ImageUrls

UrlFirst = string.Empty;

UrlPrevious = string.Empty;

UrlRewind = string.Empty;

UrlNext = string.Empty;

UrlFastForward = string.Empty;

UrlLast = string.Empty;

UrlFirstDisabled = string.Empty;

UrlPreviousDisabled = string.Empty;

UrlRewindDisabled = string.Empty;

UrlNextDisabled = string.Empty;

UrlFastForwardDisabled = string.Empty;

UrlLastDisabled = string.Empty;

UrlSelectAll = string.Empty;

UrlUnselectAll = string.Empty;

}

#endregion /* Constructors */

#region /* public methods */

/// <summary>

/// Main method of the class. This class has to create the ImageButtons and to add them to the given container control

/// </summary>

/// <remarks>

/// This is the only method which will be called by the Telerik framework.

/// </remarks>

/// <param name="container">Control which will contain all custom command and all

/// design controls (e.g. tables, table rows and columns etc.).</param>

///

public void InstantiateIn(Control container)

{

// the tool tips and the image urls will be created by the ItemBound event handler of the RadGrid

//

m_buttonTable = new HtmlTable();

m_buttonTable.Attributes.Add("class", "WGCToolbar");

m_buttonTable.Width = "100%";

HtmlTableRow buttonRow = new HtmlTableRow();

for (int i = 0; i < controlOrderList.Count; i++)

{

HtmlTableCell buttonCell = new HtmlTableCell();

string id = controlOrderList[i];

if (string.IsNullOrEmpty(id) == true)

{

continue; // should NOT HAPPEN

}

else if (string.Compare(id, m_separator) == 0)

{

// separator, the separator control will be created at this point, no need for a member variable

//HtmlGenericControl separatorControl = new HtmlGenericControl();

//separatorControl.Attributes.Add("class", "separatorGridControl");

//separatorControl.Visible = true;

//buttonCell.Controls.Add(separatorControl);

}

else if (string.Compare(id, m_fillRightCell) == 0)

{

// last cell on the right to fill the pager template table row, cell without controls

buttonCell.Align = "right";

buttonCell.Width = "100%";

}

else

{

if (string.Compare(id, GridButtonFirstPage.ID) == 0)

{

buttonCell.Width = "25px";

GridButtonFirstPage.ToolTip = "First Page";

buttonCell.Controls.Add(GridButtonFirstPage);

}

else if (string.Compare(id, GridButtonBackward.ID) == 0)

{

buttonCell.Width = "25px";

GridButtonBackward.ToolTip = TextLast;

buttonCell.Controls.Add(GridButtonBackward);

}

else if (string.Compare(id, PagerTextFormatLiteral.ID) == 0)

{

buttonCell.NoWrap = true;

buttonCell.Controls.Add(PagerTextFormatLiteral);

}

else if (string.Compare(id, GridButtonForward.ID) == 0)

{

buttonCell.Width = "25px";

GridButtonForward.ToolTip = TextNext;

buttonCell.Controls.Add(GridButtonForward);

}

else if (string.Compare(id, GridButtonLastPage.ID) == 0)

{

buttonCell.Width = "25px";

GridButtonLastPage.ToolTip = TextLast;

buttonCell.Controls.Add(GridButtonLastPage);

}

else if (string.Compare(id, GridButtonSelectAll.ID) == 0)

{

GridButtonSelectAll.ToolTip = TextSelectAll;

buttonCell.Controls.Add(GridButtonSelectAll);

}

else if (string.Compare(id, GridButtonUnselectAll.ID) == 0)

{

GridButtonUnselectAll.ToolTip = TextUnselectAll;

buttonCell.Controls.Add(GridButtonUnselectAll);

}

else if (string.Compare(id, GridButtonDeleteSelected.ID) == 0)

{

GridButtonDeleteSelected.ToolTip = TextDeleteSelected;

buttonCell.Controls.Add(GridButtonDeleteSelected);

}

buttonRow.Cells.Add(buttonCell);

}

m_buttonTable.Rows.Add(buttonRow);

container.Controls.Add(m_buttonTable);

}

void PagerTextFormatLiteral_DataBinding(object sender, EventArgs e)

{

try

{

Literal pagerTextFormat = (Literal)sender;

GridPagerItem Container = (GridPagerItem)pagerTextFormat.BindingContainer;

StringBuilder sbValue = new StringBuilder();

string itemString = string.Empty;

int currentPageIndex = (int)DataBinder.Eval(Container, "Paging.CurrentPageIndex") + 1;

int pageCount = (int)DataBinder.Eval(Container, "Paging.PageCount");

int firstIndexInPage = (int)DataBinder.Eval(Container, "Paging.FirstIndexInPage") + 1;

int lastIndexInPage = (int)DataBinder.Eval(Container, "Paging.LastIndexInPage") + 1;

int dataSourceCount = (int)DataBinder.Eval(Container, "Paging.DataSourceCount");

if (((lastIndexInPage - firstIndexInPage) + 1) > 1)

{

itemString = TextCalendarGridItems;

}

else

{

itemString = TextCalendarGridItem;

}

if ((dataSourceCount <= 0) || (pageCount <= 0))

{

pageCount = 1;

dataSourceCount = 0;

firstIndexInPage = 0;

lastIndexInPage = 0;

}

// language dependent!!!

// Page nr of nr, item(s) nr - nr of nr

sbValue.AppendFormat("{0} {1} {2} {3}, {4} {5} - {6} {7} {8}",

TextCalendarGridPage, currentPageIndex, TextOf, pageCount, itemString, firstIndexInPage, lastIndexInPage, TextOutOf, dataSourceCount);

pagerTextFormat.Text = sbValue.ToString();

if (dataSourceCount == 0)

{

GridButtonBackward.Style["cursor"] = "default";

GridButtonBackward.ImageUrl = UrlPreviousDisabled;

GridButtonBackward.OnClientClick = "return false;";

GridButtonFirstPage.Style["cursor"] = "default";

GridButtonFirstPage.ImageUrl = UrlFirstDisabled;

GridButtonFirstPage.OnClientClick = "return false;";

GridButtonForward.Style["cursor"] = "default";

GridButtonForward.ImageUrl = UrlNextDisabled;

GridButtonForward.OnClientClick = "return false;";

GridButtonLastPage.Style["cursor"] = "default";

GridButtonLastPage.ImageUrl = UrlLastDisabled;

GridButtonLastPage.OnClientClick = "return false;";

}

else

{

if (currentPageIndex == 1)

{

// backward is no longer possible

GridButtonBackward.Style["cursor"] = "default";

GridButtonBackward.ImageUrl = UrlPreviousDisabled;

GridButtonBackward.OnClientClick = "return false;";

GridButtonFirstPage.Style["cursor"] = "default";

GridButtonFirstPage.ImageUrl = UrlFirstDisabled;

GridButtonFirstPage.OnClientClick = "return false;";

}

else

{

GridButtonBackward.Style["cursor"] = "pointer";

GridButtonBackward.ImageUrl = UrlPrevious;

GridButtonBackward.OnClientClick = string.Empty;

GridButtonFirstPage.Style["cursor"] = "pointer";

GridButtonFirstPage.ImageUrl = UrlFirst;

GridButtonFirstPage.OnClientClick = string.Empty;

}

if (currentPageIndex == pageCount)

{

// forward is no longer possible

GridButtonForward.Style["cursor"] = "default";

GridButtonForward.ImageUrl = UrlNextDisabled;

GridButtonForward.OnClientClick = "return false;";

GridButtonLastPage.Style["cursor"] = "default";

GridButtonLastPage.ImageUrl = UrlLastDisabled;

GridButtonLastPage.OnClientClick = "return false;";

}

else

{

GridButtonForward.Style["cursor"] = "pointer";

GridButtonForward.ImageUrl = UrlNext;

GridButtonForward.OnClientClick = string.Empty;

GridButtonLastPage.Style["cursor"] = "pointer";

GridButtonLastPage.ImageUrl = UrlLast;

GridButtonLastPage.OnClientClick = string.Empty;

}

catch (Exception ex)

{

}

#endregion /* public methods */

}

Default2.aspx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

using System.Data;

using System.Data.SqlClient;

using System.Collections;

using System.Configuration;

using System.Data.OleDb;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Init(object sender, EventArgs e)

{

RadGridPagerItemTemplate pagerTemplate = new RadGridPagerItemTemplate();

pagerTemplate.TextCalendarGridPage = "Page";

pagerTemplate.TextOf = "of";

pagerTemplate.TextOutOf = "out of";

pagerTemplate.TextCalendarGridItem = "item";

pagerTemplate.TextCalendarGridItems = "items";

pagerTemplate.TextFirst = "First Page";

pagerTemplate.TextRewind = "Fast Backward";

pagerTemplate.TextPrevious = "Back";

pagerTemplate.TextNext = "Next";

pagerTemplate.TextFastForward = "Fast Forward";

pagerTemplate.TextLast = "Last Page";

pagerTemplate.TextSelectAll = "Select All";

pagerTemplate.TextUnselectAll = "Unselect All";

pagerTemplate.TextDeleteSelected = "Delete Selected";

//ImageUrls

pagerTemplate.UrlFirst = @"Images\16_ArrowLeft_Navigation_Beginning_activated.gif";

pagerTemplate.UrlPrevious = @"Images\16_ArrowLeft_Navigation_activated.gif";

pagerTemplate.UrlRewind = @"Images\16_ArrowsLeft_Navigation_activated.gif";

pagerTemplate.UrlNext = @"Images\16_ArrowRight_Navigation_activated.gif";

pagerTemplate.UrlFastForward = @"Images\16_ArrowsRight_Navigation_activated.gif";

pagerTemplate.UrlLast = @"Images\16_ArrowRight_Navigation_End_activated.gif";

pagerTemplate.UrlFirstDisabled = @"Images\16_ArrowLeft_Navigation_Beginning_deactivated.gif";

pagerTemplate.UrlPreviousDisabled = @"Images\16_ArrowLeft_Navigation_deactivated.gif";

pagerTemplate.UrlRewindDisabled = @"Images\16_ArrowsLeft_Navigation_deactivated.gif";

pagerTemplate.UrlNextDisabled = @"Images\16_ArrowRight_Navigation_deactivated.gif";

pagerTemplate.UrlFastForwardDisabled = @"Images\16_ArrowsRight_Navigation_deactivated.gif";

pagerTemplate.UrlLastDisabled = @"Images\16_ArrowRight_Navigation_End_deactivated.gif";

pagerTemplate.UrlSelectAll = @"Images\16_Document_Document_Document_Checkmark_activated.gif";

pagerTemplate.UrlUnselectAll = @"Images\16_Document_Document_Document_Checkboxunselected_activated.gif";

pagerTemplate.UrlDeleteActivated = @"Images\16_Document_X_activated.gif";

pagerTemplate.UrlDeleteDeactivated = @"Images\16_Document_X_deactivated.gif";

pagerTemplate.GridButtonSelectAll.ImageUrl = pagerTemplate.UrlSelectAll;

pagerTemplate.GridButtonUnselectAll.ImageUrl = pagerTemplate.UrlUnselectAll;

pagerTemplate.GridButtonDeleteSelected.ImageUrl = pagerTemplate.UrlDeleteActivated;

RADGRID1.MasterTableView.PagerTemplate = pagerTemplate;

}

protected void Page_Load(object sender, EventArgs e)

{

}

protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

//<Columns>

//                        <telerik:GridBoundColumn DataField="ProductID" HeaderText="ProductID" SortExpression="ProductID"

// UniqueName="ProductID">

// </telerik:GridBoundColumn>

//                        <telerik:GridBoundColumn DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice"

// UniqueName="UnitPrice">

// </telerik:GridBoundColumn>

// </Columns>

DataTable dtAppointments = new DataTable();

dtAppointments.Columns.Add(new DataColumn("ProductID"));

dtAppointments.Columns.Add(new DataColumn("UnitPrice"));

System.Random rand = new System.Random(1000);

for (int i = 0; i < 50; i++) {

DataRow drAppointment = dtAppointments.NewRow();

drAppointment["ProductID"] = Guid.NewGuid().ToString();

drAppointment["UnitPrice"] = rand.Next(100, 10000).ToString();

dtAppointments.Rows.Add(drAppointment);

}

RADGRID1.DataSource = dtAppointments;

}

Default2.aspx

<%@ Page Language="C#" AutoEventWireup="true" Inherits="_Default" Codebehind="Default2.aspx.cs" %>

<%@ 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 id="Head1" runat="server">

<title></title>

</head>

<body>

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

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

</telerik:RadScriptManager>

<telerik:RadSplitter runat="server" ID="RS1" Width="820px">

<telerik:RadPane ID="gridPane" runat="server" Height="810px" Scrolling="None">

<telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22px">

<telerik:RadSlidingPane ID="RadSlidingPane1" Title="Pane1" runat="server" Width="800px"

MinWidth="100">

<telerik:RadGrid runat="server" ID="RADGRID1" OnNeedDataSource="RadGrid1_NeedDataSource" AllowPaging="true"

PageSize="10">

<PagerStyle Mode="NumericPages" Position="Top" AlwaysVisible="true"/>

<MasterTableView AutoGenerateColumns="False" OnNeedDataSource="RadGrid1_NeedDataSource">

<%--<PagerTemplate>

<asp:LinkButton ID="LinkButton1" runat="server" CommandName="Page" CausesValidation="false"

CommandArgument="Prev">Prev</asp:LinkButton>

<asp:LinkButton ID="LinkButton4" runat="server" CommandName="Page" CausesValidation="false"

CommandArgument="Next">Next</asp:LinkButton>

</PagerTemplate>--%>

<Columns>

<telerik:GridBoundColumn DataField="ProductID" HeaderText="ProductID" SortExpression="ProductID"

UniqueName="ProductID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice"

UniqueName="UnitPrice">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"

ProviderName="System.Data.SqlClient" SelectCommand="SELECT Top 50 [UnitPrice], [ProductID] FROM [Order Details]">

</asp:SqlDataSource>

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</telerik:RadPane>

</telerik:RadSplitter>

</form>

</body>

</html>

I hope you can reproduce the error :-).

Greetings,
Richard Huber.

answered on 04 Apr 2012, 02:09 PM

WebSite2.zip

Hello Richard,

In your pager template there are properties, which return image buttons(for example:GridButtonFirstPage), and they are initialized only one, when the constructor is called, but the RadGrid always creates two instances of the pager template. So, when the buttons are initialized once for the bottom pager, RadGrid does not initialize them again for the top pager in order to prevent an error to be thrown, because there are controls with identical IDs on the page. Therefore, it is necessary to create the image buttons every time when the pager template is initialized (in InInstantiateln method), but not in constructor. Attached, you can find a sample project, which demonstrates how this could be achieved.

Greetings,
Milena
the Telerik team

answered on 04 Apr 2012, 07:48 PM

Hello Milena,
ah that's explaining it. I did not know that the same pager template is used twice, but since you are mention it, I now understand it why the debugger run always twice in the Instantiate method of my pager template class.

So one question answered and a new one rising :-).

As you surley saw in my example code I try to use some command buttons together with the paging buttons. These are the buttons 'select', 'unselect' and 'delete'. My idea is to use different icons for activated and deactivated buttons. For example if someone clicks one line of the grid, the unselect and the delete button should change into an activated mode and should change their icon. To avoid postbacks to the server I would like to implement this actions as javascript methods.

In fact I already wrote some javascript methods to achieve this behavior. My idea was to save the urls for the different icons in some hidden fields (to get them on the client) and to enable/disable the buttons with their IDs, e.g. with the following javascript method:

//

// sets the new img url (value of the html object with ID HFImgUrlID), the disabled property and the cursor style of the

ImageButton of the CommandItemTemplate

// of the RadGrid control with the given ID (ID is set in code behind, so use $telerik.findElement(document, <ID>) to

// get the ImageButton html element!!!

function EnableDisableGridCommandItem(imgButtonID, isEnabled, HFImgUrlID) {

/// <summary>Enables or Disables the ImageButton of the CommandItemTemplate and sets a new img url</summary>

/// <param name="imgButtonID" type="String">The ID of the imgButton of the CommandItemTemplate (ID which is set

in the code-behind!).</param>

/// <param name="isEnabled" type="Boolean">Flag if the ImageButton should be enabled or disabled.</param>

/// <param name="HFImgUrlID" type="String">The ID of the HiddenField with the URL for the image of the ImageButt

on.</param>

try {

var imgButton = $telerik.findElement(document, imgButtonID);

if (imgButton != null) {

try {

var hiddenField = $telerik.findElement(document, HFImgUrlID);

if (hiddenField != null) {

imgButton.src = hiddenField.value;

}

} catch (hf_error) {

alert(hf_error.message);

}

if (isEnabled == true) {

imgButton.style.cursor = 'pointer';

} else {

imgButton.style.cursor = 'default';

}

} catch (e) {

alert(e.message);

}

// end region data grid

I call this method with the ID of the custom command button of the pager template which I would like to change. Now since you are telling me that the pager template will be instantiated for the top and the bottom pager, will the javascript line 'var imgButton = $telerik.findElement(...)' work? Because really there are two buttons (one in the top pager and one in the bottom pager, at least if top and bottom paging is configured).

Or is a better idea to use different buttons for the top and the bottom pager templates? In the Instantiate() method of the pager template I have then to distiguish which container should get the template buttons (but I saw already in the c# debugger that the container parameter is really different)?

Greetings and thanks for your help,
Richard.

answered on 05 Apr 2012, 08:59 AM

Hello Milena,
I could answer my last question. If I'm using only one pager, i.e. at the top or at the button, then I can use one set of buttons and change their icons in the javascript methods. But if I use the pager both on top and on bottom, then it looks like that I will have to use two different sets of buttons. I tried it with TopAndButton without chaning the javascript methods and only the icons of the top pager will be changed by the javascript methods.

Again thanks for your help, now I can use the pager template properly (we will only use the pager at the top or at the bottom, so I will need only one set of buttons),
Richard Huber