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

Panelbar height isn't correct.

9 Answers 103 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 02 Nov 2009, 10:52 PM
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,

9 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 04 Nov 2009, 09:09 AM
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.
0
Web Services
Top achievements
Rank 2
answered on 04 Nov 2009, 02:55 PM
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?
0
Web Services
Top achievements
Rank 2
answered on 06 Nov 2009, 04:52 PM
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,
0
Yana
Telerik team
answered on 09 Nov 2009, 08:04 AM
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.
0
Jeffrey Sylvan
Top achievements
Rank 1
answered on 09 Nov 2009, 06:24 PM
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.
0
Web Services
Top achievements
Rank 2
answered on 09 Nov 2009, 07:56 PM
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.
0
Jeffrey Sylvan
Top achievements
Rank 1
answered on 09 Nov 2009, 08:19 PM
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.
0
Yana
Telerik team
answered on 13 Nov 2009, 09:36 AM
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.
0
Web Services
Top achievements
Rank 2
answered on 16 Nov 2009, 06:42 PM
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.
Tags
PanelBar
Asked by
Web Services
Top achievements
Rank 2
Answers by
Yana
Telerik team
Web Services
Top achievements
Rank 2
Jeffrey Sylvan
Top achievements
Rank 1
Share this question
or