I'm having trouble with the Kendo Scheduler widget. The app is working and loading data in our app but will not fire the change event. Have copied the basic scheduler setup from the demo into a fiddle and still no dice. Need a second set of eyes, thanks.
References:
1.Kendo Scheduler Demo w events
2.Kendo Scheduler change event doc
<div id="displayEvent"></div>
<div id="apptList"></div>
==========================================
$('#apptList').kendoScheduler({
views: [
{ type: 'day', selected: true },
'week',
'month'
],
allDaySlot: false,
startTime: new Date(new Date().setHours(7, 0, 0, 0)),
selectable: true,
change: function (e) {
$('#displayEvent').text('Change called');
var start = e.start; //selection start date
var end = e.end; //selection end date
var slots = e.slots; //list of selected slots
var events = e.events; //list of selected Scheduler events
var message = "change:: selection from {0:g} till {1:g}";
if (events.length) {
message += ". The selected event is '" + events[events.length - 1].title + "'";
}
$('#displayEvent').text(message);
}
});
$('#displayEvent').text('Where are my events?');
Apparently, this was a problem specific to build 2013.2.918. I upgraded to build 2013.3.1119 and the events are now working.
Related
Is anybody know how to add holidays to kendo scheduler?
I mean in a holiday user shouldn't be able to add any events.
I suggest to add a custom class in my example i created class k-holiday or maybe utilize kendo class k-non-workhour and on dataBound function add this :
dataBound: function () {
var scheduler = this;
//get scheduler view
var schedulerView = this.view();
//loop through all slot/event/tile
schedulerView.table.find("td[role=gridcell]").each(function () {
//find start date
var slot = scheduler.slotByElement($(this));
var CONSTANT_HOLIDAY_DATE = new Date("2013/6/11");
CONSTANT_HOLIDAY_DATE.setHours(0, 0, 0, 0);
slot.startDate.setHours(0, 0, 0, 0);
//compare date curent event with holiday
if (slot.startDate.getTime() == CONSTANT_HOLIDAY_DATE.getTime()) {
$(this).addClass("k-holiday");
} else {
$(this).removeClass("k-holiday");
}
});
},
i created a holiday on this particular Date new Date("2013/6/11") where later on all event/slot on this date will have k-holiday class, then you want to add this to your edit function :
edit: function (e) {
var uid = e.container.attr('data-uid');
var element = e.sender.element.find('div.k-event[data-uid="' + uid + '"]');
var slot =$("#scheduler").data("kendoScheduler").slotByElement(element);
if($(slot.element).hasClass("k-holiday")){
e.preventDefault();
}
}
above condition will filter event that is double clicked / edited , where it will prevent the event that has k-holiday to open the popup. Please refer to this kendo dojo
Note : on that example you will notice that on tuesday 6/11 you can't trigger the edit/add new event, but on the day other than that you still can
You can use the all day event template to create holidays.
The message can be set through messages.allDay like this:
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
messages: {
allDay: "Holiday"
},
dataSource: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview"
}
]
});
</script>
You can check this executable example with holiday details.
Edit
BorHunter: but in your example I can add new events into scheduler, but I don't need it. I mean user shoudn't be able to add event on that particular holiday/date.
Then you just disable that option by using editable like this example that has:
editable: false,
Or this one:
editable: {
create: false,
update: false,
resize: false,
move: false,
destroy: false
},
I'm using Laravel framework and I'm very new to it.
Right now I'm trying to put in the Fullcalendar plugin, which I've done it before in other frameworks (Codeigniter, Play framework) and it worked amazingly.
However in Laravel, it doesn't seem to work like how it suppose to. The calendar doesn't show correctly, the prev and next buttons not show up, and the events not showing.
Please help
Here is my code. I'm using mockup events on the frontend.
$('#schedule').fullCalendar({
header: {
right: '',
center: '',
left: 'prev,next title weekNumber'
},
titleFormat: "D MMMM YYYY [(สัปดาห์ที่ 1 ของ 12)]",
defaultView: 'agendaWeek',
aspectRatio: 1,
events: events,
eventRender: function(event, element) {
var content = '<div class="fc-title">'+event.title+'</div>';
content += '<div class="fc-desc">'+event.description+'</div>'
element.find('.fc-content').html(content);
},
eventMouseover: function(event, jsEvent, view) {
$(this).append('<div class="event-hover"><div class="hover-pointer"></div><div>'+event.hoverContent+'</div></div>')
},
eventMouseout: function( event, jsEvent, view ) {
$('.event-hover').remove();
}
});
I've now found an answer to this.
It's not because of laravel.
I've added the fullcalendar.print.css into it that's why the css was messed up. So I've now removed it and it works perfect.
Thanks anyway for all the help
I have an ExtJS 4 dataView and i would like to catch the id of a selected node.
It is the first time that i'm using the dataView, then, there are some troubles.
The store is loaded correctly and i see the datas into the view very well. The problem which i'm having, concern the "classic" actions of update and delete, particularly getting the id of a selected item.
For example into a grid i click, then select a record and through a button's pressing i open a window (or other actions) with a loaded form (by sending in AJAX to the store, the id of the selected row) and i update the datas.
I'm not still able to do it with the ExtJS 4 dataView.
Below my dataView:
dataView_player = Ext.create('Ext.Panel', {
id: 'images-view',
frame: true,
collapsible: false,
autoWidth: true,
title: 'Giocatori (0 items selected)',
items: [ Ext.create('Ext.view.View', {
id:'players-view',
store: store_player,
multiSelect: true,
height: 310,
trackOver: true,
overItemCls: 'x-item-over',
itemSelector: 'div.thumb-wrap',
emptyText: 'Nessun giocatore visualizzato',
tpl: [
'<tpl for=".">',
'<div class="thumb-wrap" id="{id}-{name}">',
'<div class="thumb">',
'<img src="/img/players/{picture}" title="{name} {surname}" alt="{name} {surname}" style="">',
'</div>',
'<span class="" style="height:30px;">{general_description}{name} {surname}</span>',
'</div>',
'</tpl>',
'<div class="x-clear"></div>'
],
plugins: [
Ext.create('Ext.ux.DataView.DragSelector', {}),
Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'})
],
prepareData: function(data) {
Ext.apply(data, {
name: data.name,
surname: data.surname,
general_description: Ext.util.Format.ellipsis(data.general_description, 15)
});
return data;
},
listeners: {
'selectionchange': function(record, item, index, e) {
var node = this.getNode(record); //this.getNode(record);
console.log(node.get('id'));
}
}
}) ],
dockedItems: [{
xtype: 'toolbar',
items: [{
iconCls: 'delete',
text: 'Cancella Selezionati',
scale: 'medium',
tooltip: 'Per <b>cancellare</b> i giocatori selezionati',
tooltipType: 'qtip',
id: 'delete-player',
disabled: true,
handler: delete_news
}, '-', {
iconCls: 'edit',
text: 'Aggiorna Selezionata',
scale: 'medium',
tooltip: 'Per <b>aggiornare</b> un giocatore selezionato',
tooltipType: 'qtip',
disabled: false,
id: 'update-player',
handler: function(nodes) {
var l = nodes.get('id');
console.log(l);
}
}
}
]
}]
});
Of course, this is a wrong example (because the listeners don't work) but it's just to make an idea.
There are two main things what i would like to do:
1) Catch the id (and other store's fields) of the selected item on the action "selectionchange". Obviously, now it doesn't work because of this: node.get('id'). Of course it's a wrong syntax but make up the idea of my will.
2) Catch the id of the selected item on the handler event of the "update-player" button. As above, the issue is the nodes.get('id'). Further trouble, is how to pass the selected item's features. in handler: function(nodes) { the nodes variable does not assume any value and i don't know how to pass the params from the dataview to the handler function.
I hope that somebody will able to help me.
According to the docs the selectionchange event provides the selection model as well as the array of selected records, so you are probably assuming the wrong parameters in your listener.
Without doing further testing, I think it should be something like this:
listeners: {
'selectionchange': function(selModel, selection, eOpts) {
var node = selection[0];
console.log(node.get('id'));
}
}
Note that you're using multiSelect: true, so it could be more than one record in the selection array.
Answer for second part of the question:
In button handler, you need to get selection model of the view and from it get information about selected records:
handler: function(nodes) {
// find view component
var view = dataView_player.down('dataview');
// get all selected records
var records = view.getSelectionModel().getSelection();
// process selected records
for(var i = 0; i < records.length; i++) {
console.log(records[i].getId());
}
}
I'm new to Kendo and the Kendo grid but I'm trying to learn how to use the master detail Kendo grid where the detail grid is supposed to support batch editing. The data is available in a local JavaScript object.
This jsFiddle demonstrates the problems I'm seeing.
Here's how the grid is being created - see the jsFiddle for the complete snippet -
$("#grid").kendoGrid({
dataSource: items,
detailInit: createDetail,
columns: [
{ field: "Item", width: "200px" },
]
});
function createDetail(e) {
$("<div/>")
.appendTo(e.detailCell)
.kendoGrid({
dataSource: {
batch:true,
transport: {
read: function (options) {
options.success(e.data.SubItems);
}
}
},
editable:true,
pageable:true,
toolbar: ["save", "cancel"],
columns: [
{ field: "SubItem", title: "Sub Item", width: 200 },
{ field: "Heading1", title: "Heading 1", width: 100 }
]
});
}
When you edit an item in the grid and click to the next cell, the details grid automatically collapses not matter where I click, even in an adjacent cell. When I open it again, I don't see the change indicator in the cell (red notch) but the new value is there.
If I were to hook up the save to an ajax call, Kendo sends the right detail item(s) that were edited.
Nothing happens when I click cancel changes.
How do I get the grid to not collapse and see the change indicators ?
How do I get canceling of changes to work correctly ?
[Update] - Further investigation reveals that if I use an older Kendo version 2011.3.1129 , this works as expected. But if I use the newer 2012.3.1114, it doesn't. Dont know if this is a bug or a change in behavior.
After much effort, I found that the cause seems to be that the master grid is rebinding automatically causing the behavior I observed. I was able to get around this by handling the dataBinding event in the master grid and within that, checking if any of the detail datasources were dirty and if so, calling preventDefault.
Here are relevant code snippets :
dataBinding: function (e) {
if (masterGrid.AreChangesPending()) {
e.preventDefault();
}
}
AreChangesPending : function () {
var pendingChanges = false;
// I gave each detail div an id so that I can get a "handle" to it
$('div[id^="detail_"]').each(function (index) {
var dsrc = $(this).data("kendoGrid").dataSource;
$.each(dsrc._data, function () {
if (this.dirty == true || this.isNew()) {
pendingChanges = true;
}
});
// For some reason, Kendo did not detect new rows in the isNew()
// call above, hence the check below
if (dsrc._data.length != dsrc._total) {
pendingChanges = true;
}
});
return pendingChanges;
}
I'm using an Ext.picker.Date and I have some checks I run on the hide event. However, if a certain criteria is met, I want to stop the process and have the date picker not hide.
I've tried using the beforehide event, and running my code there, but that event doesn't seem to fire.
Below is the config for my datepicker. If the condition is true, how can I stop the picker from hiding?
Thanks for any help.
var datePicker = new Ext.picker.Date({
docked: "bottom",
listeners: {
beforehide: function() {
console.log("before hide");
},
hide: function() {
if (1 == 1) {
//how do I stop the picker from hiding?
Ext.Msg.alert("You cannot select that date.");
}
}
},
slotOrder: ["day", "month", "year"],
useTitles: false
});
this.add(datePicker);
Are you using Sencha Touch 2? I'm going to assume so, since you're using Ext.picker.Date.
According to the documentation, the date picker doesn't fire a beforehide event:
Sencha Docs
What you really want to do here is insert some logic after 'Done' is tapped and before the picker hides itself. The picker calls onDoneButtonTap internally; you can inject your own logic like so:
Ext.define('MyApp.widget.DatePicker', {
extend: 'Ext.picker.Date',
xtype: 'mypicker',
onDoneButtonTap: function() {
if (1 == 1) {
Ext.Msg.alert("You cannot select that date.");
} else {
Ext.picker.Date.prototype.onDoneButtonTap.call(this);
}
}
});
this.add({
xtype : 'mypicker',
docked : "bottom",
slotOrder : ["day", "month", "year"],
useTitles : false
});
This is assuming that your logic will be able to access what it needs within the scope of the date picker. If this isn't the case, you can pass additional configuration to the date picker when you create it...maybe something like acceptedDateRange {...}
The simplest way could be:
var datePicker = new Ext.picker.Date({
docked: "bottom",
slotOrder: ["day", "month", "year"],
useTitles: false,
onDoneButtonTap: function() {
if (1 == 1) {
Ext.Msg.alert("You cannot select that date.");
} else {
Ext.picker.Date.prototype.onDoneButtonTap.call(this);
}
}
});
this.add(datePicker);
I think defining your own class like in the first example is the way to go, especially in situations where you inject logic into existing framework code and when you use the component in more than one place. But the second example will work as well.