Filter vertical axis configuration based on configuration associated parameters in Timeline Week view

3 posts, 1 answers
  1. Matt Dufrasne
    Matt Dufrasne avatar
    23 posts
    Member since:
    Aug 2009

    Posted 21 Sep Link to this post

    There are two queries in Timeline Week view of Scheduler:

    1) Is it possible to filter vertical axis configurations based on configurations associated parameter (Each configuration carries its physical location). 

     I have a custom filter on page, as soon as i enter location in that filter, it should filter vertical axis configurations based on entered value.

    In the attached file, all red configurations has location 'A', all blue has location 'B' and the black has location 'C'

    Only black configuration has appointments. However, blue and red doesn't have appointments.

    I'm trying to filter out blue and red configurations from the vertical axis by entering physical location of black one i.e. 'C' in custom filter. So on vertical axis, i should not see blue and red configurations since it has location as A and B.

    Here are the views:

    views: [
                        {
                            type: "day",
                            title: "Today",
                            workDayStart: new Date("2016/1/1 07:00 AM"),
                            workDayEnd: new Date("2016/1/1 07:00 PM")
                        }, {
                            type: "week",
                            title: "Week",
                            selected: true,
                            workDayStart: new Date("2016/1/1 07:00 AM"),
                            workDayEnd: new Date("2016/1/1 07:00 PM")
                         },
                        {
                            type: "workWeek",
                            title: "Work Week",
                            workDayStart: new Date("2016/1/1 07:00 AM"),
                            workDayEnd: new Date("2016/1/1 07:00 PM")
                        },
                        {
                            type: "agenda",
                            eventTemplate: "<reservation-agenda></reservation-agenda>"
                        },
                        {
                            type: "timelineWeek",
                            columnWidth: 150,
                            majorTick: 720,
                            minorTickCount: 1,
                            group: {
                                resources: ["Configurations"],
                                orientation: "vertical"
                            },
                            workDayStart: new Date("2016/1/1 07:00 AM"),
                            workDayEnd: new Date("2016/1/1 07:00 PM")
                        },
                        {
                            type: "timelineWorkWeek",
                            columnWidth: 150,
                            majorTick: 720,
                            minorTickCount: 1,
                            group: {
                                resources: ["Configurations"],
                                orientation: "vertical"
                            },
                            workDayStart: new Date("2016/1/1 07:00 AM"),
                            workDayEnd: new Date("2016/1/1 07:00 PM")
                        }
                    ],

    Basically need some way to filter vertical axis configurations based on condition in Timeline Week view

    2)In the attached file, the yellow circle mark has the current time shown as red line. Can't we display the current time or display current time on hover over red line. It will tell upfront the current time and will be more intuitive to user.

     

  2. Answer
    Plamen
    Admin
    Plamen avatar
    2730 posts

    Posted 22 Sep Link to this post

    Hi,

    1) You can filter the resource datasource accordiong to your custom scenario and reload the resources as for example it is done in this dojo page.

    2) You can use kendo tooltip as for example in the code below:
    var tooltip = $("#scheduler").kendoTooltip({
                          filter: ".k-current-time",
                          width: 120,
                          position: "top",
                          content: function(e) {
                              return new Date();
                            }
                      }).data("kendoTooltip");


    Regards,
    Plamen
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Matt Dufrasne
    Matt Dufrasne avatar
    23 posts
    Member since:
    Aug 2009

    Posted 26 Sep Link to this post

    Awesome, Thanks Plamen!

    1) Followed the resources datasource filter logic and it worked in my custom scenario as well.

    2) The date wasn't visible in kendo tooltip. Needed to change CSS and also formated date below. Updated like below.

    $("#scheduler").kendoTooltip({
                    filter: ".k-current-time",
                    width: 120,
                    position: "top",
                    content: function(e) {
                        return moment(new Date()).format("MM/DD/YYYY h:mm:ss A");
                    }
                }).data("kendoTooltip");

     

    CSS:

    .k-widget.k-tooltip {
        background-color: #4f8903 !important;
        ;
    }

Back to Top