Force 'Agenda' view in kendo ui Scheduler to display weekly - kendo-ui

Is there a way to force the Agenda View in Kendo ui scheduler to navigate by week when using the < > buttons in the navigation? Right now the buttons move the Agenda view by day.

Simple but working solution:
navigate: function(e) {
if(e.view === "agenda"){
if(e.action === "next"){
e.date.setDate(e.date.getDate() + 6);
}
if(e.action === "previous"){
e.date.setDate(e.date.getDate() - 6);
}
}
}
Here is telerik dojo fiddle for you: http://dojo.telerik.com/IrAxO.

Related

dynamics crm 365 online quickform not rendering

I have a form which has a tab and in this tab is a quickview form. On the quickview form, I have a subgrid and a text field.
The tab has a default state of 'collapsed'. When I open the form, only the text field is displayed. It seems as if the subgrid in no rendering at all.
If I change the tab default state to 'expanded', then when I open the form, the
subgrid is rendering correctly.
I have tried to refresh the quickform view outlined here
https://msdn.microsoft.com/en-us/library/mt736908.aspx
But it does not seem to work.
UPDATE:
I have tried the following, but still no success.
FIRST VERSION
// Triggering when the tab is expanded
function onChange(){
console.log('on change');
// get quick view form
var qv = Xrm.Page.ui.quickForms.get("myquickformview");
qv.refresh();
// get subgrid
try {
qv.getControl(0).refresh();
}
catch (e)
{
console.log(e);
}
}
SECOND VERSION
function onLoad(){
console.log('onload');
Xrm.Page.getAttribute('new_person').addOnChange(refresh);
}
function onChange(){
Xrm.Page.getAttribute('new_person').fireOnChange();
}
function refresh(){
console.log('on change');
// get quick view form
var qv = Xrm.Page.ui.quickForms.get("myquickformview");
// get subgrid
try {
qv.getControl(0).setVisible(false);
qv.getControl(0).setVisible(true);
qv.getControl(0).refresh();
}
catch (e)
{
console.log(e);
}
qv.refresh();
}
Any advice appreciated. Thanks in advance.
1.Add onchange event handler for the lookup (on which Quick view form is rendered) to have the code to refresh the quick view control.
Xrm.Page.getAttribute("lookup_fieldname").addOnChange(function);
Keep the below code in function.
var quickViewControl = Xrm.Page.ui.quickForms.get(“your quick view form name”);
if (quickViewControl != undefined) {
if (quickViewControl.isLoaded()) {
quickViewControl.refresh();
}
}
2.Trigger fireOnChange() of lookup on tab expanded handler, so that onchange will refresh QVform totally.
Xrm.Page.getAttribute("lookup_fieldname").fireOnChange();
Got a hint from this. I just answered here (in mobile without testing) to unblock you.

Show All Events

I am using the Kendo UI Scheduler. I have the Agenda view, which is nice. But I would like to show ALL the events in the Calendar - starting from the first Event added and going to the last - and the Agenda view seems to only show 1 week's worth of events.
I would like something that resembles the List view in Outlook.
Is there a way to do this?
There is a discussion on this in the Telerik forums.
In this discussion, an answer is given with a link to a demo in which a custom agenda view is implemented. This view shows all events in the next 31 days:
var CustomAgenda = kendo.ui.AgendaView.extend({
endDate: function() {
var date = kendo.ui.AgendaView.fn.endDate.call(this);
return kendo.date.addDays(date, 31);
}
});
In the scheduler options you add this view using this configuration:
views: [
"day",
{ type: "week", selected: true },
// "agenda",
{ type: CustomAgenda, title: "Custom Agenda" }
]
If you navigate to the date of the first event and change the custom agenda view to show events (last_event_date - first_event_date) days forward, you get what you wanted to do.

Force DropDownList to use list instead of ActionSheet for mobile

I'm working on an iPad app using Kendo and the DropDownList is throwing an ActionSheet. I'd like to force it to use the Web UI list style. How can I do this?
For anyone interested I was able to hack together a solution. Here's a function that accepts a kendoMobileView as the argument and applies the fix.
//Hack to force dropdowns to act like comboboxes in mobile!
utils.fix.dropdownlists = function(view) {
var dropdowns = view.element.find("[data-role='dropdownlist']");
//Iterate through dropdown elements
_.each(dropdowns, function(item){
var comp = $(item).data("kendoDropDownList");
if(comp && comp.popup) {
comp.popup.bind("open", function(event){
event.sender.element.parent().removeClass("km-popup km-widget");
if(event.sender.element.parent().hasClass("km-popup")) {
//Prevent default open animation.
//Then remove classes and open the popup programitcally
//Easy peasy, Lemon squeezy
event.preventDefault();
event.sender.element.parent().removeClass("km-popup km-widget");
setTimeout(function(){
event.sender.open();
},0);
}
});
}
});
}

How to detect double clicks or long clicks on points in Highcharts charts?

Highcharts offers the opportunity to detect clicks on chart points, but is it possible
to detect other events, such as the double click or mousedown event?
Thanks in advance
Each component only supports certain events, for example the Chart component will detect addSeries, click, load, redraw, and selection. I don't believe this set is extensible, so you can't capture a different event like mousedown.
You could try to inspect the source of your page and attach listeners to the elements that HighCharts generates, but this would be an undocumented work-around and would be liable to break in future releases. In addition, if you have to support < IE9 you would need handlers for both SVG and VML generated markup.
You can get creative with some events. Here's an example of detecting a double click using a click handler:
Working Demo
var clickDetected = false;
// create the chart
$('#container').highcharts({
chart: {
events: {
click: function(event) {
if(clickDetected) {
alert ('x: '+ event.xAxis[0].value +', y: '+ event.yAxis[0].value);
clickDetected = false;
} else {
clickDetected = true;
setTimeout(function() {
clickDetected = false;
}, 500);
}
}
}
},
...
It's possible, but in a different way. In Highcharts you can add event to each element using element.on. For example:
chart.series[0].data[0].graphic.on('dblclick', function() {
//callback here
});
And simple jsFiddle for you. Good thing is that you can add to all elements, and make sure work in all browsers.

Set page size on client side telerik grid

I have tried a lot but didn't find the way to change page size of telerik grid on client side
Till now I have this on my grid
.Pageable(pager => pager.PageSize(25, new int[] { 25, 50, 100 })
.Style(GridPagerStyles.NextPreviousAndNumeric | GridPagerStyles.PageSizeDropDown))
It works fine but I want to bind page change event with one of my dropdowns.
I didn't find any event that telerik grid's page dropdown call that I can use to call with my dropdown change.
Is it possible to achieve this?
Found the way to do this
function pageSizeChanged(pageSize) {
if (pageSize == '#')
return true;
var grid = $('#StudentGrid').data('tGrid');
grid.pageSize = pageSize;
grid.rebind();
}
This works like a charm! :)

Resources