I am building some prototype schedulers for an upcoming project we have. In one example, I am using a webservice/xmlprovider to supply the appointment information for the scheduler.
I am trying to test out the styling of appointments and templates(appointment, insert, edit).
Utilizing the following code and client event, I can begin to change some of the things I want, but I still can't seem to get the same result as when I build templates in the scheduler markup. Is there a way to get client access to the template objects, or another approach to build client templates for appointments?
function OnClientAppointmentCreated(sender, eventArgs) { |
//eventArgs.get_appointment().get_element().style.backgroundColor = "Blue" |
} |
In general, I am trying to achieve a result like this example but in a client webservice environment.
Any suggestions?
6 Answers, 1 is accepted
Templates are not supported in client-side binding mode. We are currently researching for a solution to this problem.
Greetings,
Peter
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Hello together,
since 2009, is there any new information?
We bound a REDScheduler (appended with the "Scenario Wizard / Web Service with Custom Provider") with:
<WebServiceSettings Path="SchedulerWebService.asmx" ResourcePopulationMode="ServerSide" />
Now in 2017, it seems that the flag <AppointmentTemplate> tag still does not work.
Must we use an classic serverside databindigng instead?
Greetings.
The WebService binding does not trigger a postback, hence, server templates cannot be used in this scenario.
Nevertheless, you can use client templates as demonstrated in the Scheduler - Web Service online demo (which uses jQuery templates):
Template:
<%--<
Templates
>--%>
<
script
id
=
"tmplAppDescription"
type
=
"text/x-jquery-tmpl"
>
<
div
style
=
'font-style: italic;'
>${Description}</
div
>
</
script
>
<%--</
Templates
>--%>
Adding the scripts for the jQuery template:
protected
void
Page_Load(
object
sender, EventArgs e)
{
ScriptManager manager = RadScriptManager.GetCurrent(Page);
manager.Scripts.Add(
new
ScriptReference(
"Telerik.Web.UI.Common.Core.js"
,
"Telerik.Web.UI"
));
manager.Scripts.Add(
new
ScriptReference(
"Telerik.Web.UI.Common.jQuery.js"
,
"Telerik.Web.UI"
));
manager.Scripts.Add(
new
ScriptReference(
"Telerik.Web.UI.Common.jQueryInclude.js"
,
"Telerik.Web.UI"
));
manager.Scripts.Add(
new
ScriptReference(ResolveUrl(
"Scripts/jquery.tmpl.js"
)));
// other code here
}
Instantiating and populating the template:
window.onSchedulerDataBound =
function
(scheduler) {
var
$ = jQuery;
$(
".rsAptDelete"
).each(
function
() {
var
apt = scheduler.getAppointmentFromDomElement(
this
);
// creating an object containing the data that should be applied on the template
var
tmplValue = { Description: apt.get_description() };
// instantiate the template, populate it and insert before the content div (".rsAptContent")
var
rsAptContentDiv = $(
this
).parent().children().first();
$(
"#tmplAppDescription"
).tmpl(tmplValue).appendTo(rsAptContentDiv);
});
};
Regards,
Peter Milchev
Progress Telerik
Hi Peter,
thank you for your very fast reaction.
In the meantime I have found this solution in this other Posting: https://www.telerik.com/forums/appointment-template-with-radscheduler-using-webservice . I adapt it (your highlighted code parts) 1:1 to our project, but i don't see any changes in my client-rendering. I am working on it...
Best regards
it seems that I have found the solution for my problem:
> // instantiate the template, populate it and insert before the content div (".rsAptContent")
> var rsAptContentDiv = $(this).parent().children().first();
In your current element structure of an appaointment object, this code returns the div ".rsAptDelete" and not the surrounding ".rsAptContent". The (really) added description still stays invisible.
Changing the code to
var rsAptContentDiv = $(this).parent();
returns the searched div and this seems to workaroud the problem.
Now my appointments are titeled with subject and description. Am i on the right way?
Sorry for the formatting of my code. I don't know, how to format it with colors, etc. like you.
Best regards,
thank you for your great support.
You are correct, when the RenderMode of the Scheduler is set to Classic, var rsAptContentDiv = $(this).parent(); should be used. If the RenderMode is Lightweight, var rsAptContentDiv = $(this).parent().children().first(); should be used.
Attached is a sample project isolating the WebServices demo. To run it, the .NET 4.5 version of the Telerik assemblies should be added to the bin folder of the project.
As for the code formatting, you can use the "Format Code Block" button or the CTRL+M shortcut.
Anyway, thank you for sharing your solution with the community.
Regards,
Peter Milchev
Progress Telerik