Cannot Use Scheduler Custom View

[Nate]

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.

[Nate]

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'.

[yash]

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

[Martin]

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

[yash]

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,

[yash]

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.

[Martin]

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

[yash]

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)

[yash]

Martin, any update on this...?

[Martin]

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

[yash]

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.

[yash]

Martin, did you get chance to take a look at this?

[Martin]

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

[yash]

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.

[Martin]

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

[yash]

Hi,

I am using one KendoListView Function, but evertime I am doing any click event it is appending the previous datasource to the new datasource.
How can i get rid of this.

 providersDataSource = new kendo.data.DataSource({
                                data: filterProviders
                            });
                            /
                           
                            $providerListView.kendoListView({
                                dataSource: providersDataSource,
                                template: providerListTemplate
                            });

[Martin]

Hello, Yash,

Could you please elaborate if the issue you are experiencing is related to the original subject of the thread. If not, kindly start a new discussion so that we can have separate threads for different problems and avoid mix-ups. 

If you are executing the shared code on a click event, you are most probably initializing multiple ListViews from the same DOM element, which is likely to cause undesired behavior. In that case you should destroy the ListView widget if there is already an existing instance of it and reinitialize anew. Here is an article on how to destroy widgets. If you simply wish to replace the dataSource, you can use the setDataSource method instead.

Let me know if the above was helpful.

Regards,
Martin
Progress Telerik