Vince
Vince

Reputation: 1416

Kendo Scheduler doesn't refresh when changeing the months

I'm trying to implement the Scehduler of Kendo UI in ASP.Net MVC (Razor).

While the scheduler doesn't find any data for the current month view and i change month the scheduler is calling the server to get the data for the new month. If the server return any event, the scheduler is never calling the server again even if i change month on the scheduler with their < > button.

I've put debugger in getAdditionalData (javascript) and Lister (Controller) and both never get called again.

Anyone know which thing did i do wrong ?

Here is the code we use:

Razor:

Html.Kendo().Scheduler<CalendrierEventViewModel>()
    .Name("schedulerCalendrier")
    .DataSource(ds =>
    {
        ds.Model(model => model.Id(x => x.Id));
        ds.Read(read => read.Action("Lister", "Calendrier").Data("getAdditionalData"));
    })
    .Resources(resources =>
    {
        resources.Add(m => m.ColorId)
            .DataValueField("Value")
            .DataColorField("Color")
            .BindTo(new[]
            {
                new { Value = STDConsts.TraitementSuccesColorId,    Color = "#009106" }, // Vert
                new { Value = STDConsts.TraitementErreurColorId,    Color = "#ff2909" }, // Rouge
                new { Value = STDConsts.NouveauTraitementColorId,   Color = "#59006b" }, // Mauve
                new { Value = STDConsts.NouveauEssaiColorId,        Color = "#c9be00" }, // Jaune
                new { Value = STDConsts.NouveauDepotInterneColorId, Color = "#0006a4" }, // Bleu poudre
                new { Value = STDConsts.NouveauDepotExterneColorId, Color = "#BBDEFB" }, // Bleu marin
                new { Value = STDConsts.DonneeConvertieColorId,     Color = "#0500ef" }, // Bleu
            });
    })
    .EventTemplateId("event-template")
    .Views(views =>
    {
        views.MonthView(montView => montView.Selected(true));
    })
    .Editable(false)

Javascript:

<script>
   var vehiculeMultiSelect;

    function getAdditionalData() {
        var scheduler = $("#schedulerCalendrier").data("kendoScheduler");
        var vehiculeIds = [];

        if (vehiculeMultiSelect === undefined) {
            $("#vehiculeList option:selected").each(function (index, element) {
                vehiculeIds.push($(this).val());
            });
        } else {
            vehiculeIds = vehiculeMultiSelect.getIds();
        }

        var result = {
            start: scheduler.view().startDate().toISOString(),
            end: scheduler.view().endDate().toISOString(),
            vehiculeIds: vehiculeMultiSelect !== undefined ? vehiculeMultiSelect.getIds() : vehiculeIds
        }

        return result;
    }
</script>

Event Template

<script id="event-template" type="text/x-kendo-template">
    <div title="#= title #">
        <div class="k-event-template">
            <a class="calendar-event" href="@Url.Action("Index", "Historique", new { Area = "Suivi" })?Date=#= kendo.toString(start, 'yyyy-MM-dd') #">
                #= title #
            </a>
        </div>
    </div>
</script>

Controller:

    [HttpGet]
    public ActionResult Index()
    {
        Collection<VehiculeViewModel> vehicules = _calendrierImpl.GetVehiculesForCurrentUser();
        CalendrierViewModel model = new CalendrierViewModel { Vehicules = vehicules.OrderBy(x => x.Nom) };
        return View(model);
    }

    public ActionResult Lister([DataSourceRequest]DataSourceRequest request, DateTime start, DateTime end, int[] vehiculeIds)
    {
        TempData[STDConsts.VehiculeIdsKey] = vehiculeIds;
        Collection<CalendrierEventViewModel> list = _calendrierImpl.GetListCalendrier(start, end, vehiculeIds);
        return Json(list.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }

Upvotes: 0

Views: 896

Answers (1)

Vince
Vince

Reputation: 1416

I found the solution in a demo project of github!!

    .DataSource(ds =>
    {
        ds.Model(model => model.Id(x => x.Id));
        ds.Read(read => read.Action("Lister", "Calendrier").Data("getAdditionalData"));
        ds.ServerOperation(true);
    })

I needed to add in my datasource ds.ServerOperation(true); With this line of code the server always get called even if we get any data for a previous month.

Upvotes: 1

Related Questions