Show/Hide appointments

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

    Posted 27 Aug 2009 Link to this post

    I have been looking but I can't seem to find an example on this. What I have right now is a rad calendar that is bound to an sql datasource. It views fine. What I want is on the initial page load for everything to be not shown. I will eventually have a treeview on the left side that will have js client events so when  user checks one of the items, it shows the appointment. When they uncheck the item, it will hide the appointment again. I would like to do all of this on the client side. I.e. I want to still load all of the appointments on the page load but set them to hidden. I then want to show only the ones they check on. Is there anyway to do this? Thanks
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 28 Aug 2009 Link to this post

    Hello,

    You could add an OnClientNodeChecked client event to RadTreeView and hide/show the appointments in the event handler accordingly, as shown below.

    JavaScript:
     
    <script type="text/javascript">  
    function HideAppointment()  
    {  
        var Scheduler = $find('<%= RadScheduler1.ClientID %>');  
        var app1 = Scheduler.get_appointments();  
        alert("Hiding the appointment : " + app1.getAppointment(1).get_subject());  
        app1.getAppointment(1)._domElements[0].style.display = "none";    // Hide the first appointment   
    }  
    function ShowAppointment()  
    {  
        var Scheduler = $find('<%= RadScheduler1.ClientID %>');  
        var app1 = Scheduler.get_appointments();  
        alert("Showing the appointment : " + app1.getAppointment(1).get_subject());  
        app1.getAppointment(1)._domElements[0].style.display = "block";   // Show the first appointment 
    }  
    </script>  

    -Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 28 Aug 2009 Link to this post

    So I'm close but I am getting an error when I try to hide the element. My JS debugger is saying that
    app1.getAppointment(1)._domElements[0].style is undefined. Now I know it is getting the element because the alert displays the appointment information. Do you know what I am missing. I have posted my code below. If you want to see the page you can go here http://alpha.clickablecommunity.com/Calendar.aspx

    Also, I have another question, I notice that when the page changes, the first element changes dynamically. That is cool, but it is not what I need. I am going to have checkboxes similar to the map view page. If you go to events view on that page and change it to map you will see what I mean. I want a user to be able to show/hide the events on the calendar so I need to get them statically i.e. either by the id they have or by the text or something. Thanks

    <%@ Page Title="" 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">
        function HideAppointment() {  
        
            var Scheduler = $find('<%= RadScheduler1.ClientID %>');  
            var app1 = Scheduler.get_appointments();  
            alert("Hiding the appointment : " + app1.getAppointment(1).get_subject());
            app1.getAppointment(1)._domElements[0].style.display = "none";    // Hide the first appointment   
            
        }//HideAppointment
        function ShowAppointment() {  
        
            var Scheduler = $find('<%= RadScheduler1.ClientID %>');  
            var app1 = Scheduler.get_appointments();  
            alert("Showing the appointment : " + app1.getAppointment(1).get_subject());
            app1.getAppointment(1)._domElements[0].style.display = "block";   // Show the first appointment
            
        }//ShowAppointment
    </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="header" runat="server">
    </asp:Content>
    <asp:Content ID="Content4" ContentPlaceHolderID="menuContent" runat="server">
    <span style="padding-left:10px;">Coming soon...<br />
                                    <a href="#" onclick="HideAppointment()">Hide</a></span>
    </asp:Content>
    <asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <div id="divCalendar">
        <telerik:RadScheduler ID="RadScheduler1" runat="server" Height="500px"
                              HoursPanelTimeFormat="htt" Skin="Web20" ValidationGroup="RadScheduler1"
                              GroupingDirection="Vertical" CssClass="calendarView"
            SelectedView="WeekView"
            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">
            <DayView GroupingDirection="Horizontal" UserSelectable="True"  />
            <TimelineView GroupingDirection="Horizontal" />
            <WeekView GroupingDirection="Horizontal" />
        </telerik:RadScheduler>
        </div>
    <asp:SqlDataSource ID="eventsDataSource" runat="server"
        ConnectionString="<%$ ConnectionStrings:connectionString %>"
        SelectCommand="returnAllEvents" SelectCommandType="StoredProcedure">
    </asp:SqlDataSource>
    </asp:Content>

    Not that I think you need it but here is my 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

        'my connection string
        Dim conn As String = System.Configuration.ConfigurationManager.ConnectionStrings("connectionString").ToString
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not (Page.IsPostBack) Then

                Dim table As DataTable = New DataTable()
                table.Columns.Add("start")
                table.Columns.Add("end")
                table.Columns.Add("key")
                table.Columns.Add("subject")

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

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

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

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

                Try
                    myConn.Open()
                    Dim dr As SqlDataReader = returnCommand.ExecuteReader()

                    While dr.Read()

                        '0eventid, 1FK_CategoryID, 2latitude, 3longitude, 4events.name, 5description, 6businesses.name,
                        '7starttime, 8stoptime, 9locations.street, 10locations.city, 11locations.state, 12locations.zip

                        'set all of the textboxes to the input
                        table.Rows.Add(New String() {dr.Item(7), dr.Item(8), dr.Item(0), _
                                                     "Name: " & dr.Item(6)})

                    End While 'while dr.read()

                Catch ex As Exception

                Finally

                End Try

                Dim calendar As RadScheduler = RadScheduler1
                calendar.DataSource = table
                calendar.DataStartField = "start"
                calendar.DataEndField = "end"
                calendar.DataKeyField = "key"
                calendar.DataSubjectField = "subject"
                calendar.DataBind()

            End If 'if not page.ispostback
        End Sub

    End Class

    And here is my masterpage
     <%@ Master Language="VB" AutoEventWireup="false" %>

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register TagPrefix="loginDivTemplate" TagName="login" src="/ascx/loginTemplate.ascx"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <%@ import namespace="System.Data" %>
    <%@ import namespace="System.Data.Sql" %>
    <%@ import namespace="System.Data.SqlClient" %>
    <%@ import namespace="Telerik.Web.UI" %>
    <head id="Head1" runat="server">
        <link href="ClickableCommunity.css" rel="stylesheet" type="text/css" />
        <title></title>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body id="MasterBody" runat="server" style="margin: 0px; height: 100%; overflow: hidden;">
        <form id="Form1" method="post" runat="server" style="height: 100%">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <br />
        <asp:ContentPlaceHolder ID="header" runat="server">
        </asp:ContentPlaceHolder>
        <div id="loginDiv">
            <loginDivTemplate:login id="loginPanelContent" runat="server"></loginDivTemplate:login>
        </div>
        <div id="topDiv">
            <div id="image" class="topDivImage">
                <img src="images/logo.jpg" alt="Clickable Community Logo" width="200" height="75" />
            </div>
            <div id="viewMenu" class="viewMenu">
                <center>
                    <table><tr><td>
                        <telerik:RadMenu ID="RadMenu1" runat="server" Skin="Web20">
                            <Items>
                                <telerik:RadMenuItem runat="server" Text="Events View">
                                    <Items>
                                        <telerik:RadMenuItem runat="server" NavigateUrl="~/Default.aspx" Text="Map">
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem runat="server" Text="Calendar" NavigateUrl="Calendar.aspx">
                                        </telerik:RadMenuItem>
                                    </Items>
                                </telerik:RadMenuItem>
                            </Items>
                        </telerik:RadMenu>
                    </td></tr></table>
                </center>
            </div>
        </div>
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" Width="100%" CssClass="AllContent" LiveResize="true">
            <telerik:RadPane ID="LeftRadPane1" runat="server" Width="220px" Scrolling="Both"
                BorderStyle="None" BorderSize="0">
                <div id="leftPanel">
                    <asp:ContentPlaceHolder ID="menuContent" runat="server">
                        
                    </asp:ContentPlaceHolder>
                </div>
            </telerik:RadPane>
            <telerik:RadSplitBar runat="server" ID="RadSplitBar2" CollapseMode="Forward" EnableResize="false"
                ForeColor='Green' />
            <telerik:RadPane ID="RightRadPane1" runat="server" CssClass="RightPanelPadding" Scrolling="Both"
                BorderStyle="None" BorderSize="0" Height="100%">
                <asp:ContentPlaceHolder ID="MainContent" runat="server">
                
                </asp:ContentPlaceHolder>
            </telerik:RadPane>
            
        </telerik:RadSplitter>
        </form>
    </body>
    </html>

  5. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 31 Aug 2009 Link to this post

    Hi,

    You can use jQuery in combination with the client API of RadScheduler and RadTreeview. The code below constructs RadTreeview client-side based on the visible appointments of RadScheduler. On node checking it shows or hides the appoitnment. All appointmetns are hidden in pageLoad.

    <script type="text/javascript">  
           var scheduler;  
           var treeview;  
             
            //Hide all appointments:  
            var $ = $telerik.$;  
            $(document).ready(function() {  
                $(".rsApt").parent().hide();  
            });  
          
            function pageLoad() {  
                scheduler = $find('<%=RadScheduler1.ClientID %>');  
                treeview = $find('<%=RadTreeView1.ClientID %>');  
                buildTreeviewWithAppointments(treeview, scheduler);  
     
            }  
              
            function buildTreeviewWithAppointments(tree, sch) {             
                sch.get_appointments().forEach(function(apt) {  
                     //Instantiate a new client node  
                    var node = new Telerik.Web.UI.RadTreeNode();  
                    //Set its text to the appoitnment subject  
                    node.set_text(apt.get_subject());  
                    //Set its value to the appointment id  
                    node.set_value(apt.get_id());  
                    //Add the new node to the treeview  
                    tree.get_nodes().add(node);  
                });             
            }  
              
            function OnClientNodeChecking(sender, eventArgs) {  
                var appID = eventArgs.get_node().get_value();  
                var appDivID = "#" + scheduler.get_appointments().findByID(appID).get_element().id;              
                if (!eventArgs.get_node().get_checked())  
                    $(appDivID).parent().show();  
                else 
                    $(appDivID).parent().hide();  
            }        
        </script>  
        
        <telerik:RadTreeView ID="RadTreeView1" runat="server" CheckBoxes="true"      
         OnClientNodeChecking="OnClientNodeChecking" >      
        </telerik:RadTreeView>  
        <telerik:RadScheduler ID="RadScheduler1" runat="server" /> 


    Kind regards,
    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 31 Aug 2009 Link to this post

    I tried your code but I am getting an error in my JS. It says that var $ = $telerik.$; is not defined. I don't really know what that syntax means in JS so I can't really debug it. Could you give me a little more information on that? Thanks,
  7. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 31 Aug 2009 Link to this post

    I want to make one other quick note. That error is from my JS debugger and not an asp error the page still loads. If you want to see it, you can go here http://alpha.clickablecommunity.com/Calendar.aspx
  8. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 03 Sep 2009 Link to this post


    Here is a help topic on using jQuery with Telerik controls:
    http://www.telerik.com/help/aspnet-ajax/using-jquery.html

    The code: var $ = $telerik.$; simply sets and alias for shorter notation.

    Attached is a simple working demo for reference.

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

    Posted 03 Sep 2009 Link to this post

    see bottom post
  10. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 03 Sep 2009 Link to this post

    See bottom post
  11. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 03 Sep 2009 Link to this post

    See bottom post
  12. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 03 Sep 2009 Link to this post

    So I am headed in a new direction. I am loading the treeview from the server side and passing all the data I need in the value of the rad tree item. However, I am trying to add the appointment to the scheduler with JS and having no luck

    Here are my two functions

    I know that my code is getting executed on the tree click because my debugger show the correct values. However, it doesn't add it to the scheduler. I think it has to do with how I am getting the scheduler object. Here are the two functions that get executed on the tree click

     

    function OnClientNodeChecking(sender, eventArgs) {

     

     

    var value = eventArgs.get_node().get_value();

     

     

    var tempArr = value.split(";;;");

     

     

    var id = tempArr[0];

     

     

    var subject = tempArr[1];

     

     

    var start = tempArr[2];

     

     

    var end = tempArr[3];

     

     

    //call the function to insert the event

     

    insertEvent(start, end, subject, sender);

    }

     

    //this function inserts appointments on the rad scheduler

     

     

    //and sets the current month to that view

     

     

    function insertEvent(start, end, subject, sender) {

     

     

    var scheduler = $find('<%= RadScheduler1.ClientID %>');

     

     

     

    var newAppointment = new Telerik.Web.UI.SchedulerAppointment();

     

     

    var startTime = eventArgs.get_targetSlot().get_startTime();

     

     

    var endTime = new Date(startTime);

     

    endTime.setMinutes(endTime.getMinutes() + 45);

    newAppointment.set_start(startTime);

    newAppointment.set_end(endTime);

    newAppointment.set_subject(subject);

    scheduler.insertAppointment(newAppointment);

     

    }

    //insertAppointment

    Thanks,

     

  13. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 08 Sep 2009 Link to this post

    Hi,

    The problem is with the insertEvent function. You use it as if it is the event handler for OnClientTimeSlotClick. eventArgs will be null in your case, therefore you cannot create the start time using this code: var startTime = eventArgs.get_targetSlot().get_startTime();

    You should create the start time from a string. For example:

    var startTime = new Date("2009/09/08 08:00:00");


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

    Posted 08 Sep 2009 Link to this post

    So I am just trying to create a static date then. What is wrong with this function

        //this function inserts appointments on the rad scheduler
        //and sets the current month to that view
        function insertEvent(start, end, subject) {

            var scheduler = $find('<%= RadScheduler1.ClientID %>');
            
            var newAppointment = new Telerik.Web.UI.SchedulerAppointment();

            //var startTime = new Date(start);
            var startTime = new Date("2009/09/08 08:00:00");

            //var endTime = new Date(end);
            var endTime = new Date("2009/09/08 09:00:00");
            
            newAppointment.set_start(startTime);
            newAppointment.set_end(endTime);
            newAppointment.set_subject(subject);

            scheduler.insertAppointment(newAppointment);
            
        }//insertAppointment

    Thanks,
  15. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 09 Sep 2009 Link to this post


    There is nothing wrong with this function. If the argumets that you pass to it , nameliy "start" and "end" are in the correct format, you can use what you have commented:

    var startTime = new Date(start);
    var endTime = new Date(end);


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

    Posted 09 Sep 2009 Link to this post

    If you notice, I actually have those lines commented out and have put in static dates and it still does not work for me. However, these are the values that get passed into that function when I output them
    insertEvent("9/3/2009 6:00:00 PM", "9/3/2009 10:00:00 PM", "Dollar Drinks")
    Do you have any idea why it's not working even when I use the static data i.e.
            var startTime = new Date("2009/09/08 08:00:00");

            var endTime = new Date("2009/09/08 09:00:00");
  17. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 09 Sep 2009 Link to this post

    To add an update. I have found that my script is erroring in that function when I define newAppointment as the var newAppointment = new Telerik.Web.UI.SchedulerAppointment();
    Do I need to add some script or something? Thanks,
  18. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 11 Sep 2009 Link to this post


    This is strange. We cannot replicate this problem in a local test. The code, which you use, looks correct and there is no need to register any additional scripts. Can you isolate the issue in a simple working project and send it to us via a support ticket for further testing?

    Thanks.

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

    Posted 15 Sep 2009 Link to this post

    So I was setting up a test project to send you and I copied and pasted the code and it worked fine. Would you have any ideas why it wont work in my project? Short of sending you the entire project, don't know what else to do.
  20. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 15 Sep 2009 Link to this post

    I posted a ticket, the id is 243014


Back to Top
UI for ASP.NET Ajax is Ready for VS 2017