Setting a RadCalendar's Selected Dates

[Reid]

I am having a tough time setting the dates that are selected in a RadCalendar.  I have been researching this, and from what I see the only way is to fill the SelectedDates properrty.  The RadCalendar is contained in  a UserControl that is embedded in a RadPanelBar->RadPane object.

This is an MVC app with no code behind and is using a MasterPage. 

I am filliing a  ViewData[] member with an array of RadDates prior to showing the View.  So everything has to be done using JavaScript.

I am unable to get the instance of RadCalendar as a "RadCalendar".  Meaning in the OnLoad I get an object by it's ID but when I address the SelectedDates property I get the "SelectedDates" is not a known property", or "Undefined" message.

I can get the data using a JavaScript enabled, Ajax Enabled web service, or I can use a JSON result from the controller.  But again, when I try to assign the array of RadDates to the Calendar object it fails.

function getEventDatesFromController()
    {

        var returnData = $.ajax(
        {
            type: "POST",
            url: "/Events/GetRadEventDatesByDateRange",
            data: "startDate=" + "1/1/2000" + "&endDate=" + "1/1/2100",
            success: function (result) {
                var xml;
                debugger
                if (typeof data == "string") {
                    xml = new ActiveXObject("Microsoft.XMLDOM");
                    xml.async = false;
                    xml.loadXML(data);
                } else {
                    xml = result;
                    returnData = result;

                    var ctrlEventCalendar = <%= ctrlEventCalendar.ClientID %>;
                    ctrlEventCalendar.selectDates(returnData, true); <-- Fails!!!, so does the following for loop
                    for (var i = 0; i < returnData.length; i++) {
                        ctrlEventCalendar.SelectDate(returnData[i], true);
                      }

                }
                 if(result.success) {
                 alert("Controller Called Successfully");
            },
            error: function (req, status, error) {
                alert("Sorry! Problem calling Event Controller
            }
        });
        return returnData;
    }

<div class="box-leftEventCalendar">
        <telerik:RadCalendar runat="server" ID="ctrlEventCalendar" Style="margin: 6px auto 0" EnableMultiSelect="false">
        </telerik:RadCalendar>
    </div>

So my questions are:

How do you get the instance of the Calendar object as  RadCalendar?
How do you set the selected dates?

Any help or examples would be great.

Thanks,
Reid

[Genti]

Hello Reid,

There are a few limitations on using Rad Controls for ASP.NET AJAX in ASP.NET MVC application.
Follow the link below to check them out:
Limitations

Otherwise, if you want fully fledged controls that work on MVC framework, check out the Telerik Extensions for ASP.NET MVC:
MVC Controls

Hope this helps.

Regards,
Genti
the Telerik team

[Reid]

I cannot easily afford a 1200.00 upgrade right now, I am a one man team.  I will purchase an update eventually. 

One thing I am confused about is that I have MVC controls for Q1 2010.  The examples startup and run fine etc.  Yet I see know way to get them into the project.  So if the demo controls work in the pages, where is the assembly to load them?  Html.Telerik in the markup cannot be resolved.  I checked the folders under my MVC (Extensions for ASP.NET MVC Q1 2010) and see no assembly.

Thanks,
Reid

[Genti]

Hi Reid,

Please refer to the following article that illustrates how to use Extensions for Asp.Net MVC in a project.
Include Extensions in your MVC project

In this site you will also find more information on MVC extensions.

Kind regards,
Genti
the Telerik team

[Reid]

Hello,

Thank you for responding.  I have resolved the assignment of data issue, in that all the steps are in place.  Here is how I am assigning the Dates to the calendar.

<%= Html.Telerik().Calendar()
   .Name("Calendar")
   .Selection(settings => settings
   .Action("SelectAction", new { date = "{0}", theme = Request.QueryString["theme"] })
   .Dates((List<DateTime>) ViewData["EventsSelectedDates"]))
   .Value((DateTime) ViewData["FocusedDate"])
   .MinDate((DateTime)ViewData["minDate"])
   .MaxDate((DateTime)ViewData["maxDate"])
%>

The calendar seems to not do anything with the selected dates in terms of highlighting them  In fact the calendar does not display correctly at all.  There is no navigation or formatting in terms of styles that I can see.  See attached.

The calendar does advanced to the FocusedDate value but I do not see any dates highlighted, and again no navigation.

Something is wrong.

Anymore suggestions would be great.

Thanks,
Reid