What is best technique for coordination Date Change event beteen client and server?

[Tomica]

I am new to RAD controls, and have a very simple question about technique.

Previously, our Calendar form used the Calendar control that ships with VS2008.

We ran a VB server procedure to update the form.

I swapped-in the new RADCalendar control, and tried to do the minimal amount of work to get the form running.

I found that setting AutoPostback to "true", along with EnableViewState to "true", would send me back to the server, where I would read the selected date and rebuild the form.

Works fine, but defeats the advantages of a client control for browsing dates.

Still a novice in JavaScript, I think I should disable AutoPostback, trap the SelectedDate change event, then postback to update the page contents from the database.

This is probably 2-3 lines, but in a language where I am stuck on chapter one of JavaScript for Dummies - Slow Learner Edition.

Can somebody point me in the right direction? Thanks

[Steve]

Hi Thomas Garvin,

If you have one or more datepickers/calendars on the page, you can proceed like in regular input form - leave them work on the client and then once you are ready to submit - get the values that users have provided. If we're missing your point - please elaborate and we would provide more to the point answers.

Sincerely yours,
Steve
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Tomica]

Let me clarify.

The page is a "calendar of events", similar to what you would find in Outlook.

When I change months in Outlook, let's say I want to look ahead from today to June 15th. Response is prompt, Outlook jumps from April 24 (first click), then to June 24 (second click), and then I click on June 15 (third click).

With my calendar page, I can click the "next month" arrow, and with AutoPostback = true, my page posts, and the month of May is visible (first click, first postback). Repeat that for June (second click, second postback). Then click June 15 to see full day (third click, third postback).

With a client control, I would hope to advance those two months and incur no postbacks. Only when I then need to access the database, should I return to the server. (one postback instead of three)

I want to turn AutoPostback off, then use the client date change event (June 15th click) to trigger the postback. I know I need to hook into that event, and then trigger an event that begins the postback. Or, I need JavaScript to call a server-side function. I am sure it is a simple procedure, but I just don't know how to translate my knowledge of server-side ASP.NET into equivalent JavaScript interaction with controls, both of which are new to me.

Idealized pseudo-code:

• OnDateClick
  • do
    • trigger postback manually (AutoPostback = false)
  • or
    • JavaScript calls server-side VB function, which triggers postback and other server-side processing
• OnAnythingElse
  • strictly handled by RADCalendar client code
• end

I'm still learning CSS and JavaScript, but lacking any knowledge of C, 34 years of COBOL/Fortran/Pascal/Basic programming work against me.

[Steve]

Hi Tom,

You can do something like this:

ASPX:

  <script type="text/javascript">
        function DateClick(sender, args)
        {
             __doPostBack("<%= RadCalendar1.UniqueID %>","");
        }
    </script>
        <rad:RadCalendar ID="RadCalendar1" runat="server" >
        <ClientEvents OnDateClick="DateClick" />
        </rad:RadCalendar>

C#:

  protected override void RaisePostBackEvent(IPostBackEventHandler sourceControl, string eventArgument)
    {
        base.RaisePostBackEvent(sourceControl, eventArgument);
        if (sourceControl is RadCalendar)
        {
                    //do your thing
        }
    }

All the best,
Steve
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Tomica]

Yep, this is the answer.

I've been using "do events" for a dozen years in Access, "raiseerror" for ten in SQL Server, and was simply at a loss for finding the keywords to search for.

Must be a joke in here somewhere:

Confused programmer: oh great master, King of Coding, what is the magical incantation to do a postback?

Wise man, speaking in Yoda voice: little grasshopper, there are no mysteries, there is no "try", there is only "do" or "not do", the way to "do postback" is to "dopostback".

[Scott]

