Using Custom Views

4 posts, 1 answers
  1. Sage
    Sage avatar
    3 posts
    Member since:
    Apr 2014

    Posted 16 Apr 2014 Link to this post

    I'm using a scheduler in cshtml:
    @(Html.Kendo().Scheduler<TaskViewModel>()
                .Name("scheduler")
                .Views(views => { views.CustomView("ThreeDayView"); })
                .DataSource(d => d
                    .Read("Read", "Home")
                    .Create("Create", "Home")
                    .Destroy("Destroy", "Home")
                    .Update("Update", "Home")
                )
     
        )



    In this scheduler I'm using a custom view defined below.  This works fine in making the scheduler only show 3 days at a time. However the next day and previous day functionality doesn't work.  I'm assuming I have to overwrite the previousday and nextday functionality, but am not sure how.  What I expect to happen is for the view to advance 1 day at a time (i.e. April 16 - 18 moves to April 17 - 19).

    Also I am wanting to add custom edit functionality.  So when a task / event is clicked on, I want to do something other then opening the edit window (i.e set some variable) I think this is done with overwriting the editable function in the below jscript, but again am not sure how.  Any help and/or examples are greatly appreciated 
    var ThreeDayView = kendo.ui.MultiDayView.extend({
                options: {
                    selectedDateFormat: "{0:D} - {1:D}"
                },
                name: "ThreeDayView",
                calculateDateRange: function () {
                    //create a range of dates to be shown within the view
     
                    var selectedDate = this.options.date,
                        start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),
                        idx, length,
                        dates = [];
     
                    for (idx = 0, length = 3; idx < length; idx++) {
                        dates.push(start);
                        start = kendo.date.nextDay(start);
                    }
     
                    this._render(dates);
                }
            });
  2. Answer
    Rosen
    Admin
    Rosen avatar
    3236 posts

    Posted 17 Apr 2014 Link to this post

    Hello Sage,

    In order the custom view to behave as you have described, the nextDate method should be overridden to return the next to the start date. Also with the current implementation the view always starts at the first day of the week, which does not comply to the behavior you are looking for:

    var ThreeDayView = kendo.ui.MultiDayView.extend({
        nextDate: function () {
            return kendo.date.nextDay(this.startDate());
        },
        options: {
            selectedDateFormat: "{0:D} - {1:D}"
        },
        name: "ThreeDayView",
        calculateDateRange: function () {
            //create a range of dates to be shown within the view
     
            var //selectedDate = this.options.date,
               // start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),
               start = this.options.date,
                idx, length,
                dates = [];
     
            for (idx = 0, length = 3; idx < length; idx++) {
                dates.push(start);
                start = kendo.date.nextDay(start);
            }
     
            this._render(dates);
        }
    });

    Regarding the edit functionality. It will be easier to use the scheduler edit event to prevent the popup from showing and to add the custom logic.

    @(Html.Kendo().Scheduler<TaskViewModel>()
                .Name("scheduler")
                .Events(events => events.Edit("edit"))
     )
     
    <script type="text/javascript">
        function edit(e) {
            e.preventDefault();
            // do something here;
        }
    </script>
     

    Regards,
    Rosen
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Sage
    Sage avatar
    3 posts
    Member since:
    Apr 2014

    Posted 17 Apr 2014 in reply to Rosen Link to this post

    Perfect, thank you so much. This is exactly what I was looking for. 

    One question though, in the edit function after e.preventDefault, and I do my other stuff, the event I clicked on is being removed from the scheduler.  How do I ensure this does not happen?
  5. Rosen
    Admin
    Rosen avatar
    3236 posts

    Posted 18 Apr 2014 Link to this post

    Hello Sage,

    I'm afraid that I'm not sure what may cause such behavior for the provided details. Here is a test page which tries to replicate the described scenario, however such behavior is not observed. Thus, please modify the test page as the issue to appear and send it back to us for further investigation.

    Regards,
    Rosen
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready