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

How to handle AJAX requests for nested controls

1 Answer 93 Views

PanelBar

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

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">

<html xmlns="http://www.w3.org/1999/xhtml" >

<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?

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

How to handle AJAX requests for nested controls

1 Answer, 1 is accepted