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

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

6 Answers 160 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Tomica
Top achievements
Rank 2
Tomica asked on 21 Apr 2008, 05:28 PM
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

6 Answers, 1 is accepted

Sort by
0
Steve
Telerik team
answered on 24 Apr 2008, 03:05 PM
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
0
Tomica
Top achievements
Rank 2
answered on 24 Apr 2008, 03:50 PM
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.
0
Accepted
Steve
Telerik team
answered on 25 Apr 2008, 09:47 AM
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
0
Tomica
Top achievements
Rank 2
answered on 25 Apr 2008, 12:38 PM
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".
0
Scott
Top achievements
Rank 1
answered on 05 Oct 2008, 12:48 AM

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

 

0
Scott
Top achievements
Rank 1
answered on 05 Oct 2008, 01:47 AM
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
Tags
Calendar
Asked by
Tomica
Top achievements
Rank 2
Answers by
Steve
Telerik team
Tomica
Top achievements
Rank 2
Scott
Top achievements
Rank 1
Share this question
or