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
Rank 1
$.extend(true, ui, { CustomMonthView: CustomMonthView
});
Additionally, referenced the view type in angular component as 'kendo.ui.CustomMonthView'.
Rank 1
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
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
Rank 1
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,
Rank 1
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.
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
Rank 1
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)
Rank 1
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
Rank 1
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.
Rank 1
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
Rank 1
Rank 1
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
});
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.