18 Answers, 1 is accepted
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.
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>
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.
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.
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,
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.
//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,
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.
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");
Do I need to add some script or something? Thanks,
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.