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

RadPanel add client events programatically

4 Answers 128 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Web Services
Top achievements
Rank 2
Web Services asked on 05 Aug 2009, 10:16 PM
I have a rad panel that you can veiw here. http://alpha.clickablecommunity.com/ I populate this from a datatable in the code behind. What I need to do is set ever individual sub node's client clicked, and checkbox clicked event in the code behind. Basically when you expand one of the main nodes and click it, I want the checkbox to become checked and I want a specific js function to run. Also, if they click the checkbox associated with the node, I want the same js function to run. It is kind of something like this
category1
    child 1
    child 2
category2
    child 1
    child 2

Those have checkboxes and I would like to be able to run a function myFunction('someParameter'); on the check box click or on the element click itself. If the user clicks child 1 I would like the checkbox to become checked. I have to do this on the server side because I have to pass in someParameter dynamically from a db. I am completely lost as how to even approach this. Here is my code. Thanks,

<%

@ Master Language="VB" AutoEventWireup="false" CodeBehind="MasterPage.master.vb"

 

 

Inherits="ClickableCommunity.MasterPage" %>

 

<%

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

 

<

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

 

<%

@ import namespace="System.Data" %>

 

<%

@ import namespace="System.Data.Sql" %>

 

<%

@ import namespace="System.Data.SqlClient" %>

 

<%

@ import namespace="Telerik.Web.UI" %>

 

<

script runat="server">

 

 

 

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

 

 

 

If Not Page.IsPostBack Then

 

 

 

Dim tree As RadTreeView = DirectCast(RadPanelBar1.FindItemByText("Events").Items(0).FindControl("RadTreeView1"), RadTreeView)

 

 

'here is where the error is. it is saying that

 

 

'createtable is null

 

tree.DataSource = CreateTable()

tree.DataFieldID =

"ID"

 

tree.DataFieldParentID =

"ParentID"

 

tree.DataTextField =

"Text"

 

tree.DataBind()

 

 

End If

 

 

End Sub 'page_load

 

 

 

'this function creates a datatable for the rad

 

 

'tree that is in the events panel

 

 

Private Function CreateTable() As DataTable

 

 

'set up my connection to the database

 

 

Dim conn As New SqlConnection

 

conn.ConnectionString = ConfigurationManager.ConnectionStrings(

"connectionString").ConnectionString

 

 

Dim table As DataTable = New DataTable()

 

table.Columns.Add(

"ID")

 

table.Columns.Add(

"ParentID")

 

table.Columns.Add(

"Text")

 

 

'this is a counter for the id fields

 

 

'of the data table

 

 

Dim count As Integer = 1

 

 

 

'this adds the parent categories to the

 

 

'datatable

 

 

Dim categoryQuery As New SqlCommand

 

conn.Open()

categoryQuery.Connection = conn

categoryQuery.CommandText =

"select CategoryId, Name from categories"

 

 

Dim cdr As SqlDataReader = categoryQuery.ExecuteReader()

 

 

While cdr.Read()

 

 

 

If (cdr.Item(0).ToString <> "") Then

 

 

table.Rows.Add(

New String() {count.ToString, Nothing, cdr.Item(1).ToString})

 

 

'we have to increment count to keep an id for the data table

 

count = count + 1

 

 

End If

 

 

 

End While 'while cdr.Read()

 

conn.Close()

conn.Open()

 

'this adds the events with their parent category

 

 

'id to the datatable

 

 

Dim eventQuery As New SqlCommand

 

eventQuery.Connection = conn

eventQuery.CommandText =

"SELECT eventid, FK_CategoryID, name from events"

 

 

Dim edr As SqlDataReader = eventQuery.ExecuteReader()

 

 

While edr.Read()

 

 

 

If (edr.Item(0).ToString <> "") Then

 

 

table.Rows.Add(

New String() {count.ToString(), edr.Item(1).ToString, edr.Item(2).ToString})

 

 

'we have to increment count to keep an id for the data table

 

count = count + 1

 

 

End If

 

 

 

End While 'while edr.Read()

 

 

 

