scheduler datasource refresh based on navigate date range

13 posts, 0 answers
  1. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 03 Jul 2014 Link to this post

    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
  2. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 03 Jul 2014 Link to this post

    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>
  3. Kendo UI is VS 2017 Ready
  4. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 04 Jul 2014 Link to this post

    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!
     
  5. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 07 Jul 2014 in reply to Rosen Link to this post

    Thanks, serveroperation(true) worked it out. Without that it did not work properly
  6. Jiam
    Jiam avatar
    3 posts
    Member since:
    Jul 2014

    Posted 08 Jul 2014 Link to this post

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

    Thanks
  7. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 09 Jul 2014 Link to this post

    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!
     
  8. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 09 Jul 2014 in reply to Jiam Link to this post

    Please check this code library Project.
    http://www.telerik.com/support/code-library/kendoui-scheduler-server-filtering
    this one in JavaScript i believe
  9. John
    John avatar
    5 posts
    Member since:
    Jun 2011

    Posted 05 Jan 2015 Link to this post

    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. 
  10. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 06 Jan 2015 Link to this post

    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!
     
  11. Scarpetta Group
    Scarpetta Group avatar
    1 posts
    Member since:
    Jan 2016

    Posted 25 Jan Link to this post

    Is there an example of this using the PHP scheduler wrapper?
  12. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 26 Jan Link to this post

    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!
     
  13. Nick
    Nick avatar
    1 posts
    Member since:
    May 2015

    Posted 15 Nov in reply to Rosen Link to this post

    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.

     

  14. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 16 Nov Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready