Cannot Use Scheduler Custom View

15 posts, 0 answers
  1. Nate
    Nate avatar
    2 posts
    Member since:
    May 2018

    Posted 06 Jun 2018 Link to this post

    I am trying to follow the official doc to learn how to use a custom view on scheduler. But the catch is that I am using it in Angular 5 and importing the view from a JS script. So, I am getting the following error - https://pastebin.com/p4gLuKfv

    The JS file is this - https://pastebin.com/Xy9tcY6J

    The Angular Component File is this - https://pastebin.com/0p1xHPus

    It would be helpful, if someone can point me to why the error is happening.

  2. Nate
    Nate avatar
    2 posts
    Member since:
    May 2018

    Posted 06 Jun 2018 in reply to Nate Link to this post

    The issue was that CustomMonthView could not be found. So, I added this inside function definition in kendo.customMonthView.js -
    $.extend(true, ui, { CustomMonthView: CustomMonthView
    });
    Additionally, referenced the view type in angular component as 'kendo.ui.CustomMonthView'.
  3. yash
    yash avatar
    11 posts
    Member since:
    Jul 2020

    Posted 22 Jul 2020 Link to this post

    I am using a custom day view  in Jquery, while clicking on that getting an error of " Unable to get property '0' of undefined or null reference".
    Here is the extended code for that:
    var CustomAgenda5 = kendo.ui.MultiDayView.extend({             options: {                 majorTick: 5             }         });        var CustomAgenda10 = kendo.ui.MultiDayView.extend({             options: {                 majorTick: 10             }         });          var CustomAgenda15 = kendo.ui.MultiDayView.extend({             options: {                 majorTick: 15             }         });

    views:[   {   type: "day",   majorTick: 15  },
    { type: "CustomAgenda5", title: "5 min" },
    { type: "CustomAgenda10", title: "10 min" },

    { type: "CustomAgenda15", title: "15 min"}   ]              ],

     Please refer the attached file

  4. Martin
    Admin
    Martin avatar
    299 posts

    Posted 23 Jul 2020 Link to this post

    Hello Yash,

    Thank you for the provided code snippet.

    I tested it in this Dojo example, and there is no error in the console, and the code seems to be working as expected. Could you please modify it to reproduce the issue you are experiencing?

    Regards,
    Martin
    Progress Telerik

  5. yash
    yash avatar
    11 posts
    Member since:
    Jul 2020

    Posted 23 Jul 2020 in reply to Martin Link to this post

    Thanks Martin, I found the root cause for it. Yes it was working fine in Dojo, but in my code I have to write CustomAgenda5 instead of "CustomAgenda5"  under the views Section. After changing , it was working fine.
    Can you please help me with another issue, I want to place these buttons before the Manual Refresh button available on the Kendo scheduler.  Manual refresh button is initially there but after placing the radio button it is not visible .( Please refer the attached screenshot for the same.)
     Suggest me how can I achieve that. I am able to show the radio buttons,
  6. yash
    yash avatar
    11 posts
    Member since:
    Jul 2020

    Posted 27 Jul 2020 in reply to yash Link to this post

    I have added custom views to the scheduler bar, but it is hiding the Manual refresh button placed at the topmost right hand side. Please refer the attached screen shot. Please find the code snipped at this DOJO example.

    https://dojo.telerik.com/icIRoWUY

    Please suggest how can I show the manual refresh button over there,  before the implementation of this custom view, manual refresh button was there.

  7. Martin
    Admin
    Martin avatar
    299 posts

    Posted 27 Jul 2020 Link to this post

    Hello Yash,

    From the latest Dojo example I was unable to see how the custom button is being added. You can do so using the below code snippet;

    $(".k-scheduler-toolbar.k-toolbar").append("<a role='button' href='#'><span class='k-icon k-i-refresh'></span></a>")

    Please refer to the modified Dojo for reference.

    Let me know if you have any further questions.

    Regards,
    Martin
    Progress Telerik

  8. yash
    yash avatar
    11 posts
    Member since:
    Jul 2020

    Posted 28 Jul 2020 in reply to Martin Link to this post

    Hey Martin,

    I have created the custom view and also placed the refresh button with one label at the right hand side of Scheduler. Please refer the attached screen shot.
    The following is the Dojo for it https://dojo.telerik.com/icIRoWUY.
    Can you please let me know how can I make sure which time slot interval is choosen  while displaying the schedule. 
    Please expand the  preview section on DOJO so that you can see the custom view in button form instead of Dropdown( attached Screesnhot)
  9. yash
    yash avatar
    11 posts
    Member since:
    Jul 2020

    Posted 29 Jul 2020 in reply to yash Link to this post

    Martin, any update on this...?
  10. Martin
    Admin
    Martin avatar
    299 posts

    Posted 29 Jul 2020 Link to this post

    Hello Yash,

    Could you please make sure that you are sending the right link for the Dojo example? The last link is the same link from the 27th of July, which does not show anything apart from the three custom views. From the explanation I am also not sure what is the current issue, so I would appreciate some additional explanation as well. I will then gladly assist you.

    Regards,
    Martin
    Progress Telerik

  11. yash
    yash avatar
    11 posts
    Member since:
    Jul 2020

    Posted 29 Jul 2020 in reply to Martin Link to this post

    Hi martin,

    Issue is when I select any of the view i.e. 5min, 10 min, 15 min ; it is not showing that this view is selected. Orange highlighted is only for time being when I select that, I want that it should be kept as orange highlighted till the time I didn't move to another view.


  12. yash
    yash avatar
    11 posts
    Member since:
    Jul 2020

    Posted 31 Jul 2020 in reply to yash Link to this post

    Martin, did you get chance to take a look at this?
  13. Martin
    Admin
    Martin avatar
    299 posts

    Posted 31 Jul 2020 Link to this post

    Hello Yash,

    The custom view buttons are not highlighted because the custom views should be passed to the views configurations as a string, and not as a variable:

    Current:

    views: [            
      {type: CustomAgenda5, title: "5 min" },
      { type: CustomAgenda10, title: "10 min" },
      { type: CustomAgenda15, title: "15 min"}
    ],

    Correct:

    views: [            
      {type: "CustomAgenda5", title: "5 min" },
      { type: "CustomAgenda10", title: "10 min" },
      { type: "CustomAgenda15", title: "15 min"}
    ],

    Here is the modified example for reference.

    Regards,
    Martin
    Progress Telerik

  14. yash
    yash avatar
    11 posts
    Member since:
    Jul 2020

    Posted 31 Jul 2020 in reply to Martin Link to this post

    But when I am passing it as string in view configuration, then it gives me the error in  console that there is no such view present.
  15. Martin
    Admin
    Martin avatar
    299 posts

    Posted 31 Jul 2020 Link to this post

    Hello Yash,

    Could you please modify the latest Dojo example to reproduce the error, as I am not receiving it on my side?

    Regards,
    Martin
    Progress Telerik

Back to Top