[Solved] Exporting Appointments When Client-Side Binding

[Brian Mains]

Hello,

Do you have an example of how appointments get exported when bound to a web service?  I'm updating my code to use the WS approach and my previous setup didn't work (which, or course, was exporting the ICS from the server).

Thanks.

[Dimitar Milushev]

Hello Brian,

We do not have such an example available. The ExportToICalendar method is static and you don't need a Scheduler instance to use it. You can use it to create a method in your webservice that builds the ICS file using the same approach used in the code-behind of our Export demo.

Best wishes,
Dimitar Milushev
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.

[Jim]

Boy, It would help me a ton to see some kind of sample code on how to do this.  Please...
Most important example being how to add the button to the Appointment. All I need is to capture the appointment Id to the onclick event. onclick="Export(this,' " + $AppId + " '); return false;".  I can do the rest on the backend/ 

<script id="tmplApptExtended" type="text/x-jquery-tmpl">
            <div style='font-style:italic;'>
                <b>${ApptName}</b>
                <h3>${ApptType}</h3>
                <h3>${Location}</h3>
            </div>
            <div style="text-align: right;">
                <input id="btnICal" type="button" value="button" onclick="Export(this,event); return false;" Style="cursor: pointer; cursor: hand;" />
            </div>
        </script>

[Peter]

Hi James,

Please, refer to the Web Service demo. You can get the appointment object with the scheduler.getAppointmentFromDomElement() method. Note, that you will need the new plugin for jQuery - Templates.


Greetings,
Peter
the Telerik team

[Jim]

Thanks,
But I don't think I explained my problem correctly which is, how do you add the export button to the appointments on a scheduler that is bound using webservices.

The following code works great just need to see example on how to add the export button -  I think this is simple but I am just not seeing:

<script id="tmplApptExtended" type="text/x-jquery-tmpl"> 

  <div style='font-style:italic;'> 

    <b>${ApptName}</b> 

    <h3>${ApptType}</h3> 

    <h3>${Location}</h3> 

  </div> 

</script>


 

 

function OnClientDataBound(scheduler) {
                var $ = jQuery;
                $(".rsAptDelete").each(function() {
                    var appt = scheduler.getAppointmentFromDomElement(this);
                    // creating an object containing the data that should be applied on the template
                    var attributes = appt.get_attributes();
                    //var desc = appt.get_description();
                    var apptName = attributes.getAttribute("ApptName");
                    var apptType = attributes.getAttribute("ApptType");
                    var location = attributes.getAttribute("Location");
                    var tmplValue = { ApptName: apptName, ApptType: apptType, Location: location};
                    // instantiate the template, populate it and insert before the delete handler (".rsAptDelete")
                    $("#tmplApptExtended").tmpl(tmplValue).insertBefore(this);
                });
            }

 

 

[Peter]

Hello James,

Here is one possible way to get the id of the appointment:

<%--<Templates>--%>
   <script id="tmplApptExtended" type="text/x-jquery-tmpl">
     <div style='font-style:italic; color:green'>
       <input id="Button2" type="button" value="button"  onclick="Export(${ApptID})"  />
     </div>
   </script>
   <%--</Templates>--%>
   <script type="text/javascript">

       function Export(e) {
           alert(e);
       }
       function onSchedulerDataBound(scheduler) {
           var $ = jQuery;
           $(".rsAptDelete").each(function () {
               var appt = scheduler.getAppointmentFromDomElement(this);

               var apptID = appt.get_id();
               var tmplValue = { ApptID: apptID };
               // instantiate the template, populate it and insert before the delete handler (".rsAptDelete")
               $("#tmplApptExtended").tmpl(tmplValue).insertBefore(this);
           });
       }
   </script>

Best wishes,
Peter
the Telerik team

[Jim]

Very Nice! So So simple.  Thanks

[Prava kafle]

Hi,

I have a webservice bound scheduler too and I am getting "undefined is not a fxn " error  on $(".rsAptDelete").each(function()
Am I missing anything here?

Thanks,
Prava

[Plamen]

Hi Prava,

 
You can refer to this Code Library where this functionality  is implemented.

Hope this will be helpful.

Regards,
Plamen
Telerik