Scheduler / Timeline view : filters

[Philippe]

Hi,

We have implemented a scheduler for managing activities with some filters. It works fine but we are confronted to some problems.

 

So, for ressources we have a list of products, and each events is associated to an event.The first problem is that the list is little big. So when we apply the filters we need to filter events and ressources. Actually for doing this we catch event filterings and we get ids by applying filter to the events for refreshing ressources. But when we refresh ressources, that refresh events read. It works but it's very slow when we swithch days and weeks.

var selected = new Array();
        var selectedSites = new Array();
        var scheduler = $("#mainScheduler").data("kendoScheduler");
        var dataSource = scheduler.dataSource;
        var filters = dataSource.filter();
        var allData = dataSource.data();
        var query = new kendo.data.Query(allData);
        var filteredData = query.filter(filters).data;
        $.each(filteredData, function(index, item) {
            if ($.inArray("" + item.RendezVousID + "", selected) === -1) {
                selected.push("" + item.RendezVousID + "");
            }
            if ($.inArray("" + item.SiteID + "", selectedSites) === -1) {
                selectedSites.push("" + item.SiteID + "");
            }
        });


        $.ajax({
            url: '@Url.Action("GetProduitsSitesFilter", "Schedule")',
            data: { activiteId: @Model.ActiviteID, products: selected.join(","), sites: selectedSites.join(",") },
            type: 'POST',
            async: false,
            success: function(data) {
                var dataSch = [];
                for (var i = 0; i < data.length; i++) {
                    var content = data[i].Text;
                    dataSch.push({ Text: content, ProdLibelleCourtEndode: content, Value: data[i].Value });
                }
                subDataSource.data(dataSch);
                $("#isFilter").val("1");

            }
        });

 

We are just looking an easy way for filtering events and ressources just matching with events.

[Plamen]

Hello,

You can refer to this help article where is described how we recommend you filter events and this forum thread where is shown how the resources can be filtered.

Regards,
Plamen
Telerik by Progress

[Philippe]

Hi, Thanks for the answer but i think i did'nt explain fine.

So for be clear.

I have events => with primary key EventID.

Filters (Locations, FamilyProducts, Monitors, Case Type)

Ressources => List of products with a location place.

Filtering Locations and family products no problem easy way, but other filters are only plugged to the events. So depends of the results i will filter ressources for displaying only ressources with associated events .

 

So my idea was to use the same request for getting events and to select only ressources assioted. (Select Ressources WHERE ResID IN(SELECT ALL Events WHERE Stard and end and filters))

So this aproach could work but when we navigate to the schedule (change week for example), doesn't work because ressources are loading before new dates are enable. So We are obliged to get events before and refresh ressoucers and because ressources are change events are reload.

Hope you understand my problem. Sorry my english is poor, i tried to be clear.

[Veselin Tsvetanov]

Hi Philippe,

May I ask you to prepare a small runnable Dojo sample (or an MVC project), that replicates the scenario described? This will help us understand better the case and the issue faced.

Regards,
Veselin Tsvetanov
Telerik by Progress

[Philippe]

[quote]@using A6tm.Sellor.Business.Models.ManagerViewModel
@using Kendo.Mvc.UI
@using A6tm.Sellor.Web.ViewModels

@model ScheduleViewModel

@{
    ViewBag.Title = "Planning";
    Layout = null;
}

<style>
    .main-container {
        padding-bottom: 0 !important;
    }


    .k-nav-prev {
        margin-left: -14px;
    }
</style>


@{


    var MajorTimeHeaderTemplate = @"<div style='display:block;widdth:100%;text-align:left;'>
                                         <div class='col-sm-4' style='text-align:center;padding:0'>Matin</div>
                                         <div class='col-sm-4' style='text-align:center;padding:0'>Après-midi</div>
                                         <div class='col-sm-4' style='text-align:center;padding:0'>Soir</div>
                                   </div>";

    var DateHeaderTemplate = @"<span class='k-link k-nav-day'>#=kendo.toString(date, 'dddd dd MMMM')#</span>";

    var EventTemplate = @"<div class='rdv-template' style='padding-right:2px;font-size:80%'>
                                 <div>
                                    <div class='rdvHover' data-rdvId='#=RendezVousID#' style='display:none;'>
                                    </div>
                                    <p> #= kendo.toString(start, 'HH:mm') # - #= kendo.toString(end, 'HH:mm') # </p>
                                    <p style='font-size:10px;bottom:0'> <br/>#= RendNbInscrit # / #= RendNbPlaceMax # </p>
                                    #if(RendAssociation && !RendezVousIsHorraireDif) {#
                                        <i style='black;position:absolute; top:42px;right:5px;font-size: 10px'class='fa fa-link'></i>
                                    #}#
                                    #if(RendezVousIsHorraireDif) {#
                                        <i style='black;position:absolute; top:42px;right:5px;font-size: 10px'class='fa fa-chain-broken'></i>
                                    #}#
                                    #if(IdMoniteurs != null) {#
                                        <i style='color:rgb(255,255,0);position:absolute; top:20px;right:5px;font-size: 10px'class='fa fa-user'></i>
                                    #}#
                                    #if(RendInfoImportante != '') {#
                                        <i style='color:rgb(199,27,72);position:absolute; top:36px;right:4px;font-size: 10px'class='fa fa-exclamation-triangle'></i>
                                    #}#
                                 </div>
                             </div>";

}


