RadGrid OnRowClick pass cell value to label without postback

[Bruce McCulloch]

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

[Shinu]

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 Object, ByVal 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.

[Bruce McCulloch]

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 Object, ByVal 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

[Bruce McCulloch]

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