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

RadGrid OnRowClick pass cell value to label without postback

3 Answers 246 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bruce McCulloch
Top achievements
Rank 1
Bruce McCulloch asked on 24 May 2010, 08:15 PM
I have a RadGrid being populated from a SQL stored proc and have set the OnRowClick event to properly show the value in an alert box...I need to know how to pass this value back to my vb.net code behind to show in a label or to use for a second query (such as customer details).

Again, I do not want a post back as I just want the label to reload or an Ajax panel.
Here is the code to handle the OnRowClick event:
function custClicked(sender, args) { 
    var grid = sender
    var MasterTable = grid.get_masterTableView(); 
    var row = MasterTable.get_dataItems()[args.get_itemIndexHierarchical()]; 
    var cell = MasterTable.getCellByColumnUniqueName(row, "COMPANY"); 
    
    alert(cell.innerHTML); 
     
 
Thanks in advance for your help!
Bruce

3 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 25 May 2010, 06:38 AM
Hello Bruce,

There are two possible ways to accomplish the functionality without page refresh.

#1:
Invoke ajaxRequest() from client side and pass the cell value as parameter. Also set the AjaxSettings accordingly.

ASPX:
 
 <
telerik:RadAjaxManager ID="RadAjaxManager1" EnableAJAX="true" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"
            <AjaxSettings> 
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1"
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1"  /> 
                    </UpdatedControls> 
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="Label1" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
            </AjaxSettings> 
 </telerik:RadAjaxManager> 


Java Script:
function  RowClick(sender, eventArgs)   
 {    
   var grid = sender;   
   var MasterTable = grid.get_masterTableView();   
   var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];     
   var cell = MasterTable.getCellByColumnUniqueName(row, "ColumnUniqueName");  
   $find("<%=RadAjaxManager1.ClientID%>").ajaxRequest(cell.innerHTML);      
 }   

VB.Net:

 Protected
 Sub RadAjaxManager1_AjaxRequest(ByVal sender As ObjectByVal e As AjaxRequestEventArgs) 
        Label1.Text = e.Argument 
 End Sub 

#2:
The other method is to access the label from clientside and set the cell value from there.

Java Script:

 
function RowClick(sender, eventArgs) 
     { 
        var grid = sender; 
        var MasterTable = grid.get_masterTableView(); 
        var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()]; 
        var cell = MasterTable.getCellByColumnUniqueName(row, "FirstName"); 
        var label = document.getElementById("Label1");//access the control 
        label.innerHTML = cell.innerHTML;//set the cell value 
     } 
 




Hope these suggestions help,

Cheers,
Shinu.





0
Bruce McCulloch
Top achievements
Rank 1
answered on 25 May 2010, 02:05 PM
Shinu,

Thank you for the reply, however, neither option is working...

When I try solution 1 I get an error:
Microsoft JScript runtime error: 'null' is null or not an object
this happens on: $find("<%=RadAjaxManager1.ClientID%>").ajaxRequest(cell.innerHTML);

Here is my full code:
VB
 <telerik:RadAjaxManager ID="RadAjaxManager1" EnableAJAX="true" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">  
    <AjaxSettings>  
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">  
            <UpdatedControls>  
                <telerik:AjaxUpdatedControl ControlID="RadGrid1"  />  
            </UpdatedControls>  
            <UpdatedControls>  
                <telerik:AjaxUpdatedControl ControlID="Label1" />  
            </UpdatedControls>  
        </telerik:AjaxSetting>  
    </AjaxSettings>  
 </telerik:RadAjaxManager> 
    <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True"  
        DataSourceID="customerDS" GridLines="None"
        <ClientSettings> 
            <Selecting AllowRowSelect="True" /> 
            <ClientEvents OnRowClick="RowClick" /> 
        </ClientSettings> 
        <MasterTableView DataSourceID="customerDS" AutoGenerateColumns="False"
        <RowIndicatorColumn> 
        <HeaderStyle Width="20px"></HeaderStyle> 
        </RowIndicatorColumn> 
        <ExpandCollapseColumn> 
        <HeaderStyle Width="20px"></HeaderStyle> 
        </ExpandCollapseColumn> 
            <Columns> 
                <telerik:GridBoundColumn DataField="Company" DefaultInsertValue=""  
                    HeaderText="Company" SortExpression="Company" UniqueName="Company"
                </telerik:GridBoundColumn> 
                <telerik:GridBoundColumn DataField="GP #" DefaultInsertValue=""  
                    HeaderText="GP #" SortExpression="GP #" UniqueName="GP #"
                </telerik:GridBoundColumn> 
                <telerik:GridBoundColumn DataField="CRMTYPE" DefaultInsertValue=""  
                    HeaderText="CRMTYPE" SortExpression="CRMTYPE" UniqueName="CRMTYPE"
                </telerik:GridBoundColumn> 
            </Columns> 
        </MasterTableView> 
    </telerik:RadGrid> 
<asp:SqlDataSource ID="customerDS" runat="server"  
    ConnectionString="<%$ ConnectionStrings:cpdbconn %>"  
        SelectCommand="SELECT Company, [GP #], CRMTYPE FROM vwMainCRMRecords WHERE ([Rep ID] = @Rep_ID) ORDER BY Company"
    <SelectParameters> 
        <asp:SessionParameter Name="Rep_ID" SessionField="CurRepID" Type="String" /> 
    </SelectParameters> 
</asp:SqlDataSource> 
<br /> 
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> 
 
VB Code Behind:
    Protected Sub RadAjaxManager1_AjaxRequest(ByVal sender As ObjectByVal e As AjaxRequestEventArgs) 
        Label1.Text = e.Argument 
    End Sub 
JS:
function RowClick(sender, eventArgs) { 
    var grid = sender; 
    var MasterTable = grid.get_masterTableView(); 
    var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()]; 
    var cell = MasterTable.getCellByColumnUniqueName(row, "Company"); 
    $find("<%=RadAjaxManager1.ClientID%>").ajaxRequest(cell.innerHTML); 
}  


When I try option 2 just through JS, I get the same error on:
label.innerHTML = cell.innerHTML;


This is driving me nuts...no idea why this wont work for me. Any help is greatly appreciated!

Thanks,
Bruce




0
Bruce McCulloch
Top achievements
Rank 1
answered on 25 May 2010, 02:52 PM
Nevermind Shinu,

I found the issue...I am using a Master page and my JS was in the wrong place... :(
Both of your solutions work now....MANY THANKS!

Bruce
Tags
Grid
Asked by
Bruce McCulloch
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Bruce McCulloch
Top achievements
Rank 1
Share this question
or