Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

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

2 Answers 49 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tomasz M.Lipiński
Top achievements
Rank 1
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

Sort by
0
Accepted
Richard
Top achievements
Rank 1
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">
<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!
0
Tomasz M.Lipiński
Top achievements
Rank 1
answered on 01 Jun 2012, 10:30 PM
Hi,

OK, that works. Thanks.

Regards
Tomasz
Tags
Grid
Asked by
Tomasz M.Lipiński
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
Tomasz M.Lipiński
Top achievements
Rank 1
Share this question
or