Return table

 

 

End Function 'CreateGenreTable

 

 

</

script>

 

<

head runat="server">

 

 

<link href="ClickableCommunity.css" rel="stylesheet" type="text/css" />

 

 

<title></title>

 

 

<asp:ContentPlaceHolder ID="head" runat="server">

 

 

</asp:ContentPlaceHolder>

 

</

head>

 

<

body id="MasterBody" runat="server" style="margin: 0px; height: 100%; overflow: hidden;"

 

 

scroll="no">

 

 

<form id="Form1" method="post" runat="server" style="height: 100%">

 

 

<asp:ScriptManager ID="ScriptManager1" runat="server">

 

 

</asp:ScriptManager>

 

 

<br />

 

 

<asp:ContentPlaceHolder ID="header" runat="server">

 

 

</asp:ContentPlaceHolder>

 

 

<div id="topDiv">

 

 

<div id="image" class="topDivImage">

 

 

<img src="images\logo.jpg" alt="Clickable Community Logo" width="200" height="75" />

 

 

</div>

 

 

<div id="viewMenu" class="viewMenu">

 

Menu goes here

 

</div>

 

 

</div>

 

 

<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" Width="100%"

 

 

Height="100%" CssClass="AllContent">

 

 

<telerik:RadPane ID="LeftRadPane1" runat="server" Width="220px" Scrolling="Both"

 

 

BorderStyle="None" BorderSize="0">

 

 

<div id="leftPanel">

 

 

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Web20" ExpandMode="SingleExpandedItem"

 

 

AllowCollapseAllItems="false" Width="220px">

 

 

<CollapseAnimation Type="None" Duration="100"></CollapseAnimation>

 

 

<Items>

 

 

<telerik:RadPanelItem runat="server" Text="Events" Expanded="true">

 

 

<Items>

 

 

<telerik:RadPanelItem runat="server">

 

 

<ItemTemplate>

 

 

<telerik:RadTreeView ID="RadTreeView1" runat="server" Skin="Web20"

 

 

CssClass="leftPanelContent" CheckBoxes="true">

 

 

</telerik:RadTreeView>

 

 

</ItemTemplate>

 

 

</telerik:RadPanelItem>

 

 

</Items>

 

 

</telerik:RadPanelItem>

 

 

<telerik:RadPanelItem runat="server" Text="Search" ChildGroupCssClass="leftPanelContent">

 

 

<Items>

 

 

<telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">

 

 

</telerik:RadPanelItem>

 

 

<telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">

 

 

</telerik:RadPanelItem>

 

 

</Items>

 

 

</telerik:RadPanelItem>

 

 

<telerik:RadPanelItem runat="server" Text="Administrator" ChildGroupCssClass="leftPanelContent">

 

 

<Items>

 

 

<telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">

 

 

</telerik:RadPanelItem>

 

 

<telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">

 

 

</telerik:RadPanelItem>

 

 

</Items>

 

 

</telerik:RadPanelItem>

 

 

</Items>

 

 

<ExpandAnimation Type="None" Duration="100"></ExpandAnimation>

 

 

</telerik:RadPanelBar>

 

 

</div>

 

 

</telerik:RadPane>

 

 

<telerik:RadSplitBar runat="server" ID="RadSplitBar2" CollapseMode="Forward" EnableResize="false"

 

 

ForeColor='Green' />

 

 

<telerik:RadPane ID="RightRadPane1" runat="server" CssClass="RightPanelPadding" Scrolling="Both"

 

 

BorderStyle="None" BorderSize="0">

 

 

<asp:ContentPlaceHolder ID="MainContent" runat="server">

 

 

</asp:ContentPlaceHolder>

 

 

</telerik:RadPane>

 

 

</telerik:RadSplitter>

 

 

</form>

 

</

body>

 

</

html>

 

4 Answers, 1 is accepted

Sort by
0
Accepted
Peter
Telerik team
answered on 10 Aug 2009, 10:40 AM
Hi,

