C# – Telerik Grid Client-Side Row Selection

ajaxasp.netctelerik

I've researched these questions thoroughly on Stackoverflow and on Telerik but still have not figured out the solution to these questions. Here's what I am trying to do. I have a RadGrid control that is databound using Linq. Based on the user's row selection I'd like to query additional information from the database and drop it into another control (let's assume that other control is a Rad Listview for the moment). I'd like to do this all clientside without having to post the whole page back to the server. Separately I'm trying to put a button on the page to send the row selection back to the server to trigger some action in the code-behind.

I'd love it if someone could show me how to do the following:

  1. Get the user row selection using Javascript and populate key values from that selection in another control (Using Telerik client-side row selection, not the usual asp.net select link)
  2. Make an Ajax request using the key value(s) from the previous question to retrieve some additional information from the database. I'm assuming that I will be using Linq on the server side to handle this request. Refresh another control to display that info.
  3. Put a button on the page to post the key value from the first question back to the server where it will be caught and stored in a variable.

I realize there's a fair amount of overlap in items 1-3 above but I hope that by breaking it out as I did I'll be better able to understand the mechanics of how client and server side code interacts in an asp.net + telerik environment.

Here are some related posts that I found helpful:

//I'd post other links my my SO reputation score does not permit me to do so

Here's some code from my page. The relevant key value from my grid is the package tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This is the Header 

     <!-- Begin Navigation --> 
     <div id="navigation"> 

           This is the Navigation        

     </div> 
     <!-- End Navigation --> 

     <!-- Begin Faux Columns --> 
     <div id="faux"> 

           <!-- Begin Left Column --> 
           <div id="leftcolumn"> 

                 This is the left column

                 <telerik:RadTreeView ID="RadTreeView1" Runat="server" Skin="Telerik">
                     <Nodes>
                         <telerik:RadTreeNode runat="server" Expanded="True" Text="My Account">
                             <Nodes>
                                 <telerik:RadTreeNode runat="server" Text="Inventory">
                                 </telerik:RadTreeNode>
                                 <telerik:RadTreeNode runat="server" Text="Protection Plan">
                                 </telerik:RadTreeNode>
                                 <telerik:RadTreeNode runat="server" Text="Addresses">
                                 </telerik:RadTreeNode>
                                 <telerik:RadTreeNode runat="server" Text="Profile">
                                 </telerik:RadTreeNode>
                                 <telerik:RadTreeNode runat="server" Text="Alert Preferences">
                                 </telerik:RadTreeNode>
                             </Nodes>
                         </telerik:RadTreeNode>
                         <telerik:RadTreeNode runat="server" Text="Supplies">
                         </telerik:RadTreeNode>
                     </Nodes>
                 </telerik:RadTreeView>

           </div> 
           <!-- End Left Column --> 

           <!-- Begin Content Column --> 
           <div id="content"> 

                This is the main body where the inventory stuff goes

                <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>
<script type="text/javascript">
    //Put your JavaScript code here.
</script>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<div>

    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" 
        ontabclick="RadTabStrip1_TabClick" SelectedIndex="2" AutoPostBack="True" 
        Skin="Vista">
        <Tabs>
            <telerik:RadTab runat="server" Text="Pending">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="In Storage">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Returned" Selected="True">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>


    <telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" 
        CellSpacing="0" GridLines="None" AutoGenerateColumns="False" 
        Skin="Vista" Width="654px">
        <ClientSettings>
            <Selecting AllowRowSelect="True" />
            <Scrolling AllowScroll="True" UseStaticHeaders="True" />
            <ClientEvents OnGridCreated="GridCreated" OnRowSelected="RowSelected"></ClientEvents>
        </ClientSettings>


<Columns>
    <telerik:GridClientSelectColumn FilterControlAltText="Filter column column" 
        UniqueName="column0" CommandName="SelectRow">
    </telerik:GridClientSelectColumn>
    <telerik:GridBoundColumn DataField="Tag" 
        FilterControlAltText="Filter column2 column" HeaderText="Tag" 
        UniqueName="column1">
    </telerik:GridBoundColumn>
    <telerik:GridBoundColumn DataField="Name" 
        FilterControlAltText="Filter column3 column" HeaderText="Name" 
        UniqueName="column3">
    </telerik:GridBoundColumn>
    <telerik:GridBoundColumn DataField="Received" DataType="System.DateTime" 
        EmptyDataText="Not Received" FilterControlAltText="Filter column4 column" 
        HeaderText="Received" UniqueName="column4" DataFormatString="{0:MM/dd/yy}">
    </telerik:GridBoundColumn>
    <telerik:GridBoundColumn DataField="Shipped" EmptyDataText="In Storage" 
        FilterControlAltText="Filter column5 column" HeaderText="Shipped" 
        UniqueName="column5" DataFormatString="{0:MM/dd/yy}">
    </telerik:GridBoundColumn>
    <telerik:GridRatingColumn FilterControlAltText="Filter column1 column" 
        HeaderText="Condition" ItemCount="3" UniqueName="column1">
    </telerik:GridRatingColumn>
</Columns>


        <SelectedItemStyle BackColor="White" />

Best Answer

If you are talking true client-side scripting, the grid should pass off the selection to a web service, and populate the next control via its client-side API (if the RadListView supports client-side binding, which I'm not sure that it does). It's definitely possible, but a lot more work than the solution below. However:

If you want to postback to the server anyway, why populate the listview on the client-side? Any client-side populated data is lost (because it isn't stored in viewstate), and so client-side binding doesn't help if you are posting back to the server to store a variable. The easiest way since you are doing telerik is to set the ClientSettings.EnablePostBackOnRowClick="true" on the grid, and the ClientSettings.Selecting.AllowRowSelect="true" in markup or code. Then, Wrap these two controls in a RadAjaxPanel, so that when the postback happens, you can handle it all through code.

When clicking on the row of the grid, it posts back, the events all work on the server side, the value is stored in your variable (as long as its stored in session, cache, viewstate), and then you can populate the listview.

HTH.

Related Topic