Panelbar height isn't correct.

10 posts, 0 answers
  1. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 02 Nov 2009 Link to this post

    I have a rad tree within a rad panel you can see here http://alpha.clickablecommunity.com/. If you expand enough nodes, it will run out of sight. I don't really know where the height is coming from. Here is the control page that contains the left panel.

    <%@ Control Language="vb" AutoEventWireup="false" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Import Namespace="System.Data.Sql" %>
    <%@ Import Namespace="System.Data.SqlClient" %>
    <%@ Import Namespace="Telerik.Web.UI" %>

    <script runat="server">
        Dim connection As String = ConfigurationManager.ConnectionStrings("connectionString").ConnectionString.ToString
        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)
                tree.DataSource = CreateTable()
                tree.DataFieldID = "ID"
                tree.DataFieldParentID = "ParentID"
                tree.DataTextField = "Text"
                tree.DataValueField = "Value"
                tree.DataBind()
                            
                Dim attractionsTree As RadTreeView = DirectCast(RadPanelBar1.FindItemByText("Attractions").Items(0).FindControl("attractionsTree"), RadTreeView)
                attractionsTree.DataSource = CreateAttractionsTable()
                attractionsTree.DataFieldID = "ID"
                attractionsTree.DataFieldParentID = "ParentID"
                attractionsTree.DataTextField = "Text"
                attractionsTree.DataValueField = "Value"
                attractionsTree.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")
            table.Columns.Add("Value")

            '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, ParentId from categories where type='event' order by name"
            Dim cdr As SqlDataReader = categoryQuery.ExecuteReader()
            While cdr.Read()

                If (cdr.Item(2) = 0) Then
                        
                    table.Rows.Add(New String() {cdr.Item(0).ToString(), Nothing, cdr.Item(1).ToString, _
                              ("Category;;;" & cdr.Item(0).ToString())})
                        
                Else
                    
                    table.Rows.Add(New String() {cdr.Item(0).ToString(), cdr.Item(2).ToString, cdr.Item(1).ToString, _
                              ("Category;;;" & cdr.Item(0).ToString())})
                        
                End If


            End While 'while cdr.Read()
            conn.Close()

            'this adds the events with their parent category
            'id to the datatable
            Dim eventQuery As SqlCommand = New SqlCommand("returnAllEvents", conn)
            eventQuery.CommandType = CommandType.StoredProcedure
            
            conn.Open()
            eventQuery.Connection = conn
            eventQuery.CommandType = CommandType.StoredProcedure
            Dim edr As SqlDataReader = eventQuery.ExecuteReader()
            
            While edr.Read()

                If (edr.Item(0).ToString <> "") Then
                    
                    Dim stopTime As String
                    
                    'we have to check if the stop time is null because that
                    'changes how we will add it in the description.
                    If (edr.Item(8).ToString = "") Then
                        
                        stopTime = ""
                        
                    Else
                        
                        stopTime = "<br>End Time: " & edr.Item(8)
                        
                    End If 'if edr.Item(8)

                    
                    '0 eventid, 1 FK_CategoryID, 2 latitude, 3 longitude, 4 events.name, 5 description, 6 businesses.name,
                    '7 starttime, 8 stoptime, 9 locations.street, 10 locations.city, 11 locations.state, 12 locations.zip
                    
                    table.Rows.Add(New String() {"child" & edr.Item(0).ToString, edr.Item(1).ToString, edr.Item(4).ToString, _
                                                edr.Item(2).ToString & ";;;" & edr.Item(3).ToString & ";;;" & _
                                                "<span class='mapPopupText'>Event: " & edr.Item(4) & "<br />Details: " & _
                                                edr.Item(5) & "<br />When: " & edr.Item(7) & "<br />At: " & _
                                                "<a href = '" & edr.Item(14) & "' target='_blank'> " & _
                                                edr.Item(6) & "</a>. " & edr.Item(9) & " " & edr.Item(10) & ", " & _
                                                edr.Item(11) & " " & edr.Item(12) & "<br />Contact: " & _
                                                edr.Item(13) & " - <a href = '" & edr.Item(14) & "' target='_blank'>" & _
                                                edr.Item(14) & "</a></span>" & ";;;event"})

                End If

            End While 'while edr.Read()

            Return table

        End Function 'CreateTable
        
        'this function creates a datatable for the rad
        'tree that is in the attractions panel
        Private Function CreateAttractionsTable() 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")
            table.Columns.Add("Value")

            '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 where type='attraction' order by name"
            Dim cdr As SqlDataReader = categoryQuery.ExecuteReader()
            While cdr.Read()

                If (cdr.Item(0).ToString <> "") Then
                    
                    
                    table.Rows.Add(New String() {cdr.Item(0).ToString(), Nothing, cdr.Item(1).ToString, _
                                  ("Attraction;,;" & cdr.Item(0).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()

            'this adds the events with their parent category
            'id to the datatable
            Dim eventQuery As SqlCommand = New SqlCommand("getAttractionInfo", conn)
            eventQuery.CommandType = CommandType.StoredProcedure
            
            conn.Open()
            eventQuery.Connection = conn
            eventQuery.CommandType = CommandType.StoredProcedure
            Dim edr As SqlDataReader = eventQuery.ExecuteReader()
            
            
            
            While edr.Read()

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

                    
                    '0 id 1fk catid     2 name 3 lat 4 lon     5 website 6 phone 7 street 8 city 9 state 10 zip 11 catname 12 desc
                    
                    table.Rows.Add(New String() {"attChild" & edr.Item(0).ToString, edr.Item(1).ToString, edr.Item(2).ToString, _
                                                edr.Item(3).ToString & ";;;" & edr.Item(4).ToString & ";;;" & _
                                                "<span class='mapPopupText'>Name: " & edr.Item(2) & "<br />Type: " & _
                                                edr.Item(11) & "<br />Description: " & edr.Item(12) & "<br />" & _
                                                "Address:" & edr.Item(7) & " " & edr.Item(8) & _
                                                ", " & edr.Item(9) & " " & edr.Item(10) & "<br />Phone: " & edr.Item(6) & _
                                                "<br /><a href = '" & edr.Item(5) & "' target='_blank'> " & _
                                                edr.Item(5) & "</a></span>" & ";;;attraction"})

                End If

            End While 'while edr.Read()

            Return table

        End Function 'CreateAttractionsTable

        'this function is activated on the search button click
        'it calls two data table create functions one for
        'the results of an events search
        'and one for the results of the attractions search
        Protected Sub searchButtonClick(ByVal sender As Object, ByVal e As System.EventArgs)
            'the panel bar instance
            Dim panelBar As New RadPanelItem
            panelBar = RadPanelBar1.FindItemByText("Search")
            
            'call the function to create the data table
            Dim resultsTable As DataTable = CreateEventsTable()
            
            If (resultsTable.Rows.Count > 0) Then
                For Each row As DataRow In resultsTable.Rows
                                
                    Dim tempItem As New RadPanelItem()
                    tempItem.CssClass = "searchResultsText"
                    tempItem.Text = row.Item(0)
                    tempItem.Value = row.Item(1)
                    panelBar.Items.Add(tempItem)
                    
                Next
                
            Else
                
                Dim tempItem As New RadPanelItem()
                tempItem.CssClass = "searchResultsText"
                tempItem.Text = "Sorry you search did not return any <br>results." & _
                          " Please try again."
                tempItem.Value = "no results"
                panelBar.Items.Add(tempItem)
                            
            End If 'if resultsTalbe.Rows.count
                
                            
        End Sub 'searchbutton click
        
        Private Function CreateEventsTable() As DataTable

            
            'create the table
            Dim table As DataTable = New DataTable()
            table.Columns.Add("text")
            table.Columns.Add("value")
            
            'set the output css class
            Dim output As String = ""
            
            'the panel bar instance
            Dim panelBar As New RadPanelItem
            panelBar = RadPanelBar1.FindItemByText("Search")
            
            'the textbox input
            Dim textbox As RadTextBox = DirectCast(RadPanelBar1.FindItemByText("Search").Items(0).FindControl("searchInputTextBox"), RadTextBox)
            
            'we need to remove any of the child items
            'so we go through all of the child items
            For Each childItem As RadPanelItem In RadPanelBar1.GetAllItems

                'if this has some sort of value
                'then we remove it because it was
                'a child that was added by the search
                'function
            
                If (childItem.Value <> "") Then

                    childItem.Visible = False

                End If 'if childItem
                
            Next
            
            'my sql connection
            Dim myConn As New Data.SqlClient.SqlConnection(connection)

            'the name of the stored procedure
            Dim strSQL As String = "searchForEvents"

            Dim returnCommand As New Data.SqlClient.SqlCommand(strSQL, myConn)

            'add the parameters
            returnCommand.Parameters.AddWithValue("@searchString", "%" & textbox.Text.ToString & "%")

            'tell the system it is a stored procedure
            returnCommand.CommandType = CommandType.StoredProcedure

            Try
                myConn.Open()
                Dim dr As SqlDataReader = returnCommand.ExecuteReader()
                
                'if we have stuff to add
                If (dr.HasRows) Then
                                                    
                    While dr.Read()
                        
                        Dim stopTime As String
                    
                        'we have to check if the stop time is null because that
                        'changes how we will add it in the description.
                        If (dr.Item(8).ToString = "") Then

                            stopTime = ""

                        Else

                            stopTime = "<br>End Time: " & dr.Item(8).ToString

                        End If 'if edr.Item(8)
                        
                        Dim tempValue As String = dr.Item(2).ToString & "***" & dr.Item(3).ToString & "***" & _
                                                "<span class='mapPopupText'>Event: " & dr.Item(4) & "<br />Details: " & _
                                                dr.Item(5) & "<br />When: " & dr.Item(7) & "<br />At: " & _
                                                dr.Item(6) & "<br />" & dr.Item(9) & " " & dr.Item(10) & ", " & _
                                                dr.Item(11) & " " & dr.Item(12) & "<br /></span>***event"
                        table.Rows.Add(New String() {dr.Item(13) & " - " & dr.Item(4), tempValue})
                        
                    End While 'while dr.read()        
                
                End If
                
            Catch ex As Exception
                
                Dim tempItem As New RadPanelItem()
                tempItem.CssClass = "searchResultsText"
                tempItem.Text = "Oops, there was an error, please try <br>again."
                panelBar.Items.Add(tempItem)
                          
            End Try
            
            myConn.Close()
            
            '*****************************************************************************************************
            '*****************************************************************************************************
            'now we will search the attractions table
            'the name of the stored procedure
            Dim strAtt As String = "searchForAttractions"

            Dim attractionCommand As New Data.SqlClient.SqlCommand(strAtt, myConn)

            'add the parameters
            attractionCommand.Parameters.AddWithValue("@searchString", "%" & textbox.Text.ToString & "%")

            'tell the system it is a stored procedure
            attractionCommand.CommandType = CommandType.StoredProcedure

            Try
                myConn.Open()
                Dim dr As SqlDataReader = attractionCommand.ExecuteReader()
                
                'if we have stuff to add
                If (dr.HasRows) Then
                                                    
                    While dr.Read()
                   
                        '0 name, 1 website, 2 phone, 3 desc, 4 street, 5 city, 6 state, 7 zip, 8 lat, 9 lon, 10 catname
                        Dim tempValue As String = dr.Item(8) & "***" & dr.Item(9) & "***" & _
                                                "<span class='mapPopupText'>Name: " & dr.Item(0) & "<br />Type: " & _
                                                dr.Item(10) & "<br />Description: " & dr.Item(3) & "<br />Address: " & _
                                                dr.Item(4) & " " & dr.Item(5) & ", " & dr.Item(6) & " " & _
                                                dr.Item(7) & "<br />Phone: " & dr.Item(2) & "<br /><a href = '" & _
                                                dr.Item(1) & "'>" & dr.Item(1) & "</a></span>***attraction"
                        table.Rows.Add(New String() {dr.Item(10) & " - " & dr.Item(0), tempValue})
                        
                    End While 'while dr.read()        
                
                End If
                
            Catch ex As Exception
                
                Dim tempItem As New RadPanelItem()
                tempItem.CssClass = "searchResultsText"
                tempItem.Text = "Oops, there was an error, please try <br>again."
                panelBar.Items.Add(tempItem)
                          
            End Try
            
            myConn.Close()
            Return table
            
        End Function 'CreateEventsTable
        
    </script>
    <script type="text/javascript">

        //these two arrays are for the markers that
        //are added by the tree view (checkboxes)
        arrOfMarkers = new Array();
        arrOfDesc = new Array();

        //these two arrays are for the markers that are
        //added by the search
        arrOfLinkMarkers = new Array();
        arrOfLinkDesc = new Array();

        //this array keeps all of the markers
        //to set the zoom level
        arrOfAllMarkers = new Array();
        
        //this function is called when they click the link
        //and not when they click the checkbox
        //it determines whether or not they clicked a checked node
        //and also whether or not they clicked a parent or child node
        function OnClientNodeClicking(sender, eventArgs) {

            //this is the current checked state of the node
            var checked = eventArgs.get_node().get_checked();

            //this is the current node
            var node = eventArgs.get_node();
            
            //set the node to the state that it is not currently in
            //basically this will mirror the effect of checking the node
            node.set_checked(!checked);

            //since the node state has changed we have to
            //redefine checked
            checked = eventArgs.get_node().get_checked();
            
            //this is the child node
            var childNodes = eventArgs.get_node().get_nodes();

            //this is the node level
            var nodeLevel = node.get_level();

            //split the value
            var tempValue = node.get_value();

            //if they clicked the node
            if (checked) {

                //if they clicked a parent node
                if (nodeLevel == 0) {

                    UpdateAllChildren(childNodes, checked);
            
                } //if tempValue
                
                //they clicked a child node
                else {
                    UpdateAllChildren(childNodes, checked);
                    //addMarker(tempValue);
                }//else

            } //if checked

            //they didn't check the node
            else {
                //if they clicked a parent node
                if (nodeLevel == 0) {

                    UpdateAllChildren(childNodes, checked);

                } //if tempValue

                //they clicked a child node
                else {
                    UpdateAllChildren(childNodes, checked);
                    //removeMarker(tempValue);
                } //else
            } //else   
        }//OnclientnodeClicking

        //this function is called when they click the checkbox
        //and not when they click the link
        //it determines whether or not they checked a checked node
        //and also whether or not they checked a parent or child node
        function OnClientNodeChecked(sender, eventArgs) {

            //this is the current checked state of the node
            var checked = eventArgs.get_node().get_checked();   
            
            //this is the current node
            var node = eventArgs.get_node();
            
            //this is the child node
            var childNodes = eventArgs.get_node().get_nodes();

            //this is the node level
            var nodeLevel = node.get_level();
                    
            //split the value
            var tempValue = node.get_value();
                    
            //if they checked a node
            if (checked) {
                
                //if they checked a parent node
                if(nodeLevel == 0){

                    UpdateAllChildren(childNodes, checked);
                
                }//if tempValue = category
                
                //they checked a child node
                else{
                    UpdateAllChildren(childNodes, checked);
                    //addMarker(tempValue);
                    
                }//else
                
            } //if checked

            //they unchecked the node
            else {

                //if they unchecked a parent node
                if (node.get_level() == 0) {

                    UpdateAllChildren(childNodes, checked);

                } //if tempValue
                
                else {
                    UpdateAllChildren(childNodes, checked);
                    //removeMarker(tempValue);

                } //else
                
            }//else

        } //OnClientNodeChecked
        function itemClicked(sender, eventArgs) {

            //the value from the click
            var passedVal = eventArgs.get_item().get_value();

            //if the passedVal is something
            //then we add the marker
            if (passedVal) {
                addOrRemoveMarker(passedVal);
            }
        }//itemClicked

        //this function adds or removes a marker
        //it is called when a client clicks the results
        //from a search we had to make this seperate
        //from the other add and remove because it uses
        //different marker arrays to keep the markers
        //from the checkboxes seperate from markers on searches
        function addOrRemoveMarker(value) {
    a
            //make sure they didn't click the no results pane
            if (value != "no results") {
                var tempArr = value.split("***");
                var lat = tempArr[0];
                var lon = tempArr[1];
                var desc = tempArr[2];
                var type = tempArr[3];
                var inMap = false;
                var count = 0;

                if (lat != "Category") {

                    var loc = new GLatLng(lat, lon);

                    while (inMap == false && count < arrOfLinkMarkers.length) {

                        //if the lattitude and longitude are on the map
                        //and the descriptions match each other then it is an
                        //existing marker.

                        if ((loc.lat() == arrOfLinkMarkers[count].getLatLng().lat()) &&
                        (loc.lng() == arrOfLinkMarkers[count].getLatLng().lng()) &&
                        (arrOfLinkDesc[count] == desc)) {
                            inMap = true;
                            break;
                        } //if
                        count++;
                    } //while

                    //if it is in the map then we remove the marker
                    if (inMap) {

                        map.removeOverlay(arrOfLinkMarkers[count]);
                        arrOfLinkMarkers.splice(count, 1);
                        arrOfAllMarkers.splice(count, 1);
                        arrOfLinkDesc.splice(count, 1);

                    } //if

                    //we will add the marker
                    else {

                        //we need to check if this is an
                        //event or attractions to set
                        //the marker color
                        if (type == "attraction") {
                            var blueIcon = new GIcon(G_DEFAULT_ICON);
                            blueIcon.image = "http://clickablecommunity.com/images/Markers/markerGreen.png";

                            // Set up our GMarkerOptions object
                            markerOptions = { icon: blueIcon };

                            var marker = new GMarker(loc, blueIcon);
                        } //if

                        //else we just create the icon with the default
                        else {
                            var marker = new GMarker(loc);
                        } //else
                        arrOfLinkMarkers.push(marker);
                        arrOfAllMarkers.push(marker);
                        arrOfLinkDesc.push(desc);

                        GEvent.addListener(marker, "click", function() {
                            marker.openInfoWindowHtml(desc);
                        });

                        map.addOverlay(marker);
                        setZoomLevel(loc);
                    } //else

                } //if value != no results

            } //if lat != "category"
            
        } //addOrRemoveMarker

        //this function removes a marker if it is in the map
        //it is called if a parent node is unchecked
        function removeMarker(value) {

            var tempArr = value.split(";;;");
            var lat = tempArr[0];
            var lon = tempArr[1];
            var desc = tempArr[2];
            var inMap = false;
            var count = 0;
            
            if (lat != "Category") {

                var loc = new GLatLng(lat, lon);

                while (inMap == false && count < arrOfMarkers.length) {

                    //if the lattitude and longitude are on the map
                    //and the descriptions match each other then it is an
                    //existing marker.
                    if ((loc.lat() == arrOfMarkers[count].getLatLng().lat()) &&
                    (loc.lng() == arrOfMarkers[count].getLatLng().lng()) &&
                    (arrOfDesc[count] == desc)) {
                        inMap = true;
                        break;
                    } //if
                    count++;
                } //while
                if (inMap) {

                    map.removeOverlay(arrOfMarkers[count]);
                    arrOfMarkers.splice(count, 1);
                    arrOfAllMarkers.splice(count, 1);
                    arrOfDesc.splice(count, 1);

                } //if
            
            } //if lat != "category"
            
        } //removeMarker

        //this function adds a marker if it is not in the map
        //it is called if a parent node is checked
        function addMarker(value) {

            var tempArr = value.split(";;;");
            var lat = tempArr[0];
            var lon = tempArr[1];
            var desc = tempArr[2];
            var type = tempArr[3];
            var inMap = false;
            var count = 0;

            //we only run the next code if lat is not a category
            //if it is a category then we do nothing.
            if (lat != "Category") {
                
                var loc = new GLatLng(lat, lon);

                while (inMap == false && count < arrOfMarkers.length) {

                    //if the lattitude and longitude are on the map
                    //and the descriptions match each other then it is an
                    //existing marker.
                    if ((loc.lat() == arrOfMarkers[count].getLatLng().lat()) &&
                    (loc.lng() == arrOfMarkers[count].getLatLng().lng()) &&
                    (arrOfDesc[count] == desc)) {
                        inMap = true;
                        break;
                    } //if
                    count++;
                }  //while
                if (!inMap) {

                    //if this is an attraction then we chang the marker icon
                    if (type == "attraction") {
                        var blueIcon = new GIcon(G_DEFAULT_ICON);
                        blueIcon.image = "http://clickablecommunity.com/images/Markers/markerGreen.png";

                        // Set up our GMarkerOptions object
                        markerOptions = { icon: blueIcon };

                        var marker = new GMarker(loc, blueIcon);
                    } //if

                    //else we just create the icon with the default
                    else {
                        var marker = new GMarker(loc);
                    } //else

                    arrOfMarkers.push(marker);
                    arrOfAllMarkers.push(marker);
                    arrOfDesc.push(desc);

                    GEvent.addListener(marker, "click", function() {
                        marker.openInfoWindowHtml(desc);
                    });

                    map.addOverlay(marker);
                    setZoomLevel(loc);

                } //if

            }//if lat != "category"
        } //addMarker

        //this function gathers all of the markers
        //that are loaded on the map and then sets an appropriate
        //zoom level to show all of the markers
        function setZoomLevel(loc) {
            
            var bounds = new GLatLngBounds();
            
            //make sure there is more than 1 marker
            if (arrOfAllMarkers.length > 1) {

                //go through the array of markers
                //and add them to the bounds
                for (i = 0; i < arrOfAllMarkers.length; i++) {
                    bounds.extend(arrOfAllMarkers[i].getLatLng());
                } //for
                
                //get the center of the bounds and then
                //set the zoom level
                
                map.setCenter(bounds.getCenter());
                map.setZoom(map.getBoundsZoomLevel(bounds));
            } //if arrOfMarkers.length > 1

            //there is only one marker on the map
            else {

                //set the zoom level
                map.setCenter(loc, map.getZoom());

            }
        } //setZoomLevel

        function UpdateAllChildren(nodes, checked) {
            var i;
            for (i = 0; i < nodes.get_count(); i++) {
                if (checked) {
                    nodes.getNode(i).check();
                    addMarker(nodes.getNode(i).get_value());
                }//if
                else {
                    nodes.getNode(i).set_checked(false);
                    removeMarker(nodes.getNode(i).get_value());
                }//else

                //these next three lines of code are if you have
                //child nodes within child nodes
                //i.e. Parent -> child 1 -> child1
                //     Parent -> child 1 -> child2
                //     Parent -> child 2 -> child1
                //     Parent -> child 2 -> child2
                //if you do and you want them also checked then
                //uncomment these three lines
                if (nodes.getNode(i).get_nodes().get_count() > 0) {
                    UpdateAllChildren(nodes.getNode(i).get_nodes(), checked);
                }//if
                            
            } //for
            
        }//UpdateAllChildren

    </script>  
    <link href="../ClickableCommunity.css" rel="stylesheet" type="text/css" />
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" Width="220px">
        <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Web20" ExpandMode="SingleExpandedItem"
            AllowCollapseAllItems="false" Width="220px" BorderStyle="None" OnClientItemClicked="itemClicked" >
            <CollapseAnimation Type="None" Duration="100"></CollapseAnimation>
            <Items>
                <telerik:RadPanelItem runat="server" Text="Attractions" Font-Bold="true" Font-Size="Medium">
                    <Items>
                        <telerik:RadPanelItem runat="server">
                            <ItemTemplate>
                                <telerik:RadTreeView ID="attractionsTree" runat="server" Skin="Web20" CssClass="leftPanelContent"
                                    CheckBoxes="true" OnClientNodeClicking="OnClientNodeClicking" OnClientNodeChecked="OnClientNodeChecked" >
                                </telerik:RadTreeView>
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Events" Font-Bold="true" Font-Size="Medium" Expanded="true">
                    <Items>
                        <telerik:RadPanelItem runat="server">
                            <ItemTemplate>
                                <telerik:RadTreeView ID="RadTreeView1" runat="server" Skin="Web20" CssClass="leftPanelContent"
                                    CheckBoxes="true" OnClientNodeClicking="OnClientNodeClicking" OnClientNodeChecked="OnClientNodeChecked" >
                                </telerik:RadTreeView>
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Search" Font-Bold="true" Font-Size="Medium">
                    <Items>
                        <telerik:RadPanelItem>
                            <ItemTemplate>
                                <center>
                                    <table>
                                        <tr>
                                            <td class="searchTable">
                                                <telerik:RadTextBox ID="searchInputTextBox" runat="server" Skin="Web20"
                                                                 EmptyMessage="Enter Keywords" CssClass="searchTextBox"
                                                                 EmptyMessageStyle-CssClass="emptyTextboxText"/>
                                            </td>
                                            <td class="searchTable">
                                                <asp:Button runat="server" ID="searchButton" Text="Search"
                                                            OnClick="searchButtonClick" />        
                                            </td>
                                        </tr>
                                    </table>
                                </center>
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                    <Items>
                        <telerik:RadPanelItem CssClass="searchResultsText">
                            <ItemTemplate>
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
            </Items>
            <ExpandAnimation Type="None" Duration="100"></ExpandAnimation>
        </telerik:RadPanelBar>
        
    </telerik:RadAjaxPanel>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" SkinID="Web20" Height="75px" Transparency="1">
        <img alt="Searching..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.LoadingProgressBar.gif") %>'
            style="border: 0px;" />
    </telerik:RadAjaxLoadingPanel>

    And here is my css
    html, body, form  
    {  
       height: 100%;
       width: 100%;
       margin: 0;  
       padding:0;  
    }
    #leftPanel{
        display:inline;
        width:220px;
        border-top-style: none;
        border-right-style: none;
        border-left-style: none;
        height: 100%;
            
    }
    .mapPopupText{
        font-family: Arial;
        font-size: 12px;
    }
    .panelTitle{
        font-size: 12px;
        font-weight: bolder;
    }
    .normalText{
        font-size:12px;
        font-family: Arial;
    }
    a:visited{
        border:none;
    }
    a{
        border:none;
    }
    .loginLabel{
        padding-right: 10px;
        padding-bottom: 10px;
    }
    .loginTextBox{
        width: 120px;
    }
    .leftPanelContent{
        padding-bottom: 30px;
    }
    #topDiv{
        height: 50px;
        border-bottom-width: 4px;
        border-bottom-color: Gray;
        border-bottom-style:groove;
            
    }

    .searchResultsText{
        width: 200px;
        font-size: 12px;
        font-family: Arial;
        text-align: left;

    }
    .searchTable{
        text-align: center;
    }
    .searchTextBox{
        font-size: 12px;
        color: Black;
    }
    .entityTable{
        
    }
    #entityMap{
        height: 400px;
        border: groove 3px gray;
        width: 550px;
           
    }
    .entityMapClass{
        padding-left: 10px;
        height: 500px;
        vertical-align: top;
        
    }
    .calendarView{
        width:auto !important;
    }
    .tableColumn{
        width:150px;
    }
    #loginDiv{
        position: absolute;
        display:inline;
        right: 10px;
        top: 5px;
    }
    #menuDiv{
        position: absolute;
        padding-top: 75px;
        margin-left: auto;
        margin-right:auto;
    }
    .AllContent{
        border-right: none;
    }
    .businessToolTip{
        position: absolute;
        z-index: 500;
        top:300px;
        left:300px;
    }
    .stateDropDownText{
        font-size: 11px;
        font-family: Arial;

    }
    .adminTableDiv{
        text-align: center;
        width: 200px;
        height:100%;
        padding-right:20px;
        display: inline;
    }
    .adminMainDiv{
        
    }
    .center{
        padding-left:auto;
        padding-right:auto;
    }
    .textRed{
        color: Red;
    }
    .successText{
        color:Green;
    }
    .addBusinessSpacing{
        padding-right: 20px;
        height: 70px;
    }
    .adminTableLabel{
        text-align: center;
        display: block;
    }
    .addBusinessTextBox{
        width:150px;
        text-align:center;
    }
    #MainContent{
        display:inline;

    }
    .displayInline{
        display: inline;
    }
    #divMap{
        height: 500px;
        margin-left: auto;
        margin-right: auto;
        padding-right: 10px;
        width: 98%;
        
    }
    #divCalendar{
        height: 500px;
        border: groove 4px #EEEEEE;
        margin-left: auto;
        margin-right: auto;
        width:auto;
        margin: 10px;
    }
    .RightPanelPadding
    {
        position: relative;
        height:auto !important;
        padding-left: 10px;
        padding-top:10px;
        padding-right:10px;
        padding-bottom: 10px;
        margin-top: auto;
        margin-bottom: auto;
        width: auto;
        
        
    }
    .errorMessage{
        color: Red;
        font-size: 10px;
        font-family: Arial;
    }
    .topDivImage{
    position: absolute;
    top: 0;
    left: 0;
    display:inline;
    width:220px;
    }
    .viewMenu{
    padding-left:220px;
    margin-right:auto;
    margin-left:auto;
    text-align:center;
    width:800px;
    vertical-align:bottom;
    padding-top: 24px;
    }
    .emptyTextboxText{

        font-style:italic;
        font-size:10px;
        color: #D8D8D8;

    }

    Any idea what I need to change? Thanks,
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 04 Nov 2009 Link to this post

    Hello there,

    Please check this online example which demonstrates how to create a scrollable panelbar child group.

    Best regards,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 04 Nov 2009 Link to this post

    I looked at the example and tried both. Right now my code is set to <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Web20" ExpandMode="FullExpandedItem"
            AllowCollapseAllItems="false" Width="220px" BorderStyle="None" OnClientItemClicked="itemClicked" >
    If you go to the link I posted you can see it still isn't working. What else can you suggest?
  5. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 06 Nov 2009 Link to this post

    Does anyone have any other help or should I submit a ticket, I really need this fixed. I will note, I don't generally do css so if it's a problem with that I am overlooking I apologize. Thanks,
  6. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 09 Nov 2009 Link to this post

    Hello,

    Could you please try also setting Height property of the panelbar and let us know how it goes?

    Regards,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  7. Jeffrey Sylvan
    Jeffrey Sylvan avatar
    39 posts
    Member since:
    May 2006

    Posted 09 Nov 2009 Link to this post

    If telerik's advice doesn't work, could you check to see if your code works in the Q2 release? This problem just started for me after I upgraded to the Q3 release.

    I was just about to open a trouble ticket myself.
  8. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 09 Nov 2009 Link to this post

    Putting in a static height in my rad tree fixed the problem. However, setting the heights static like that make the panel bar look funny as it cannot go all the way for the height of the page dynamically.
  9. Jeffrey Sylvan
    Jeffrey Sylvan avatar
    39 posts
    Member since:
    May 2006

    Posted 09 Nov 2009 Link to this post

    I tried the same thing.

    It appears the scrollbar only works correctly if you set the height to (100% - 5 or so pixles) or less.

    I tried to make the height 98% but that only works on larger monitors.
  10. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 13 Nov 2009 Link to this post

    Hello there,

    I suggest you set ChildGroupHeight property of the item containing the treeview. Please check the attached page for a reference.

    All the best,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  11. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 16 Nov 2009 Link to this post

    I figured it out. In my master page where the rad splitter is, I had to set that height. Then I had to find the proper height for the ChildGroupHeight. It was getting cut off because the rad splitter was not long enough.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017