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

Templates and styles for WebService Scheduler

6 Answers 84 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Cory Hudson
Top achievements
Rank 2
Cory Hudson asked on 01 Jul 2009, 06:03 PM
Hi,

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

Sort by
0
Peter
Telerik team
answered on 03 Jul 2009, 11:56 AM
Hello Cory,

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.
0
Matthias
Top achievements
Rank 1
answered on 25 Jan 2018, 01:52 PM

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.

0
Peter Milchev
Telerik team
answered on 25 Jan 2018, 03:06 PM
Hello Matthias,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Matthias
Top achievements
Rank 1
answered on 25 Jan 2018, 03:27 PM

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

0
Matthias
Top achievements
Rank 1
answered on 25 Jan 2018, 04:23 PM

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.

0
Peter Milchev
Telerik team
answered on 30 Jan 2018, 09:45 AM
Hello Matthias,

You are correct, when the RenderMode of the Scheduler is set to Classic, var rsAptContentDiv = $(this).parent(); should be used. If the RenderMode is Lightweightvar 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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Scheduler
Asked by
Cory Hudson
Top achievements
Rank 2
Answers by
Peter
Telerik team
Matthias
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or