This is a migrated thread and some comments may be shown as answers.

scheduler datasource refresh based on navigate date range

14 Answers 1458 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Anamika
Top achievements
Rank 1
Anamika asked on 03 Jul 2014, 08:30 AM
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

14 Answers, 1 is accepted

Sort by
0
Anamika
Top achievements
Rank 1
answered on 03 Jul 2014, 08:32 AM
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>
0
Rosen
Telerik team
answered on 04 Jul 2014, 07:04 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Anamika
Top achievements
Rank 1
answered on 07 Jul 2014, 08:30 AM
Thanks, serveroperation(true) worked it out. Without that it did not work properly
0
Jiam
Top achievements
Rank 1
answered on 08 Jul 2014, 07:10 PM
Is there any info on how to accomplish this using the javascript Kendo UI Scheduler?

Thanks
0
Rosen
Telerik team
answered on 09 Jul 2014, 06:03 AM
Hello Jiam,

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

Regards,
Rosen
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Anamika
Top achievements
Rank 1
answered on 09 Jul 2014, 06:03 AM
Please check this code library Project.
http://www.telerik.com/support/code-library/kendoui-scheduler-server-filtering
this one in JavaScript i believe
0
John
Top achievements
Rank 1
answered on 05 Jan 2015, 04:40 PM
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. 
0
Rosen
Telerik team
answered on 06 Jan 2015, 07:17 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Scarpetta Group
Top achievements
Rank 1
answered on 25 Jan 2016, 09:03 PM
Is there an example of this using the PHP scheduler wrapper?
0
Rosen
Telerik team
answered on 26 Jan 2016, 09:22 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Nick
Top achievements
Rank 1
answered on 15 Nov 2016, 07:18 PM

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.

 

0
Rosen
Telerik team
answered on 16 Nov 2016, 07:15 AM

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
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.
0
Hassan
Top achievements
Rank 1
answered on 13 Jun 2017, 05:57 PM

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

0
Nencho
Telerik team
answered on 15 Jun 2017, 12:45 PM
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
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.
Tags
Scheduler
Asked by
Anamika
Top achievements
Rank 1
Answers by
Anamika
Top achievements
Rank 1
Rosen
Telerik team
Jiam
Top achievements
Rank 1
John
Top achievements
Rank 1
Scarpetta Group
Top achievements
Rank 1
Nick
Top achievements
Rank 1
Hassan
Top achievements
Rank 1
Nencho
Telerik team
Share this question
or