scheduler datasource refresh based on navigate date range

[Anamika]

Hello,

Our requirement is at first time set Scheduler data source to current user data for current view date range. Everytime user navigate Scheduler get the new start and end date from new view and requery database and refresh Scheduler datasource. I am facing 2 Problems here
1. If i query this.view().satrtDate() and enddate in Scheduler_navigate it gives me daterange from previous view and not to the one i just switched
2. If i use Scheduler_databinding the daterange is good and i invokke Read method with daterange and requery database and return JSonresult. But teh Scheduler is not getting refreshed with new data.
Attached my view file and here is Controller read method
public virtual JsonResult Read([DataSourceRequest] DataSourceRequest request, string data)
{
if (data != null)
{
var ret = Newtonsoft.Json.JsonConvert.DeserializeObject<dynamic>(data);
DateTime start = ret.Start;
DateTime end = ret.End;
return Json(taskService.GetAll(start, end, User.Identity.Name).ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
else
{
DateTime start = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1).Date;
DateTime end = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.DaysInMonth(DateTime.Now.Year, DateTime.Now.Month)).Date;
return Json(taskService.GetAll(start, end, User.Identity.Name).ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

}
-anamika

[Anamika]

this is the view coe
@(Html.Kendo().Scheduler<MvcDesktop.Models.Scheduler.TaskViewModel>()
    .Name("scheduler")
    .Events(e =>
    {
        e.DataBinding("scheduler_dataBinding");
      
    })
    .Views(views =>
    {
        views.DayView();
        views.WorkWeekView(workWeekView => workWeekView.Selected(true));
        views.WeekView();
        views.MonthView();
    })
    .Timezone("Etc/UTC")
    .Resources(resource =>
    {
        resource.Add(m => m.OwnerID)
            .Title("Owner")
            .DataTextField("LoginName")
            .DataValueField("LoginName")
            .DataColorField("Color")
            .DataSource(source => source
                 .Read(read => read.Action("GetCustomers", "Scheduler")));
          
    })
    .DataSource(d => d
        .Model(m => {
            m.Id(f => f.TaskID);
            m.Field(f => f.Title);
            m.Field(f => f.OwnerID);
            m.Field(f => f.Description);
            m.RecurrenceId(f => f.RecurrenceID);
        })
        .Read("Read", "Scheduler")
        .Filter(filters =>
        {
            filters.Add(model => model.OwnerID).IsEqualTo(User.Identity.Name);
        })
    )
)
<script type="text/javascript">
    function scheduler_dataBinding(e) {
        var start =  kendo.format('{0:d}', this.view().startDate());
        var end = kendo.format('{0:d}', this.view().endDate());
        $.ajax({
            url:  "Scheduler/Read",
            data: {
                data: JSON.stringify({Start:start,End:end})
            } , success: function () {             
         
            var scheduler = $("#scheduler").data("kendoScheduler");            scheduler.dataSource.refresh();
        }
        });
    }</script>

[Rosen]

Hello Anamika,

Please refer to this code library project, which demonstrates how to use the view's start/end dates to narrow the events returned by the server.

Regards,
Rosen
Telerik

 

 

[Anamika]

Thanks, serveroperation(true) worked it out. Without that it did not work properly

[Jiam]

Is there any info on how to accomplish this using the javascript Kendo UI Scheduler?

Thanks

[Rosen]

Hello Jiam,

Indeed, there is version of the same code library for Kendo UI Scheduler in the appropriate site section here.

Regards,
Rosen
Telerik

 

 

[Anamika]

Please check this code library Project.
http://www.telerik.com/support/code-library/kendoui-scheduler-server-filtering
this one in JavaScript i believe

[John]

Is there any way to get the new start and end date without going back to the server?  It would be nice to be able to do all of this client side. 

[Rosen]

Hi John,

I'm not sure I understood your question. The view's start and end dates are retrieved on the client and then sent to the server in order correct range of events to be passed. Here is the code snippet from the sample which retrieves the start and end dates:

parameterMap: function (options, operation) {
    if (operation === "read") {
        var scheduler = $("#scheduler").data("kendoScheduler");
        var result = {
            start: scheduler.view().startDate(),
            end: scheduler.view().endDate()
        }
        return kendo.stringify(result);
    }
    return kendo.stringify(options);
}

Regards,
Rosen
Telerik

 

 

[Scarpetta Group]

Is there an example of this using the PHP scheduler wrapper?

[Rosen]

Hello,

 

I'm afraid that we do not have PHP version of the example in question. However, the most important part of the approach is done in JavaScript - this is the parameterMap function implementation which is shown in my previous reply. Thus, there is nothing specific to PHP and you should be able to use the JavaScript version of the sample to get you started with the applying discussed approach in your own application.

 

Regards,
Rosen
Telerik

 

 

[Nick]

Hi,

Currently running a trial to see if Kendo ui is good fit with our app.

I would like the schedular data retrieval completely decoupled from the scheduler.  We currenlty have a full CRUD, search, list api for our front end which we use to diplay data in various ways, e.g. forms, grids, select, etc. and now trying calender\ scheduler.  On navigating to a Scheduler "view" with a different date range, same as all persons above, I would like to know start, end date on visible view.  Using the server filtering means tighly coupling the scheduler and retreiving data. I do have a work around, but it's a hassle and not elegant.  Is there event for "navigationToNewViewComplete" or whatever?  Maybe there is an event I've missed?

Thanks in advance, any help on this would be greatly appreciated.

 

[Rosen]

Hello Nick,

If I have understood your question correct you want to use some kind of a client-side service instead of letting the Scheduler DataSource to communicate directly with the server. This can be implemented via custom DataSource transport. Setting the read/update/destroy/create to functions will let you hook the DataSource to your client-side API methods. You should still be able to use the current view's startDate and endDate methods to retrieve the current date range.

Something similar to the following:

var dataSource = new kendo.data.SchedulerDataSource({
  transport: {
    read: function(options) {
       var scheduler = $("#scheduler").data("kendoScheduler");
       var events = MyDataService.getEventsForRange(
        scheduler.view().startDate(),
        scheduler.view().endDate()
       );
       options.success(events);
    },
    /*...*/
  }
});

If you continue to experience difficulties please consider opening a separate support request where to provide as much information about your scenario as possible.  

Regards,
Rosen
Telerik by Progress

[Hassan]

Hi everyone! 

I am trying to implement the same kind of function but I am using Kendo Scheduler with Angular.. 
So I cannot work with :
var scheduler = $("#scheduler").data("kendoScheduler"); 

Below is how I use the Scheduler, 
<md-content class="content" flex>
<div id="mainScheduler" kendo-scheduler="vm.cscheduler" k-options="vm.schedulerOptions"></div>
</md-content>

I already tried to use vm.cscheduler.view() instead of $("#scheduler").data("kendoScheduler") but it's not working. So maybe I am missing something.

var dataSource = new kendo.data.SchedulerDataSource({
  transport: {
    read: function(options) {
       var scheduler = $("#scheduler").data("kendoScheduler");      
       var events = MyDataService.getEventsForRange(
        scheduler.view().startDate(),
        scheduler.view().endDate()
       );
       options.success(events);
    },
    /*...*/
  }
});

Thanks in advance, any help on this would be greatly appreciated.
Regards, 
Hassan

[Nencho]

Hello Hassan,

I have already replied to the support ticket that you had submitted on the very same matter. I would like to ask you to continue the correspondence in the support ticket, in order to avoid duplication.

Thank you in advance.

Regards,
Nencho
Progress Telerik