NavigationPane in UI for ASP.NET AJAX

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

NavigationPane

11 Answers 156 Views

Scheduler

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

11 Answers, 1 is accepted

Accepted

answered on 07 Oct 2010, 03:58 PM

Hi guys,

Here is one possible solution to this requirement:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function pageLoad() {

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

var calendar = $find(scheduler.get_id() + "_SelectedDateCalendar");

var fastNavigation = calendar._getFastNavigation();

$telerik.$(".rsDatePickerActivator").get(0).href = "javascript:void(0);";

$addHandler($telerik.$(".rsDatePickerActivator").get(0), "click", function () {

$telerik.$(calendar.get_element()).hide();

//adjust where to show the popup table

var x, y;

var adjustElement = $telerik.$(".rsDatePickerActivator");

var offset = adjustElement.offset();

x = offset.left + 12;

y = offset.top + 12;

var e = {

clientX: x,

clientY: y - document.documentElement.scrollTop

};

$get(calendar._titleID).onclick(e);

return false;

});

fastNavigation.OnOK =

function () {

var date = new Date(fastNavigation.Year, fastNavigation.Month, 1);

//With Web Service binding mode you can use this method:

//scheduler.set_selectedDate(date);

//With Server side binding, we need to use RadAjaxManager:

$find("<%=RadAjaxManager1.ClientID %>").ajaxRequest(date.format('yyyy/MM/dd'));

fastNavigation.Popup.Hide();

}

fastNavigation.OnToday =

function () {

var date = new Date();

//With Web Service binding mode you can use this method:

//scheduler.set_selectedDate(date);

//With Server side binding, we need to use RadAjaxManager:

$find("<%=RadAjaxManager1.ClientID %>").ajaxRequest(date.format('yyyy/MM/dd'));

fastNavigation.Popup.Hide();

}

</script>

</telerik:RadCodeBlock>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadScheduler1" UpdatePanelHeight="" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadScheduler1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadScheduler1" UpdatePanelHeight="" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadScheduler ID="RadScheduler1" runat="server">

</telerik:RadScheduler>

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)

{

RadScheduler1.SelectedDate = DateTime.Parse(e.Argument);

}

I hope you enjoy it.

Kind regards,
Peter
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 17 Jan 2012, 11:27 PM

Since it doesn't seem to have any effect, I wanted to hide the "Today" link and calendar pop-up only when in Month View. After trying quite a few things that didn't work, I came upon this simple client-side solution:

function pageLoad() {

// hide date navigator since it doesn't do anything in Month View

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

if (scheduler.get_selectedView() == Telerik.Web.UI.SchedulerViewType.MonthView) {

$telerik.$(".rsToday").hide();

$telerik.$(".rsDatePickerActivator").hide();

}

John Greenstreet
Automotive Resources International