@(Html.Kendo().Scheduler<NRendezVousViewModel>()
   .Name("Scheduler")
   .Pdf(pdf => pdf.FileName("Planning.pdf").ProxyURL(Url.Action("Pdf_Export_Save", "Schedule")))
   .AutoBind(true)
   .Toolbar(t => t.Pdf())
   .Selectable(false)
   .EventTemplate(EventTemplate)
   .Date(DateTime.Now).Timezone("Europe/Paris").Selectable(false)
   .WorkWeekEnd(7)
   .Messages(message =>
   {
       message.Editor(editor =>
       {
           editor.Title("Résumé");
           editor.EditorTitle("Séance");
           editor.End("Fin");
           editor.Start("Début");
           editor.AllDayEvent("Journée entière");
       });
       message.Today("Aujourd'hui");
       message.DeleteWindowTitle("Supprimer rendez-vous");
       message.Cancel("annuler");
       message.Save("Enregistrer");
       message.Destroy("Supprimer");
   }
            )
   .Editable(e => e.Resize(false))
   .Views(views =>
   {
       views.TimelineView(timeline =>
       {
           timeline.GroupHeaderTemplate("#= htmlDecode(text) #");
           timeline.StartTime(new DateTime(2015, 7, 27, 8, 00, 00));
           timeline.EndTime(new DateTime(2015, 7, 27, 20, 00, 00));
           timeline.EventHeight(110);
           timeline.MajorTick(720);
           timeline.MinorTickCount(3);
           timeline.Title("Jour");
           timeline.MajorTimeHeaderTemplate(MajorTimeHeaderTemplate);
       });
       views.TimelineWeekView(timeline =>
       {
           timeline.GroupHeaderTemplate("#= htmlDecode(text) #");
           timeline.ShowWorkHours(true);
           timeline.DateHeaderTemplate(DateHeaderTemplate);
           timeline.Selected(true);
           timeline.EventHeight(75);
           timeline.MajorTick(720);
           timeline.MinorTickCount(3);
           timeline.ColumnWidth(80);
           timeline.Title("Semaine");
           timeline.StartTime(new DateTime(2015, 7, 27, 8, 00, 00));
           timeline.EndTime(new DateTime(2015, 7, 27, 20, 00, 00));
           timeline.MajorTimeHeaderTemplate(MajorTimeHeaderTemplate);
       });
       views.TimelineWorkWeekView(timeline =>
       {
           timeline.GroupHeaderTemplate("#= htmlDecode(text) #");
           timeline.DateHeaderTemplate(DateHeaderTemplate);
           timeline.EventHeight(110);
           timeline.Title("Semaine marées");
           timeline.MajorTick(360);
       });
       views.TimelineMonthView(timeline =>
       {
           timeline.GroupHeaderTemplate("#= htmlDecode(text) #");
           timeline.DateHeaderTemplate(DateHeaderTemplate);
           timeline.EventHeight(120);
           timeline.MajorTick(720);
           timeline.MinorTickCount(3);
           timeline.Title("Mois");
           timeline.StartTime(new DateTime(2015, 7, 27, 8, 00, 00));
           timeline.EndTime(new DateTime(2015, 7, 27, 20, 00, 00));
           timeline.MajorTimeHeaderTemplate(MajorTimeHeaderTemplate);
       });
   }
 )
              .Timezone("Europe/Paris")
              .Group(group => group.Resources("Produits")
              .Orientation(SchedulerGroupOrientation.Vertical))
              .Events(e => e.Navigate("RefreshRessources"))
                      .Resources(resource =>
                      {
                          resource.Add(m => m.RendStatut)
                          .DataTextField("Text")
                          .DataValueField("Value")
                          .DataColorField("Color")
                          .DataSource(ds => ds.Read("GetStatutRendezVous", "SelectList"));
                          resource.Add(m => m.RendezVousSiteProduitID)
                              .Title("Produits")
                              .Name("Produits")
                              .DataTextField("Text")
                              .DataValueField("Value")
                              .DataSource(ds => ds.Read(read => read.Action("GetRendezVousSiteProduit", "NSchedule",
                                    new { activiteId = Model.ActiviteID }).Data("getAdditionalData")));
                      })
              .DataSource(d => d
                  .Model(m =>
                  {
                      m.Id(f => f.RendezVousID);
                  })
                  .ServerOperation(true)
                  .Read(read => read.Action("Read", "NSchedule", new { activiteId = Model.ActiviteID }).Data("getAdditionalData"))
                  .Destroy("Delete", "Schedule")
                  .Update(update => update.Action("Edit", "Schedule"))
                  .Create(update => update.Action("Create", "Schedule"))
))

