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

[Solved] Sorting a column with a graphical image doesn't fire an Ajax request

2 Answers 98 Views

Grid

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

Tomasz M.Lipiński asked on 29 May 2012, 12:24 PM

Hi,

Let's consider the following markup:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">

<ClientEvents OnRequestStart="requestStart" />

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div>

<telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" AutoGenerateColumns="False" GridLines="None"

OnNeedDataSource="RadGrid1_NeedDataSource" OnSortCommand="RadGrid1_SortCommand">

<MasterTableView>

<Columns>

<telerik:GridBoundColumn DataField="Name" HeaderText="Name" SortExpression="Name" UniqueName="colTextual" />

<telerik:GridBoundColumn DataField="Name" HeaderImageUrl="Images/someImage.gif" SortExpression="Name"

UniqueName="colGraphical" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">

</telerik:RadAjaxLoadingPanel>

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

<script type="text/javascript">

function requestStart(sender, eventArgs) {

alert("requestStart");

}

</script>

</telerik:RadCodeBlock>

And a bit of code-behind:

protected void RadGrid1_SortCommand(object source, Telerik.Web.UI.GridSortCommandEventArgs e)

{

RadAjaxManager m = RadAjaxManager.GetCurrent(Page);

bool inAjax = m == null ? false : m.IsAjaxRequest;

}

The grid has two columns. The only difference between them is that one of them has a textual header, the other one - a graphical header. But the columns, when clicked to sort, behave differently:
- the textual one (colTextual): on the client side calls the requestStart handler (displays the alert); on the server side the Ajax manager reports being inside an Ajax request (isAjax == true)
- the graphical column (colGraphical): doesn't call the client side handler; the Ajax manager reports that it is not inside an Ajax request (isAjax == false)

The interesting thing is that the loading panel is displayed in both cases.

What should I do to make colGraphical column to behave in the same way as colTextual?

Regards
Tomasz
PS. I'm using Q1 2010 version of RadControls for ASP.NET AJAX.

2 Answers, 1 is accepted

Accepted

answered on 30 May 2012, 07:04 PM

Tomasz:

In order to insure the AJAX request you should programmatically add to your column header an ImageButton with CommandName as 'Sort' and CommandArgument as the data field using the RadGrid1_ItemCreated server-side event to achieve this functionality. In the code below, I modified your code to use this query on the Northwind Data Base, and I used an "Apple.png" in place of the Header Text.

Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!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></title>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

</head>

<body>

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

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

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

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

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

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

</Scripts>

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">

<ClientEvents OnRequestStart="requestStart" />

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div>

<telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" AutoGenerateColumns="False"

GridLines="None" OnNeedDataSource="RadGrid1_NeedDataSource"

OnSortCommand="RadGrid1_SortCommand" onitemcreated="RadGrid1_ItemCreated">

<MasterTableView>

<Columns>

<telerik:GridBoundColumn DataField="CompanyName" ShowSortIcon="true" HeaderText="Company Name" SortExpression="CompanyName"

UniqueName="CompanyName" />

<telerik:GridBoundColumn DataField="ContactName" ShowSortIcon="true" SortExpression="ContactName" UniqueName="ContactName" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">

</telerik:RadAjaxLoadingPanel>

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

<script type="text/javascript">

function requestStart(sender, eventArgs) {

alert("requestStart");

}

</script>

</telerik:RadCodeBlock>

</form>

</body>

</html>

Default.aspx.cs:

using System;

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

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

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void RadGrid1_SortCommand(object source, Telerik.Web.UI.GridSortCommandEventArgs e)

{

RadAjaxManager m = RadAjaxManager.GetCurrent(Page);

bool inAjax = m == null ? false : m.IsAjaxRequest;

}

public DataTable GetDataTable(string query)

{

String ConnString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;

SqlConnection conn = new SqlConnection(ConnString);

SqlDataAdapter adapter = new SqlDataAdapter();

adapter.SelectCommand = new SqlCommand(query, conn);

DataTable myDataTable = new DataTable();

conn.Open();

try

{

adapter.Fill(myDataTable);

}

finally

{

conn.Close();

}

return myDataTable;

}

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

{

RadGrid1.DataSource = GetDataTable("SELECT CustomerID, CompanyName, ContactName FROM Customers");

}

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)

{

if (e.Item is GridHeaderItem)

{

GridHeaderItem header = (GridHeaderItem)e.Item;

header.Height = Unit.Pixel(20);

ImageButton imgbtn = new ImageButton();

imgbtn.ImageUrl = "~/Images/Apple.png";

imgbtn.CommandName = "Sort";

imgbtn.CommandArgument = "ContactName";

imgbtn.ID = "imgCompanyName";

header["ContactName"].Controls.Add(imgbtn);

}

See this in action at http://screencast.com/t/cqdyhhW5Mte

Hope this helps!