I am using custom light box, for recurring events everything is working fine the problem is when we edit a recurring event we should get dialog asking for "Edit Series", "Edit Occurance" that dialog is not appearing.
I have added configs like:
scheduler.config.repeat_precise = true;
scheduler.config.lightbox_recurring = 'Ask';
AM i missing something?
Moreover I am using unit view that will contain both single and recurring events.
This dialog is a part of the original scheduler.getLightbox method - https://github.com/DHTMLX/scheduler/blob/v4.4.0/codebase/sources/ext/dhtmlxscheduler_recurring.js#L776 .
If you redefine that method - you need to reimplement the dialog as well, here is a code snippet
var labels = scheduler.locale.labels;
dhtmlx.modalbox({
text: labels.confirm_recurring,
title: labels.title_confirm_recurring,
width: "500px",
position: "middle",
buttons:[labels.button_edit_series, labels.button_edit_occurrence, labels.icon_cancel],
callback: function(index) {
switch(+index) {
case 0:
return alert("edit series");
case 1:
return alert("edit ocurrence");
case 2:
return alert("cancel");
}
}
});
Related
Is there anyway to change the color of the dialog window when using the kendo dialog service?
Currently it defaults to red but I need to customize the window to show a different color based on what is passed.
I tried using a kendo-dialog as my template but it doesn't show the action buttons.
<kendo-dialog title="{{title}}" (close)="Cancel()" [ngClass]="yellow">
</kendo-dialog>
I asked myself that same question a while ago and came up with a solution found in this post : Kendo UI angular DialogService - Change the title bar background color
I'll copy my answer here:
I worked a solution for this. It works but it is not elegant one bit.
Here's the plunker link that demonstrates the code :
http://plnkr.co/edit/MGw4Wt95v9XHp9YAdoMt?p=preview
Here's the related code in the service:
const dialog: DialogRef = this.dialogService.open({
actions: message.actions,
content: MessageComponent,
title: message.title
});
const messageComponent = dialog.content.instance;
messageComponent.message = message;
//I get the dialog element and use jQuery to add classes to override styles.
//Let's say I had the error class as well.
const element = dialog.dialog.location.nativeElement;
$( element ).addClass( 'kendo-override ' + message.classes );
return dialog.result;
And the scss:
$error: #c13;
$success: #0c5;
.kendo-override {
&.error {
kendo-dialog-titlebar {
background-color: $error;
}
}
&.success {
kendo-dialog-titlebar {
background-color: $success;
}
}
}
Does anyone know of a way to trigger the editing of a row just by clicking the row?
I would like to see the same functionality that I see when I click an edit command button, but triggered by selecting the row.
You can add this to your change event for your grid:
myGrid.setOptions({
editable: {
mode: "inline"
},
change: function(){
this.editRow(this.select());
}
});
I know this is an old question, but I just had need for a solution and this is what worked for me. I wanted to use double-click, but the click event should also work.
var grid = $('#grid').data('kendoGrid');
$('#grid .k-grid-content table').on(
'dblclick',
'tr',
function () { grid.editRow($(this)); }
);
The selector ("#grid .k-grid-content table") works for my current configuration (mainly I have virtual scrolling turned on) and so may need to be adjusted for your specific situation.
Because I needed a custom setup for my scheduling setup, I am implementing separate Calendar, Scheduler, and RecurrenceEditor widgets. So far, everything has worked fine, but I can't get the parsed string from the RecurrenceEditor widget. I haven't seen a method to pull the rule as a string in the API documentation (nor is the RecurrenceEditor widget really documented there).
This is how I'm setting up the recurrenceEditor:
$(document).ready(function()
{
$("#recurrence-editor").kendoRecurrenceEditor({
start: new Date(),
change: function(e)
{
var editor = e.sender;
// I want to get the recurrence rule string here.
}
});
});
I'm not seeing anything in Firebug that gives me a hint for the method or property I might try. So far, I've tried:
editor.ruleValue
editor.recurrenceRule
It looks like I have access to some of the information, but I didn't want to write my own selections-to-parseable-string method if I could get it from the recurrence editor itself.
UPDATE: When I set it up this way:
$(document).ready(function()
{
$("#recurrence-editor").kendoRecurrenceEditor({
start: new Date(),
edit: function(e)
{
var editor = e.sender;
var recurrenceString = editor.RecurrenceRule;
return recurrenceString;
}
});
});
The edit event never fires. Probably because I'm not implementing the recurrence editor as part of the Scheduler widget, but as a standalone widget on the page.
Thanks!
Setup the recurrence editor in the Scheduler's edit event, it will fire the change event and the value property is the standard iCal Recurrence Rule.
Here's mine:
// Setup Recurrence Editor
// Telerik support recommends this method over the common inline script
// because it allows us to choose which recurrence editor. However, it does
// break the MVVM two-way bindings, so the current value MUST be explicitly set
// on creation, and the change event must be handled.
var event = e.event,
container = e.container,
recurrenceEditor = container.find("#recurrenceEditor");
if (kendo.support.mobileOS === false) {
recurrenceEditor.kendoRecurrenceEditor({
start: new Date(e.event.start),
value: e.event.recurrenceRule,
timezone: self.scheduleConfig.timezone,
messages: self.scheduleConfig.messages.recurrenceEditor,
change: function (ev) {
event.set("recurrenceRule", this.value());
}
});
} else {
// The Mobile Recurrence Editor requires the parent kendo pane
// be passed as a parameter, otherwise it will crash when the
// user attempts to alter the frequency
var pane = container.parent(".km-pane").data("kendoMobilePane");
recurrenceEditor.kendoMobileRecurrenceEditor({
start: new Date(e.event.start),
value: e.event.recurrenceRule,
timezone: self.scheduleConfig.timezone,
messages: self.scheduleConfig.messages.recurrenceEditor,
pane: pane,
change: function(ev) {
event.set("recurrenceRule", this.value());
}
});
}
And the HTML (inside the custom editor template)
<div class="lineEntry" data-bind="invisible: recurrenceId">
<div id="recurrenceEditor" name="recurrenceRule" data-bind="value: recurrenceRule" class="toInlineBlock">
</div>
</div>
You have to get it from the event you are describing in the editor's event edit/creator modal. Once you get the event, it's just .RecurrenceRule, if memory serves, it's just e.event.RecurrenceRule
Fun fact, the standard used in that string is RFC 5545 3.3.10
I've noticed that my custom Grid command is not working after a popup edit dialog is opened and closed (cancelled).
The command delrow is used to display a custom delete confirmation (I've simplified it in the fiddle to just use a standard JS confirmation).
I've setup a Fiddle that demonstrates the problem.
It works when the grid is initially loaded, but not after a cancelled edit. Not sure if this is a bug or something I'm doing wrong.
Any advice would be much appreciated. Thanks
Is the way you do it. You are binding the click event in the dataBound but when you cancel the edition the row is refreshed and you loose the bind.
You should define the action using click property as:
columns : [
{
command: [
{name: 'edit'},
{name:'delrow', click: delRow}],
title: ' ',
width: 100
},
{ field: "FirstName", width: 90, title: "First Name" },
...
Where delRow is the same code that you have as click event handler:
function delRow(e) {
var row = $(this).parents('tr:first');
var r=confirm("Are you sure you want to delete this row!");
if (r==true)
{
var g = grid.data('kendoGrid');
g.removeRow(row[0]);
}
}
See it in action here : http://jsfiddle.net/OnaBai/XNcmt/56/
So I have a grid and the columns have the good ol' column menu on them with the filtering/sorting/excluding of columns and it all works fine.
The fly in the ointment is that I would like to allow the user to rename a column heading and the obvious place in the UI to allow this is in said column menu.
Something like this:
(where the red bit is just another option that I click on and popup a little window to let me type in a new heading)
Is this possible and how would I do it?
I see that menus can be customized and the grid demo shows how to adjust the stuff in the filter popup but I am not sure how I would add this item (I can see how I would programmatically do the rename but just this getting an option onto the menu has me stumped).
You can use the columnMenuInit event. Two possibilities:
$("#grid").kendoGrid({
dataSource: dataSource,
columnMenu: true,
columnMenuInit: function (e) {
var menu = e.container.find(".k-menu").data("kendoMenu");
var field = e.field;
// Option 1: use the kendoMenu API ...
menu.append({
text: "Rename"
});
// Option 2: or create custom html and append manually ..
var itemHtml = '<li id="my-id" class="k-item k-state-default" role="menuitem">' +
'<span class="k-link"><b>Manual entry</b></span></li>';
$(e.container).find("ul").append(itemHtml);
// add an event handler
menu.bind("select", function (e) {
var menuText = $(e.item).text();
if (menuText == "Rename") {
console.log("Rename for", field);
} else if (menuText === "Manual entry") {
console.log("Manual entry for", field);
}
});
}
})
See fiddle with two alternatives:
http://jsfiddle.net/lhoeppner/jJnQF/
I guess that the point of a filter is to filter, not to make changes on the grid.
But anyways i found this Kendo Post that may help you to achieve what you need.
You can also take a look a this one too.