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

Show/Hide appointments

18 Answers 285 Views

Scheduler

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

18 Answers, 1 is accepted

answered on 28 Aug 2009, 10:30 AM

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.

answered on 28 Aug 2009, 03:01 PM

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>

answered on 31 Aug 2009, 01:43 PM

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.

answered on 03 Sep 2009, 08:14 AM

showhideappointments.zip

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.

answered on 03 Sep 2009, 07:17 PM

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,

answered on 08 Sep 2009, 08:10 PM

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,

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Show/Hide appointments

18 Answers, 1 is accepted