4

I am using Kendo Scheduler control. By default it is showing "Date","Time" and "Event" in the "Agenda" view. How to extend scheduler agenda view to include additional column as shown in attached image?

enter image description here

I tried templates as shown below.

     <script id="event-template" type="text/x-kendo-template">
     <button class="edit-event" data-uid="#=uid#">Custom Column</button>
     <div>Notes: #: notes#</div>

     </div>
     </script>

and in Kendo initialization,i added below code

      views: [
      {
        type: "agenda",
        eventTemplate: $("#event-template").html()
      },
     ],

But it did not render as expected :(

I tried below url Kendo Forum link but it's not redirected me to any solution.

kudlatiger
  • 2,355
  • 3
  • 30
  • 67
  • Have you done this yet? I wondering if you've made a custom view for this yet, I'm looking to add some custom columns myself – Dan Parker Jun 23 '15 at 23:37
  • not yet. below answer suggested for extending but did not worked as expected. keep u posted – kudlatiger Jun 24 '15 at 03:33

3 Answers3

2

Apparently it does not supported by kendo, kendo team says :

Adding more columns to the "Agenda" view is not supported out of the box and it will require custom solution which is out of scope of our support service

But you can extend the scheduler widget like mentioned on the forum post, there also 2 sample of way extending the widget

himawan_r
  • 1,720
  • 1
  • 13
  • 20
1

To add a custom view which current existing are day, week, month, agenda & timeline, you have to make an extended class which extend from kendo.ui class as Kendo UI code library example gave to us.

I encourage you to follow that example so it will work properly for edit, remove and recurrence events. Therefore you should look into it, yet if you have scheduler that only display events with simplicity just want to add custom column inside existing view, you can see my example here.

I exploit scheduler data bound events and write necessary DOM to header and body of scheduler, so it will reflect just like what you had describe above.

Scheduler Custom View Code Library - recommended solution

Scheduler Custom Column Alternative

Hope this help..

Dion Dirza
  • 2,532
  • 2
  • 13
  • 19
  • Thanks, that did help with the custom column, but I don't append will work for me. schedulerHeader.append("Rating"); schedulerHeader.append("Time"); I need to add a column after every day in the week, for week view. So it will be 7 extra columns. It doesn't seem like we can just insert columns. So I'm guessing the best was is to rewrite the whole header and column templates. Whats the best way to get these templates? – Dan Parker Jun 24 '15 at 18:27
  • only issue currently i see is: it shows "rating" and "time" column in all the views, I wanted only in agenda view. – kudlatiger Jun 24 '15 at 19:37
  • @Deepak I have fix my sample to only affect view agenda – Dion Dirza Jun 25 '15 at 01:46
  • @DanParker How is the view looks like, can you share the picture of it? – Dion Dirza Jun 25 '15 at 01:49
  • @DionDirza What I'm trying to do is add a couple status columns, to show availibity. MondayMyColumn1MyColumn2Tuesday...... – Dan Parker Jun 25 '15 at 02:36
  • @DanParker I wonder what if in one day column there are multiple events, how does the status column relate to each event? There will be many breaking changes e.g event drag, event stacking CSS.. its complex for your case Dan.. – Dion Dirza Jun 25 '15 at 03:55
  • @DionDirza these will be independent of events. This will show if the person is allowed to schedule an event at that time, or that person can only schedule events with people in Group A. It's like a side helper to know what kinds of events they can schedule. We don't want to drag or drop to it. – Dan Parker Jun 25 '15 at 04:15
  • 1
    @DanParker Here is a [dojo](http://dojo.telerik.com/@diondirza/EbEBa/4) to see how to add column for each day in a `Week` view. I leave the rest implementation to you.. Good luck – Dion Dirza Jun 25 '15 at 04:28
  • @DionDirza That's really cool. Only probably on a resize it creates more columns and crashes the browser – Dan Parker Jun 25 '15 at 05:57
0
      schedulerHeader.append("<th>Rating</th>"); 
      schedulerHeader.append("<th>Time</th>");

Hmm, the comment above didn't have formatting so I'll post the above again. This helps, but I think I need to rewrite the whole template.

The example telerik keeps giving for a custom view is ok but very basic. It only does the DataHeaderTemplate and event template, it doesn't add columns.

I'm looking for a column after every day, so I can put extra visual lines to show the status. Sounds like I need to rewrite the column and header templates. I don't see any good examples of that

Dan Parker
  • 695
  • 1
  • 7
  • 24