Scheduler / Timeline view : filters

11 posts, 0 answers
  1. Philippe
    Philippe avatar
    31 posts
    Member since:
    Sep 2009

    Posted 06 Jan Link to this post

    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.

  2. Plamen
    Admin
    Plamen avatar
    2793 posts

    Posted 10 Jan Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Philippe
    Philippe avatar
    31 posts
    Member since:
    Sep 2009

    Posted 17 Jan Link to this post

    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.

  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    516 posts

    Posted 18 Jan Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Philippe
    Philippe avatar
    31 posts
    Member since:
    Sep 2009

    Posted 24 Jan Link to this post

    @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>

     

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

  6. Philippe
    Philippe avatar
    31 posts
    Member since:
    Sep 2009

    Posted 24 Jan Link to this post

    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?
  7. Philippe
    Philippe avatar
    31 posts
    Member since:
    Sep 2009

    Posted 24 Jan Link to this post

    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.
  8. Philippe
    Philippe avatar
    31 posts
    Member since:
    Sep 2009

    Posted 24 Jan Link to this post

    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.
  9. Philippe
    Philippe avatar
    31 posts
    Member since:
    Sep 2009

    Posted 24 Jan Link to this post

    Sorry when i send posts the website has crashed so you can delete duplicate posts.
  10. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    516 posts

    Posted 25 Jan Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  11. Philippe
    Philippe avatar
    31 posts
    Member since:
    Sep 2009

    Posted 30 Jan Link to this post

    thanks, work like a charm.
Back to Top