Applying resources based on a condition

2 posts, 0 answers
  1. Grant
    Grant avatar
    163 posts
    Member since:
    Jul 2016

    Posted 07 Aug 2019 Link to this post

    Hi, 

    As the title says, is it possible to apply a a resource based on a condition or multiple fields?

    For example, I'd like to colour events based on 'age' and 'country'. eg. country=SA && age<30. 

    Is this possible, or is there a work around that can achieve this?

    Thanks,
    Grant

  2.
  3. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2063 posts

    Posted 08 Aug 2019 Link to this post

    Hi Grant,

    An event can be colored based on a condition that checks the value of a single or several fields, by using eventTemplate. For example:
    <style> 
      .custom-event {
        height: 100%;
        background-color: red;
      }
    </style>
    <script id="event-template" type="text/x-kendo-template">
        #if(data.country == "SA" && data.age < 30){#
          <div class="custom-event">
            <div>Title: #: title #</div>
      </div>
        #}else{#
          <div>
            <div>Title: #: title #</div>
      </div>
        #}#
    </script>

    Passing the template to the Scheduler:
    eventTemplate: $("#event-template").html(),

    Note that those fields don't necessarily have to be set as Scheduler resources. Here's a dojo example that demonstrates this approach. 

    If you set a field as a resource, you can specify how all events that have a specific resource value can be colored. In the example above all events that have the country="SA" resource will be colored "lightblue" and all events with country="US" will be colored "lightgreen", because these are the colors of the country resource.
    { text: "SA", value: "SA", key: "lightblue" },
    { text: "US", value: "US", key: "lightgreen" }

    However, in the template conditionally we add a div element in the template if age < 30, that's why the "Interview SA 20" event is colored in red. 

    However
    Regards,
    Ivan Danchev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top