Ok, i'm not as clever as Tom.  I need one more blank filled in on this technique.  My situation is the same as Tom's, I want everything on the calendar to stay client-side until they click on (select) an actual date, at which point I want a postback.  I did exactly as Steve suggested, and it 'works', except that I can't for the life of me figure out how to get the selected date in the post back!  The sourceControl.SelectedDate isn't the date I selected (it's 1/1/0001), and the eventArgument is the null string Steve suggests passing in. I then tried passing in the string of the date as the eventArgument, but then I get a server side error "Invalid navigation argument" in the RaisePostBackEvent.  Note that I'm using the DateSelected event rather than DateClick. 

<telerik:RadPanelItem ID="DatePanelItem" runat="server" PreventCollapse="True" Text="Choose Date">
<ItemTemplate>
    <telerik:RadCalendar ID="ChooseDateCalendar" Runat="server"
     EnableMultiSelect="False" font-names="Arial,Verdana,Tahoma" forecolor="Black"
     ShowRowHeaders="False" Skin="Office2007"
     style="border-color: #ececec" ViewSelectorText="x">
        <SpecialDays>
           <telerik:RadCalendarDay Date="" Repeatable="Today">
               <ItemStyle BorderColor="#FF6600" BorderStyle="Solid" BorderWidth="1px" />
           </telerik:RadCalendarDay>
           <telerik:RadCalendarDay Date="" IsWeekend="True">
               <ItemStyle BackColor="#E8E8E8" />
           </telerik:RadCalendarDay>
        </SpecialDays>
        <ClientEvents OnDateSelected="OnDateSelected" />
    </telerik:RadCalendar>
</ItemTemplate>
</telerik:RadPanelItem>

Javascript:

 function OnDateSelected(sender, args)
 {
     var day = args.get_renderDay();
     var dfi = sender.DateTimeFormatInfo;
     var formattedDate = dfi.FormatDate(day.get_date(), dfi.ShortDatePattern);
     __doPostBack('<%= ((RadCalendar)(DatePanelItem.FindControl("ChooseDateCalendar"))).UniqueID %>', formattedDate);
}

C#:

    protected override void RaisePostBackEvent(IPostBackEventHandler sourceControl, string eventArgument)
    {
        base.RaisePostBackEvent(sourceControl, eventArgument);
        // at this point, I get an 'invalid navigation argument' ApplicationException.
        // if I instead pass in '' as eventArgument, then the selection never matters.  Help?

        if (sourceControl is RadCalendar)
        {
            //the calendar must have changed

        }
    }

I'm sure it's something easy I'm missing - help!

(P.S.  Google Chrome doesn't like the editor much - it inserts a bunch of $0's.. but you probably knew that...

Thanks,
Scott

 

[Scott]

Why is it after posting I find a solution?  I'm not sure it's the best one, but it does seeem to work.  I simplified a bit for clarity:

<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <script type="text/javascript">
    function OnDateSelected(sender, args)
 {
     var day = args.get_renderDay();
     var dfi = sender.DateTimeFormatInfo;
     var formattedDate = dfi.FormatDate(day.get_date(), dfi.ShortDatePattern);
     __doPostBack('SpecialPostBack', formattedDate);
}
</script>
    <telerik:RadCalendar ID="ChooseDateCalendar" Runat="server"
        EnableMultiSelect="False" font-names="Arial,Verdana,Tahoma" forecolor="Black"
        ShowRowHeaders="False" Skin="Office2007"
        style="border-color: #ececec">
        <SpecialDays>
            <telerik:RadCalendarDay Date="" Repeatable="Today">
                <ItemStyle BorderColor="#FF6600" BorderStyle="Solid" BorderWidth="1px" />
            </telerik:RadCalendarDay>
            <telerik:RadCalendarDay Date="" IsWeekend="True">
                <ItemStyle BackColor="#E8E8E8" />
            </telerik:RadCalendarDay>
        </SpecialDays>
        <ClientEvents OnDateSelected="OnDateSelected" />
    </telerik:RadCalendar>
    </div>
    </form>
</body>

C#:

        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack)
            {
                string eventTarget = (this.Request["__EVENTTARGET"] == null ? string.Empty : this.Request["__EVENTTARGET"]);
                string eventArgument = (this.Request["__EVENTARGUMENT"] == null ? string.Empty : this.Request["__EVENTARGUMENT"]);
                if (eventTarget == "SpecialPostBack")
                {
                    ChooseDateCalendar.SelectedDate = Convert.ToDateTime(eventArgument);
                }
            }
        }

But there may be a more elegant/better solution -- if so, please enlighten me!

Thanks again,
Scott