RadPanel add client events programatically

5 posts, 2 answers
  1. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 05 Aug 2009 Link to this post

    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>

     

  2. Answer
    Peter
    Admin
    Peter avatar
    6637 posts

    Posted 10 Aug 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 10 Aug 2009 Link to this post

    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,
  5. Answer
    Peter
    Admin
    Peter avatar
    6637 posts

    Posted 11 Aug 2009 Link to this post

    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.
  6. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 11 Aug 2009 Link to this post

    Thanks, that was exactly what I needed. As long as I develop in .net, I will be a huge supporter of your products.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017