This is a migrated thread and some comments may be shown as answers.
Cannot Use Scheduler Custom View
16 Answers 26 Views
This is a migrated thread and some comments may be shown as answers.
Nate
Top achievements
Rank 1
Nate asked on 06 Jun 2018, 09:07 AM

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.

16 Answers, 1 is accepted

Sort by
0
Nate
Top achievements
Rank 1
answered on 06 Jun 2018, 11:31 AM
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'.
0
yash
Top achievements
Rank 1
answered on 22 Jul 2020, 05:36 AM

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

0
Martin
Telerik team
answered on 23 Jul 2020, 02:34 PM

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

0
yash
Top achievements
Rank 1
answered on 24 Jul 2020, 03:38 AM
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,
0
yash
Top achievements
Rank 1
answered on 27 Jul 2020, 08:21 AM

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.

0
Martin
Telerik team
answered on 27 Jul 2020, 09:09 AM

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

0
yash
Top achievements
Rank 1
answered on 28 Jul 2020, 06:01 AM
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)
0
yash
Top achievements
Rank 1
answered on 29 Jul 2020, 11:19 AM
Martin, any update on this...?
0
Martin
Telerik team
answered on 29 Jul 2020, 04:31 PM

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

0
yash
Top achievements
Rank 1
answered on 30 Jul 2020, 03:18 AM
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.


0
yash
Top achievements
Rank 1
answered on 31 Jul 2020, 09:55 AM
Martin, did you get chance to take a look at this?
0
Martin
Telerik team
answered on 31 Jul 2020, 03:39 PM

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

0
yash
Top achievements
Rank 1
answered on 31 Jul 2020, 03:59 PM
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.
0
Martin
Telerik team
answered on 31 Jul 2020, 04:12 PM

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

0
yash
Top achievements
Rank 1
answered on 18 Mar 2021, 10:47 AM
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
                            });
0
Martin
Telerik team
answered on 22 Mar 2021, 10:16 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Asked by
Nate
Top achievements
Rank 1
Answers by
Nate
Top achievements
Rank 1
yash
Top achievements
Rank 1
Martin
Telerik team
Share this question
or