How can I customize the Kendo scheduler's month view, so that it shows the count of events on each cell?
Is there anyway to navigate through each cell of the month view programmatically?
Any hint or direction is greatly appreciated.
All I need is to achieve the following effect:
The hardest part of this question is to navigate through all the cells in month view. The following code does the job:
var scheduler = $("#scheduler").data("kendoScheduler");
var view = scheduler.view();
var slots = view.table.find("td[role='gridcell']");
slots.each(function () {
var slot = scheduler.slotByElement(this);
//do whatever you want here with the slot variable
}
Hope it helps.
Related
1) In month view events are visible, instead of those events I want to show the counts only. How this can be achieved in DHTMLX Scheduler JS version.
2) Enable date area click event in month view, not the event_link which directs to day or week view. Just need an event when In month view a date box is clicked I have to load events of that day only on click.
It can be implemented using scheduler.addMarkedTimespan() method. You need to iterate all days during the month, count events for each day by scheduler.getEvents() and then specify the result in the html parameter of addMarkedTimespan.
function addEvCount(){
var startDate = scheduler.getState().min_date;
var endMonthDate = scheduler.getState().max_date;
while(startDate.getTime() < endMonthDate.getTime()){
var endDayDate = scheduler.date.add(startDate, 1, 'day');
var evs = scheduler.getEvents(startDate, endDayDate);
if(evs.length){
scheduler.addMarkedTimespan({
start_date: startDate,
end_date: endDayDate,
html:"<div style='text-align:center;'><b>"+evs.length+"</b></div>",
css: "color"
});
}
startDate = endDayDate;
}
scheduler.updateView();
}
Please check how it works in the snippet.
To hide all events, use also Filtering Events.
scheduler.filter_month = function(id, event){
return false; // event will not be rendered
}
The updated demo only with numbers and without rendered events.
Related docs: addMarkedTimespan(), getEvents(), Filtering.
There is onEmptyClick event which fires when the user clicks on an empty space in the scheduler (not on events). Demo.
I have a kendo grid, in which I have selected filter on one column, I am reloading the grid, I want the same filter to be there when grid reloads.
I am using the below code to reload the grid. It works, but it doesn't show the selected filter item checked. I checked IDR in the filter then reloaded the page, it shows 1 item selected but doesn't show IDR as checked.
function ReloadGrid() {
var grid = $('#gridId').data('kendoGrid');
grid.dataSource.read();
grid.setDataSource(grid.dataSource);
}
Well there is two way to achieve this.
One way is to save filters in database and second one is to use local storage as mentioned in comment.
I prefer second one, using local storage to save filters and load it upon read.
#GaloisGirl is pointing you in right direction.
Check this example again: Persist state
Basic usage of locale storage is to save some data under some name (key,value):
let person = {
name: 'foo',
lastName: 'bar'
};
let save = function (person) {
let personString = JSON.stringify(person);
localStorage.setItem('person', personString);
console.log('Storing person: ', personString);
};
let load = function () {
let personString = localStorage.getItem('person'); // <----string
let person = JSON.parse(personString); // <----object
console.log('Stored person: ', person);
};
let remove = function (name) {
localStorage.removeItem(name);
console.log('Removed from local storage!');
};
save(person);
load();
remove(person.name);
In kendo world you need to save current options state of grid in local storage, you can achieve that by adding button like in example or on the fly with change or with window.onbeforeunload or like in your example beforen reload grid.
You can check saved data under application tab in browsers, eg. chrome:
Hope it helps, gl!
In a scheduler timeline view having a second_scale, is it possible to click on a single date? I have found this answer, but I'm wondering if there is an event in the meantime.
There are onXScaleClick, onXScaleDblClick events for the Timeline view. But in case, when you have 2 scales, they fire only for the second one. Check console in the snippet that demonstrates it.
Nonetheless, you can add onclick event listener for the first scale using js:
var dateScaleEl = document.querySelector(".dhx_second_scale_bar");
dateScaleEl.onclick = function() {
var targetDate = scheduler.getState().date;
console.log(targetDate);
}
Demo.
getState() is a method to get the active date.
I need to set background color of cells in slick grid based on the data being rendered to the grid. Looking at the other posts in stack overflow, I figured out that we can use a custom formatter to do the same by returning a div. I want to accomplish this without returning another div. I did try using rowCssClass and column cssClass property but no luck. Could someone please help me out?
Thanks
You can use grid.setCellCssStyles as follows,
var row = // row Number
var rowObject = { };
rowObject[row] = { property1: "cssClass", property2: "cssClass" };
grid.setCellCssStyles(row, rowObject);
How can you navigate to the last page of a telerik grid using javascript. My scenario is that I want to go to the last page of the grid in which the new record was added. I know I can use the 'pageTo' method in the Telerik Client API but I am not able to figure out how to count the number of pages a grid has. I was looking up if somebody was doing the same thing that I want to do and stumbled across this piece of code
var lastPage = ticketsGrid.totalPages(ticketsGrid.total);
But the value of the variable lastPage is infinity which is not possible as I only have 1 page in that grid.
Any suggestions anyone?
You can use the OnDataBound event.
You need to use a boolean flag which checks if this is the first load.
var firstTimeLoad = true;
function onDataBound(e) {
if (firstTimeLoad) {
firstTimeLoad = false;
var grid = $('#Grid').data('tGrid');
grid.pageTo(grid.totalPages());
}
}