Templates and styles for WebService Scheduler

7 posts, 0 answers
  1. Cory Hudson
    Cory Hudson avatar
    12 posts
    Member since:
    Nov 2008

    Posted 01 Jul 2009 Link to this post

    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?
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 03 Jul 2009 Link to this post

    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.
  3. Matthias
    Matthias avatar
    7 posts
    Member since:
    Mar 2014

    Posted 25 Jan 2018 Link to this post

    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.

  4. Peter Milchev
    Admin
    Peter Milchev avatar
    464 posts

    Posted 25 Jan 2018 Link to this post

    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.
  5. Matthias
    Matthias avatar
    7 posts
    Member since:
    Mar 2014

    Posted 25 Jan 2018 in reply to Peter Milchev Link to this post

    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

  6. Matthias
    Matthias avatar
    7 posts
    Member since:
    Mar 2014

    Posted 25 Jan 2018 in reply to Peter Milchev Link to this post

    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.

  7. Peter Milchev
    Admin
    Peter Milchev avatar
    464 posts

    Posted 30 Jan 2018 Link to this post

    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.
Back to Top