<script>

    function htmlDecode(value) {
        return value.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"");
    }

    function getAdditionalData() {
        var scheduler = $("#Scheduler").data("kendoScheduler");
        var result = {};
        if (typeof scheduler.view() !== 'undefined') {
            result = { start: scheduler.view().startDate().toISOString(), end: scheduler.view().endDate().toISOString() }
        }
        else {
            result = { start: moment().startOf('week').toISOString(), end: moment().endOf('week').toISOString() }
        }

        //var result = { start: scheduler.view().startDate().toISOString(), end: scheduler.view().endDate().toISOString() }
        console.log(result);
        return result;
    }

    function RefreshRessources() {
        var scheduler = $("#Scheduler").data("kendoScheduler");
        scheduler.resources[1].dataSource.read()
        scheduler.view(scheduler.view().name);
        scheduler.refresh();
    }


    $(window).resize(function () {
        clearTimeout(window._resizeId);
        window._resizeId = setTimeout(function () {
            console.log("resize");
            fitWidget();
        }, 500);
    });

    $(document).ready(function () {
        var widget = $("#Scheduler").data("kendoScheduler");
        var height = $(window).height() - 270;
        widget.element.height(height);
        widget.resize(true);
        setTimeout("reloadFilters();", 1000);
    });

</script>

[/quote]

 

In fact for doing what i want i need to get the start date and end date for loading my resources

[Philippe]

In fact for doing what i want i need to get the start date and end date for loading my resources but when the read is loading "scheduler.view()" is undefined. So Is there any other way for getting this dates before view is totally build?

[Philippe]

Is there any other way for getting start date and end date before sheduler is totally load? The idea is to load ressources with this parameters in ajax.

[Philippe]

Is there any other way for getting start date and end date before scheduler is totally load? I need to set this parameters for loading ressources.

[Philippe]

Sorry when i send posts the website has crashed so you can delete duplicate posts.

[Veselin Tsvetanov]

Hello Philippe,

Thank you for the additional information provided. As far as I can understand, you need to know, which is the start and end date of the view that the user navigates to, before the view (and the vents in it) are actually loaded.

If this is your case, I would suggest you to retrieve the needed information in the ​Navigate event handler of the Scheduler and pass it to variables:

var navigatedToSelectedDate;
var navigatedToViewType;

function RefreshRessources(e) {
    navigatedToSelectedDate = e.date;
    navigatedToViewType = e.view;
    e.sender.resources[1].dataSource.read();
}

Then in the Data function of the Resource DataSource, you could access that info and pass the respective dates to the server:

function getAdditionalData(e) {
    var result = {};
    if (navigatedToSelectedDate) {
        if (navigatedToViewType === 'month') {
            result = {
                start: getMonday(navigatedToSelectedDate).toISOString(),
                end: getMonday(navigatedToSelectedDate).addDays(6 * 7 - 1).toISOString()
                // as the monthview displays 6 weeks
            }
        } else {
            result = {
                start: navigatedToSelectedDate.toISOString(),
                end: navigatedToSelectedDate.addDays(6).toISOString()
            }
        }

        navigatedToSelectedDate = null;
        navigatedToViewType = null;
    }
...............

Attached you will find a sample project implementing the above. Note, that the sample needs to be further adjusted according to your specific needs.

Regards,
Veselin Tsvetanov
Telerik by Progress

[Philippe]

thanks, work like a charm.