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

How to handle AJAX requests for nested controls

1 Answer 40 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Condorito
Top achievements
Rank 1
Condorito asked on 30 Mar 2011, 05:15 PM
Hi,  I have a PanelBar with one RadPanelItem, which has  an itemtemplate with a RadGrid inside. Outside of the PanelBar, I have a treeview.  The behavior I want is that when an item is selected under the treeview, it causes an AJAX request that refreshes the RadGrid only inside the RadPanelItem with new data based on the treeview item the user selected without causing a full postback. 

The way I'm trying to get this to work is by capturing the onClientNodeClicking of the Treeview, I then attempt a ajaxManager.ajaxRequest call, and I can see that server-side code is executed, but for some reason nothing changes after it's done, which leads me to believe that I'm not doing something right.

Here's simplified code of what I'm trying to do:

<%@ 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">
 
<head runat="server">
    <title></title>
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script language="javascript" type="text/javascript">
 
 
    function clientNodeClicking(sender, args) {
        refreshGrid(args);
    }
 
    function clientNodeChecking(sender, args) {
        refreshGrid(args);
            }
             
   function refreshGrid(args) {
 
       InitiateAsyncRequest(args.get_node().get_value());
   }
    
    function InitiateAsyncRequest(arguments) {
        var ajaxManager = $find("<%= ramNotification.ClientID %>");
        ajaxManager.ajaxRequest(arguments);
    }
</script>
 </telerik:RadScriptBlock>
</head>
<body>
    <form id="form1" runat="server">
       <telerik:RadScriptManager ID="rsmMain" runat="server">
     </telerik:RadScriptManager>
    <div>
       <telerik:RadAjaxManager ID="ramNotification" runat="server">
            
        </telerik:RadAjaxManager>
     
      <telerik:RadPanelbar ID="rpbContactType" runat="server" Width="100%" ExpandMode="FullExpandedItem" Height="275" >
            <Items>
                <telerik:RadPanelItem Text="Address Book" Value="MainRadPanel"  Expanded="true" Selected="true">
                    <Items>
                        <telerik:RadPanelItem Value="AddressBook">
                            <ItemTemplate>
                             
                              <telerik:RadGrid ID="rgAddressBook" runat="server" Width="100%" Height="225" AllowMultiRowSelection="true" >
                                    <ClientSettings EnableRowHoverStyle="true" AllowDragToGroup="false" AllowGroupExpandCollapse="false">
                                        <Scrolling AllowScroll="True" UseStaticHeaders="true" ScrollHeight="225" />
                                            <Selecting AllowRowSelect="true" />
                                    </ClientSettings>
                                    <MasterTableView AutoGenerateColumns="false"  CommandItemDisplay="None" ClientDataKeyNames="ID, Address" DataKeyNames="ID, Address">
                                        <Columns>
                                            <telerik:GridBoundColumn DataField="ID" Display="false" UniqueName="ID"></telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="AddressName" HeaderText="Name" HeaderStyle-Width="150" ItemStyle-Width="150" ></telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="Address" HeaderText="Address"></telerik:GridBoundColumn>
                                        </Columns>
                                    </MasterTableView>
                                </telerik:RadGrid>
                             
                           </ItemTemplate>
                           </telerik:RadPanelItem>
                            
                           </Items>
                          </telerik:RadPanelItem>
                     </Items>
                      
                  </telerik:RadPanelbar>
                   
                   
         <telerik:RadTreeView ID="rtvCategories" runat="server"
            Width="100%"
            Height="125"
            CheckBoxes="true"
            CheckChildNodes="true"
            MultipleSelect="false"
            BorderStyle="None"
            BorderWidth="1px"
           OnClientNodeClicking = "clientNodeClicking"
            OnClientNodeChecking = "clientNodeChecking"
            >
 
             <Nodes>
                <telerik:RadTreeNode Value="0" Text="First Item" />
                <telerik:RadTreeNode Value="1" Text="Second Item" />
            </Nodes>
        </telerik:RadTreeView>
         
         
    </div>
    </form>
</body>
</html>

Public rgAddressBook As Telerik.Web.UI.RadGrid
    Private _IDSelected As Integer = 0
    Private Sub StatusNotificationsTest_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
        rgAddressBook = rpbContactType.FindItemByValue("MainRadPanel").Items.FindItemByValue("AddressBook").FindControl("rgAddressBook")
    End Sub
 
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 
        If Page.IsPostBack = False Then
            rgAddressBook.DataSource = GetRadGridData(_IDSelected)
        End If
    End Sub
 
    Protected Sub rgAddressBook_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs)
        rgAddressBook.DataSource = GetRadGridData(_IDSelected)
    End Sub
 
    Private Function GetRadGridData(ByVal ItemSelected As Integer) As DataTable
        GetRadGridData = New DataTable
        With GetRadGridData
            .Columns.Add("ID", GetType(Integer))
            .Columns.Add("AddressName", GetType(String))
            .Columns.Add("Address", GetType(String))
        End With
 
        Dim NewRow As DataRow = GetRadGridData.NewRow
        Select Case ItemSelected
            Case 0
                NewRow("ID") = "0"
                NewRow("AddressName") = "John Doe"
                NewRow("Address") = "johndoe@test.com"
            Case 1
                NewRow("ID") = "1"
                NewRow("AddressName") = "John Smith"
                NewRow("Address") = "Johnsmith@test.com"
        End Select
        GetRadGridData.Rows.Add(NewRow)
    End Function
 
 
    Protected Sub ramNotification_AjaxRequest(ByVal sender As Object, ByVal e As Telerik.Web.UI.AjaxRequestEventArgs) Handles ramNotification.AjaxRequest
        Dim argument As String = e.Argument
        _IDSelected = argument
        rgAddressBook.Rebind()
    End Sub

Is there an example somewhere for something similar?

1 Answer, 1 is accepted

Sort by
0
Dimitar Terziev
Telerik team
answered on 05 Apr 2011, 09:18 AM
Hello Juan,

The problem seems to be related to the fact that you are not referencing the RadGrid properly. Since it's nested in the item template of the PanelBar item, you should reference it as described in the help article here.

Best wishes,
Dimitar Terziev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
PanelBar
Asked by
Condorito
Top achievements
Rank 1
Answers by
Dimitar Terziev
Telerik team
Share this question
or