Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / Grid / Performing postback from grid client events

Performing postback from grid client events

Article Info

Rating: 4

 

Article information

Article relates to

RadGrid

Created by

Vlad, Telerik

Last modified

March 14, 2007

Last modified by

Stephen, Telerik

 
HOW-TO
Perform postback from grid client events

SOLUTION 
Below are the main points:
  1. Hook client event/relate attribute of the control which has to perform the postback requests with javascript function (handler) 
  2. Process the postback in the code-behind of the page (managing the RaisePostBackEventHandler).

The example below presents how to perform postback on row double-click and output the clicked row CustomerID field above the grid. There are also four projects attached at the bottom of this thread which show the approach in reality (when the grid resides in a web form and user control). 

ASPX/ASCX

  <script type="text/javascript"> 
      function RowDoubleClick(index) 
      { 
        __doPostBack("<%= RadGrid1.UniqueID %>", "RowDblClicked:" + this.Rows[index].ItemIndex); 
      } 
    </script> 

C#

   protected override void RaisePostBackEvent(IPostBackEventHandler source, string eventArgument) 
    { 
        base.RaisePostBackEvent(source, eventArgument); 
 
        if (source == this.RadGrid1 && eventArgument.IndexOf("RowDblClicked") != -1) 
        { 
            GridDataItem item = RadGrid1.Items[int.Parse(eventArgument.Split(':')[1])]; 
            Response.Write(String.Format("CustomerID:{0}", item.GetDataKeyValue("CustomerID"))); 
        } 
    } 

VB.NET

 Protected Overrides Sub RaisePostBackEvent(ByVal source As IPostBackEventHandler, ByVal eventArgument As String) 
        MyBase.RaisePostBackEvent([source], eventArgument) 
 
        If ([source] Is RadGrid1) And (eventArgument.IndexOf("RowDblClicked") <> -1) Then 
            Dim item As GridDataItem = RadGrid1.Items(Integer.Parse(eventArgument.Split(":"c)(1))) 
            Response.Write([String].Format("CustomerID:{0}", item.GetDataKeyValue("CustomerID"))) 
        End If 
    End Sub  

  

Below is the code for Telerik's RadControls Prometheus version of the sample. The logic is pretty mych the same, with the exception of the fact that the control is Ajaxified via the AjaxManager, and a Label is used to display the result of the postback:

.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" 
    Culture="auto" meta:resourcekey="PageResource1" UICulture="auto" %> 
 
<%@ Register Assembly="RadGrid.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %> 
<%@ 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>Untitled Page</title> 
    <style type="text/css">  
      
      
 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server">  
 
         
 
        <asp:ScriptManager runat="server" ID="ScriptManager1">  
        </asp:ScriptManager> 
        <br /> 
        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">  
          
         <script type="text/javascript">  
          
            function rowDoubleClick(sender, eventArgs)  
            {              
            __doPostBack("<%= RadGrid1.UniqueID %>", "RowClicked:" + eventArgs.get_itemIndexHierarchical());      
            }              
      
        </script> 
        </telerik:RadScriptBlock> 
          
        &nbsp;  
        <asp:Label runat="server" ID="Label1" > 
        </asp:Label> 
        <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="AccessDataSource1" 
            GridLines="None">  
            <MasterTableView AutoGenerateColumns="False" DataKeyNames="CustomerID" DataSourceID="AccessDataSource1">  
                <RowIndicatorColumn Visible="False">  
                    <HeaderStyle Width="20px" /> 
                </RowIndicatorColumn> 
                <ExpandCollapseColumn Resizable="False" Visible="False">  
                    <HeaderStyle Width="20px" /> 
                </ExpandCollapseColumn> 
                <Columns> 
                    <telerik:GridBoundColumn DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" 
                        SortExpression="CustomerID" UniqueName="CustomerID">  
                    </telerik:GridBoundColumn> 
                    <telerik:GridBoundColumn DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" 
                        UniqueName="CompanyName">  
                    </telerik:GridBoundColumn> 
                    <telerik:GridBoundColumn DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" 
                        UniqueName="ContactName">  
                    </telerik:GridBoundColumn> 
                </Columns> 
                <EditFormSettings> 
                    <PopUpSettings ScrollBars="None" /> 
                </EditFormSettings> 
            </MasterTableView> 
              
            <ClientSettings> 
            <ClientEvents OnRowDblClick="rowDoubleClick" /> 
            </ClientSettings> 
              
        </telerik:RadGrid><asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Nwind.mdb" 
            SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName] FROM [Customers]">  
        </asp:AccessDataSource> 
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
            <AjaxSettings> 
                <telerik:AjaxSetting AjaxControlID="RadGrid1">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="Label1" /> 
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
            </AjaxSettings> 
        </telerik:RadAjaxManager> 
        
        
        
    </form> 
</body> 
</html> 
 

.cs
 protected override void RaisePostBackEvent(IPostBackEventHandler source, string eventArgument)  
    {  
        base.RaisePostBackEvent(source, eventArgument);  
 
        if (source == this.RadGrid1 && eventArgument.IndexOf("RowClicked") != -1)  
        {  
            GridDataItem item = RadGrid1.Items[int.Parse(eventArgument.Split(':')[1])];  
            Label1.Text = (String.Format("CustomerID:{0}", item.GetDataKeyValue("CustomerID")));  
        }  
    }     

.vb
Protected Overloads Overrides Sub RaisePostBackEvent(ByVal source As IPostBackEventHandler, ByVal eventArgument As String)  
    MyBase.RaisePostBackEvent(source, eventArgument)  
 
    If source = Me.RadGrid1 AndAlso eventArgument.IndexOf("RowClicked") <> -1 Then  
        Dim item As GridDataItem = RadGrid1.Items(Integer.Parse(eventArgument.Split(":"C)(1)))  
        Label1.Text = ([String].Format("CustomerID:{0}", item.GetDataKeyValue("CustomerID")))  
    End If  
End Sub 


     

Files

Comments

  • Telerik Admin , Mar 14, 2007

    Hi guys, the knowledge base article has been updated and four demo projects are enclosed at the bottom of the thread.

  • Koen Hoebeek , Apr 11, 2007

    PostBackFromClientEventsCS.zip doesn't work!!

  • Telerik Admin , Apr 23, 2007

    The project worked without issues in our local tests -please post a formal support ticket providing a step by step instructions how to recreate the failure you encountered.

  • DheepaB , May 9, 2007

    I am writing a server control which inherits from the RadGrid. How can I do it in there???

  • Telerik Admin , May 11, 2007

    The RaisePostBackEvent should be untercepted in the page holding the grid - it can not be handled internally inside the custom grid class. Hope this helps.

  • Norlando Lee , Jun 22, 2007

    How bout preventing the postback if EnablePostBackOnRowClick = true and user click a row?

  • Telerik Admin , Jun 28, 2007

    Try to prevent the postback request by cancelling the event bubbling with the approach presented in this forum post: http://www.telerik.com/community/forums/thread/b311D-mmkaa.aspx

  • Stephen , Apr 16, 2008

    Hi, Could I ask what the this.Rows[index].ItemIndex refers to. How does "this" relate to the RadGrid? Thanks

  • Telerik Admin , Apr 16, 2008

    In each client event of RadGrid Classic 'this' refers to the current active table in the grid.

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.