Appointments don't stay when view is changed.

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

    Posted 02 Dec 2009 Link to this post

    I have a rad scheduler that shows appointments based on a client click of a rad tree. It works fine until you check the tree and then switch views. I then loose the shown appointment. To see what I mean you can go to here alpha.clickablecommunity.com/calendar.aspx. Expand live music then concerts and check test. If you look at the 30th it shows up. However, change your view either to that week or day and it shows up for a second and then disappears. Can anyone help me out with keeping this visible if it's already checked on the rad tree?

    Here is the aspx for my page
    <%@ Page Title="Event Calendar" Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPage.Master"
        CodeBehind="Calendar.aspx.vb" Inherits="ClickableCommunity.Calendar" %>

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
        //this array keeps all of the events
        //that are showing
        arrOfEvents = 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

                //if this is a child node then we
                //add a marker
                else if (childNodes.get_count() == 0) {
                    
                    showEvent(tempValue);

                } //else if

                //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
                //if this is a child node then we
                //add a marker
                else if (childNodes.get_count() == 0) {

                    hideEvent(tempValue);

                } //else if

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

        function UpdateAllChildren(nodes, checked) {
            var i;
            for (i = 0; i < nodes.get_count(); i++) {
                if (checked) {
                    nodes.getNode(i).check();
                    showEvent(nodes.getNode(i).get_value());
                } //if
                else {
                    nodes.getNode(i).set_checked(false);
                    hideEvent(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

        //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 unchecked a node
            if (checked) {
                checked = false;
                //if they unchecked a parent node
                if (nodeLevel == 0) {
                    
                    UpdateAllChildren(childNodes, checked);
                    
                } //if tempValue

                //if this is a child node then we
                //add a marker
                else if (childNodes.get_count() == 0) {

                    //alert("unchecked child checked " + checked);
                    hideEvent(tempValue);

                } //else if

                //they clicked a child node
                else {
                    //alert("unchecked parent checked " + checked);
                    UpdateAllChildren(childNodes, checked);
                    hideEvent(tempValue);
                } //else

            } //if checked

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

                    //alert("checked parent checked " + checked);
                    checked = true;
                    UpdateAllChildren(childNodes, checked);

                } //if tempValue
                //if this is a child node then we
                //add a marker
                else if (childNodes.get_count() == 0) {

                    //alert("checked child checked " + checked);
                    showEvent(tempValue);

                } //else if

                //they clicked a child node
                else {
                    //alert("checked parent checked " + checked);
                    checked = true;
                    UpdateAllChildren(childNodes, checked);
                    showEvent(tempValue);
                } //else
            } //else
        } //OnClientNodeChecked

        arrOfEvents = new Array();
        
        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) {
                
                var count = 0;
                var inCalendar = false;
                while (inCalendar == false && count < arrOfEvents.length) {

                    if (passedVal == arrOfEvents[count]) {

                        inCalendar = true;
                        break;

                    } //if passedVal

                    count++;

                } //while count <

                //if it was in the map
                if (inCalendar) {
                    arrOfEvents.splice(count, 1);
                    hideEvent(passedVal);
                } //if inCalendar
                else {
                    arrOfEvents.push(passedVal);
                    showEvent(passedVal);
                }//else
                
            }//if passedVal

        } //itemClicked

    </script>

    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="headerContent" runat="server">
    </asp:Content>
    <asp:Content ID="vew" ContentPlaceHolderID="viewMenuContent" runat="server">
        <span style="font-size: 3px;"><br /></span>
        Veiw:&nbsp;&nbsp;&nbsp;
            <telerik:RadComboBox ID="viewDrop" runat="server" Skin="Web20" Width="100px" Font-Size="12px"
                MarkFirstMatch="True" EnableVirtualScrolling="True" AutoPostBack="true">
                <CollapseAnimation Duration="1000" Type="InOutBack"></CollapseAnimation>
                <Items>
                    <telerik:RadComboBoxItem Value="calendar" Text="Calendar" Selected="true" />
                    <telerik:RadComboBoxItem Value="map" Text="Map" />
                </Items>
            </telerik:RadComboBox>
    </asp:Content>
    <asp:Content ID="Content4" ContentPlaceHolderID="leftMenu" runat="server">
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1"
            Width="220px" Height="100%">
            <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Web20"
            AllowCollapseAllItems="false" Width="220px" ExpandMode="FullExpandedItem" OnClientItemClicked="itemClicked" BorderStyle="None">
                <CollapseAnimation Type="None" Duration="100"></CollapseAnimation>
                <Items>
                    <telerik:RadPanelItem runat="server" Text="Things To Do" Font-Bold="true" Font-Size="Medium"
                        Expanded="true">
                        <Items>
                            <telerik:RadPanelItem runat="server" BorderStyle="None">
                                <ItemTemplate>
                                    <telerik:RadTreeView ID="RadTreeView1" runat="server" Skin="Web20" CssClass="leftPanelContent"
                                        CheckBoxes="true" OnClientNodeChecking="OnClientNodeChecked" OnClientNodeClicking="OnClientNodeClicking">
                                    </telerik:RadTreeView>
                                </ItemTemplate>
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Search" Font-Bold="true" Font-Size="Medium">
                    <Items>
                        <telerik:RadPanelItem BorderStyle="None">
                            <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>
            </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>
    </asp:Content>
    <asp:Content ID="Content3" ContentPlaceHolderID="mainContentPlaceHolder" runat="server">
        <div id="divCalendar">
            <telerik:RadScheduler ID="RadScheduler1" runat="server" Height="460" DataEndField="stoptime"
                DataKeyField="eventid" DataStartField="starttime" DataSubjectField="name" HoursPanelTimeFormat="htt"
                Skin="Web20" ValidationGroup="RadScheduler1" GroupingDirection="Vertical" CssClass="calendarView"
                SelectedView="MonthView" WeekView-DayStartTime="08:00:00" WeekView-DayEndTime="23:59:00"
                WeekView-WorkDayEndTime="23:59:00" WeekView-WorkDayStartTime="08:00:00" WorkDayEndTime="23:59:00"
                DayEndTime="23:59:00" DayView-DayEndTime="23:59:00" DayView-DayStartTime="08:00:00"
                DayView-WorkDayEndTime="23:59:00" DayView-WorkDayStartTime="08:00:00" AllowDelete="false"
                AllowEdit="false" AllowInsert="false" TimelineView-NumberOfSlots="7">
            </telerik:RadScheduler>
        </div>
        <asp:SqlDataSource ID="eventsDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:connectionString %>"
            SelectCommand="returnAllEvents" SelectCommandType="StoredProcedure"></asp:SqlDataSource>

        <script type="text/javascript">


            function pageLoad() {
                
                $ = $telerik.$;

                scheduler = $find('<%=RadScheduler1.ClientID %>');
                var panelBar = $find('<%=RadPanelBar1.ClientID %>');
                var item = panelBar.findItemByText("Things To Do");
                var treeview = item.get_items().getItem(0).findControl("RadTreeView1");

                //hide all of the events initially
                $(document).ready(function() {
                    $(".rsApt").parent().hide();
                });

            } //pageLoad

            //this function will set an appointment to visible
            //it takes in the id of the event to show and assumes
            //there is a global variable of scheduler that is the
            //rad scheduler
            function showEvent(appID) {
                
                var tempArr = appID.split(";,;");
                var type = tempArr[0];
                var tempAppt = scheduler.get_appointments().findByID(appID);
                
                if (type != "Category" && tempAppt != null){
                    
                    var appDivID = "#" + scheduler.get_appointments().findByID(appID).get_element().id;
                    $(appDivID).parent().show();
                
                }//if type

            } //showEvent

            //this function will set an appointment to
            //hidden. it takes in the id of the event to show and assumes
            //there is a global variable of scheduler that is the
            //rad scheduler
            function hideEvent(appID) {
                var tempArr = appID.split(";,;");
                var type = tempArr[0];
                
                var tempAppt = scheduler.get_appointments().findByID(appID);
                if (type != "Category" && tempAppt != null) {
                    
                    var appDivID = "#" + scheduler.get_appointments().findByID(appID).get_element().id;
                    $(appDivID).parent().hide();

                }//if type
            } //hideEvent

        </script>

    </asp:Content>

    And here is the vb
    Imports System.Data
    Imports System.Data.Sql
    Imports System.Data.SqlClient
    Imports Telerik.Web.UI
    Partial Public Class Calendar
        Inherits System.Web.UI.Page
        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("Things To Do").Items(0).FindControl("RadTreeView1"), RadTreeView)
                tree.DataSource = CreateTable()
                tree.DataFieldID = "ID"
                tree.DataFieldParentID = "ParentID"
                tree.DataTextField = "Text"
                tree.DataValueField = "Value"
                tree.DataBind()

                ''popluate the events
                populateCalendar()

            End If

            

            'we have to set different heights if it's ie 7
            Dim bc As HttpBrowserCapabilities
            Dim s As String = ""
            bc = Request.Browser
            'get the browser version
            With bc
                s &= .Browser & .MajorVersion
            End With

            'if it's ie7
            If (s = "IE7") Then
                RadPanelBar1.Height = "488.5"
            Else
                RadPanelBar1.Height = "486"
            End If

        End Sub 'page load

        Protected Sub searchButtonClick(ByVal sender As Object, ByVal e As System.EventArgs)

            '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 tempItem As New RadPanelItem()
                        tempItem.CssClass = "searchResultsText"
                        tempItem.Text = dr.Item(4)
                        tempItem.Value = dr.Item(0)
                        panelBar.Items.Add(tempItem)

                    End While 'while dr.read()        

                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


            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

        End Sub 'searchButtonClick

        'this function adds all of the events to the calendar
        'and sets them to hidden
        Private Function populateCalendar()

            'the calendar object
            Dim calendar As RadScheduler = RadScheduler1

            'my sql connection
            Dim myConn As New Data.SqlClient.SqlConnection(connection)

            'the name of the stored procedure
            Dim strSQL = "returnAllEvents"

            myConn.Open()
            Dim insertCommand As New Data.SqlClient.SqlCommand(strSQL, myConn)
            Dim dr As SqlDataReader = insertCommand.ExecuteReader

            If (dr.HasRows) Then

                While dr.Read()

                    'SELECT eventid, FK_CategoryID, latitude, longitude, events.name, description, businesses.name,
                    '7starttime, stoptime, locations.street, locations.city, locations.state, locations.zip
                    Dim tempEvent As New Appointment(dr(0), dr(7), dr(8), dr(4))

                    'tempEvent.Visible = False
                    calendar.InsertAppointment(tempEvent)

                End While 'while dr.read()

            End If 'if dr.hasrows

        End Function 'populateCalendar

        '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(0).ToString <> "") Then


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

                    '0eventid, 1FK_CategoryID, 2latitude, 3longitude, 4events.name, 5description, 6businesses.name,
                    '7starttime, 8stoptime, 9locations.street, 10locations.city, 11locations.state, 12locations.zip
                    table.Rows.Add(New String() {"child" & edr.Item(0).ToString, edr.Item(1).ToString, edr.Item(4).ToString, _
                                                edr.Item(0)})

                    '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

        Private Sub viewDrop_SelectedIndexChanged(ByVal o As Object, ByVal e As Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs) Handles viewDrop.SelectedIndexChanged
            If (viewDrop.Text = "Map") Then
                Response.Redirect("Default.aspx")
            End If
        End Sub
    End Class

    Thanks,
  2. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 03 Dec 2009 Link to this post

    Does anyone have any thoughts on this, or should I submit a ticket?
  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 Dec 2009 Link to this post

    I submitted a ticket.
  5. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 08 Dec 2009 Link to this post

    Hi,

    We received the ticket with the demo project and here are our findings. In pageLoad you "hide all of the events initially". However, pageLoad will occur after you switch views or navigate to previous or next period, so all appointments are wiped out regardless of the treeview state. To workaround this problem you need to show all appointments for the checked nodes in pageLoad right after you have hide all appointments. In terms of code, please try the following:

    function pageLoad() {
                  
                $ = $telerik.$;
      
                scheduler = $find('<%=RadScheduler1.ClientID %>');
                var panelBar = $find('<%=RadPanelBar1.ClientID %>');
                var item = panelBar.findItemByText("Things To Do");
                var treeview = item.get_items().getItem(0).findControl("RadTreeView1");
      
                //hide all of the events initially
                $(document).ready(function() {
                    $(".rsApt").parent().hide();
                });
                
                ShowAllAppointmentsForCheckedNodes(treeview);
                  
      
            } //pageLoad

     

    function ShowAllAppointmentsForCheckedNodes(treeview) {
           var i;
           var allNodes = treeview.get_allNodes();
           //treeview.get_allNodes()[0].get_checked()
           for (i = 0; i < allNodes.length; i++) {
               if (allNodes[i].get_checked()) {
                   showEvent(allNodes[i].get_value());
               } //if
                 
           }
       } //ShowAllAppointmentsForCheckedNodes


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

    Posted 08 Dec 2009 Link to this post

    That was actually what I thought I needed to do, but somehow I just couldn't seem to get the code right to find all of the checked nodes on the page load. I don't know what I was missing. Thanks,
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017