Please, try the following and let us know if this is the functionality which you need:

 <asp:ScriptManager ID="ScriptManager1" runat="server">  
    </asp:ScriptManager> 
 
    <script type="text/javascript">  
        function OnClientNodeClicking(sender, eventArgs) {  
            var checked = eventArgs.get_node().get_checked();  
            var node = eventArgs.get_node();  
            node.set_checked(!checked);  
            if (!checked)  
                customFunction(node);  
        }  
        function OnClientNodeChecked(sender, eventArgs) {  
            var checked = eventArgs.get_node().get_checked();  
            var node = eventArgs.get_node();  
            if (checked)  
                customFunction(node);  
        }  
        function customFunction(node) {  
            if (node) {  
                alert(node.get_text());  
            }  
        }  
    </script> 
 
    <telerik:RadPanelBar ID="RadPanelBar1" runat="server">  
        <Items> 
            <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1">  
                <Items> 
                    <telerik:RadPanelItem runat="server" > 
                        <ItemTemplate> 
                            <telerik:RadTreeView ID="RadTreeView1" OnClientNodeClicking="OnClientNodeClicking" 
                                OnClientNodeChecked="OnClientNodeChecked" CheckBoxes="true" runat="server">  
                                <Nodes> 
                                    <telerik:RadTreeNode runat="server" Text="Root RadTreeNode1">  
                                        <Nodes> 
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">  
                                            </telerik:RadTreeNode> 
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">  
                                            </telerik:RadTreeNode> 
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 3">  
                                            </telerik:RadTreeNode> 
                                        </Nodes> 
                                    </telerik:RadTreeNode> 
                                    <telerik:RadTreeNode runat="server" Text="Root RadTreeNode2">  
                                        <Nodes> 
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">  
                                            </telerik:RadTreeNode> 
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">  
                                            </telerik:RadTreeNode> 
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 3">  
                                            </telerik:RadTreeNode> 
                                        </Nodes> 
                                    </telerik:RadTreeNode> 
                                </Nodes> 
                            </telerik:RadTreeView> 
                        </ItemTemplate> 
                    </telerik:RadPanelItem> 
                </Items> 
            </telerik:RadPanelItem> 
            <telerik:RadPanelItem runat="server" Text="Root RadPanelItem2">  
                <Items> 
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">  
                    </telerik:RadPanelItem> 
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">  
                    </telerik:RadPanelItem> 
                </Items> 
            </telerik:RadPanelItem> 
            <telerik:RadPanelItem runat="server" Text="Root RadPanelItem3">  
                <Items> 
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">  
                    </telerik:RadPanelItem> 
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">  
                    </telerik:RadPanelItem> 
                </Items> 
            </telerik:RadPanelItem> 
        </Items> 
    </telerik:RadPanelBar> 


Kind regards,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Web Services
Top achievements
Rank 2
answered on 10 Aug 2009, 10:13 PM
That worked as I needed it too. Thank you very much, I could have wasted a lot of time trying to figure that one out. One last quick question, how would I loop through the child nodes if a parent were clicked to make them all checked. How do I know if a node is a child or parent? Once I do that, how do I loop through them all to check. I saw some treeview.nodes() examples but I can't seem to get them to work right. Thanks,
0
Accepted
Peter
Telerik team
answered on 11 Aug 2009, 11:14 AM
Hello,

Please, see the following help topics:

Check/Uncheck All Child Nodes
http://www.telerik.com/help/aspnet-ajax/tree_checkboxesallchildnodes.html

CheckBoxes Overview
http://www.telerik.com/help/aspnet-ajax/tree_checkboxesoverview.html

You can find if a node is parent or not using the get_level() method:
http://www.telerik.com/help/aspnet-ajax/tree_clientradtreenode.html



Sincerely yours,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Web Services
Top achievements
Rank 2
answered on 11 Aug 2009, 02:59 PM
Thanks, that was exactly what I needed. As long as I develop in .net, I will be a huge supporter of your products.
Tags
PanelBar
Asked by
Web Services
Top achievements
Rank 2
Answers by
Peter
Telerik team
Web Services
Top achievements
Rank 2
Share this question
or