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;
}
}
}
Related
I have create a simple CKEditor widget that highlights the elements that have the class "pink".
I have also added a "Pinkify" button to the toolbar, which replaces the HTML of the selected element with some other elements that have the class "pink".
What I observe when I click the button is that widgets are not created for the freshly inserted elements. However, when I toggle between Source mode and WYSISYG mode, the widgets get created.
See the jsfiddle and its code:
CKEDITOR.replace('ck', {
allowedContent: true,
extraPlugins: 'pink'
});
CKEDITOR.plugins.add('pink', {
requires: 'widget',
init: function(editor) {
editor.widgets.add('pinkwidget', {
upcast: function(element) {
return element.hasClass('pink');
}
});
editor.addCommand('pinkify', {
editorFocus: 1,
exec: function(editor) {
var selection = editor.getSelection(),
selectedElement = selection.getStartElement();
if (selectedElement) {
selectedElement.setHtml("Let's have some <span class=\"pink\">pink</span> widget here!");
editor.widgets.checkWidgets(); // needed?
}
}
});
editor.ui.addButton('pinkify', {
label: 'Pinkify',
command: 'pinkify'
});
},
onLoad: function() {
CKEDITOR.addCss('.cke_widget_pinkwidget { background: pink; }');
}
});
I am aware of this question on Stackoverflow, but I can't get it to work with setHtml called on an element. Can you suggest how to modify the code so that widgets get created as soon as the HTML is updated?
According to the CKEditor team, it is normal that CKEDITOR.dom.element.setHtml does not instanciate widgets (see Widgets not initialised after calling setHtml on an element).
So the workaround they gave me was to rewrite the code that insert HTML in place of the selected element to:
if (selectedElement) {
selectedElement.setHtml("");
editor.insertHtml("Let's have some <span class=\"pink\">pink</span> widget here!");
}
For those like me who didn't know, editor.insertHTML inserts HTML code into the currently selected position in the editor in WYSIWYG mode.
Updated jsFiddle here.
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");
}
}
});
I'm using kendo ui grid, and for initialization I pass create and edit button to grid toolbar like this :
var grid = elem.kendoGrid({
...
toolbar: getToolBar(),
});
getToolbar function return an array list of buttons. now for example after user click on edit button I wanna add two new button with the name of Cancel and Save . I have used this code but I was useless :
var grid = elem.kendoGrid({
...
edit: function (e) {
e.sender.options.toolbar = getCancelToolBar();
}
});
I wander how can I change this buttons on toolbar after user click on edit button .
any idea is welcome and thanks in forward.
You have to specify all button you need in getToolBar() function and then use CSS & JS to toggle them.
CSS:
.k-grid .k-grid-save-changes,
.k-grid .k-grid-cancel-changes {
display: none;
}
JS:
var grid = elem.kendoGrid({
...
edit: function (e) {
e.sender.element.find('.k-grid-save-changes').show();
e.sender.element.find('.k-grid-cancel-changes').show();
}
});
I'm new to AngularJS and I'm making made a couple of custom Angular directives to do what I used to do with Jquery, however there is one case where I'm not sure if I'm doing it the "the angular way". It works but I think there might be a better way.
I want to do is this for a search box:
When focus is on the search box the app must change the color of the text in the box from grey to black. The app must also then check the current text in the box, if it is the default text then the app must clear the text.
When the box loses focus (blur) the app must change the box's text back to grey. It must then put back the default text only if the text box is empty upon losing focus.
Here is a jsfiddle that has a directive set up to do all of this perfectly.
http://jsfiddle.net/Rick_KLN/5N73M/2/
However I suspect there is an even better way to do it.
It seems like all three those variables in the controller should be unnecessary.
I also seems like having 4 if, else statements is too much and that binding to all the events is overkill seeing as only focus and blur are used and they are specified in the if statements.
Any ideas on optimizing this directive?
The "default text" behavior you are looking for is automatically handled by the HTML5 placeholder attribute. It is supported in just about any modern browser, and can be styled using CSS, as follows:
Markup:
<input id="searchBar" type="text" placeholder="Search" />
CSS:
#searchBar { color: #858585; }
#searchBar:focus { color: #2c2c2c; }
#searchBar:focus::-webkit-input-placeholder { color: transparent; }
#searchBar:focus::-moz-placeholder { color: transparent; }
#searchBar:focus:-moz-placeholder { color: transparent; }
#searchBar:focus:-ms-input-placeholder { color: transparent; }
It's that simple.
Notes:
The pseudo-elements & pseudo-classes (-webkit-input-placeholder, etc) are what hide the placeholder text on focus. Normally it stays until you start typing.
I forked your original jsFiddle. It's not really an AngularJS app anymore:
http://jsfiddle.net/Smudge/RR9me/
For older browsers: You can still use the same code as above, but you could use Modernizr (or something similar) to fall-back to a javascript-only approach if the attribute is not supported.
You can create a custom directive that requires the ng-model directive and then within your directive's link function supply a fourth parameter that is a reference to the model. This will allow you to watch the model for changes and react accordingly. Here is the fiddle:
http://jsfiddle.net/brettlaforge/6t39j/3/
var app = angular.module('app', []);
app.directive('searchbar', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, model) {
var options = scope.$eval(attrs.searchbar);
scope.$watch(attrs.ngModel, function(value) {
// If the input element is currently focused.
if (!elm.is(":focus")) {
// If the input is empty.
if (value === undefined || value === "") {
// Set the input to the default. This will not update the controller's model.
elm.val(options.default);
}
}
});
elm.on('focus', function(event) {
// If the input is equal to the default, replace it with an empty string.
if (elm.val() === options.default) {
elm.val('');
}
});
elm.on('focusout', function(event) {
// If the input is empty, replace it with the default.
if (elm.val() === '') {
elm.val(options.default);
}
});
}
};
});
function FormCtrl($scope) {
$scope.search = "";
}
I'm building a simple dialog plugin to replace the default link tool. The design calls for a particular layout that is difficult to achieve with the CKEdit dialog definition: We want a single field to appear above the tab elements in the dialog (see illustration).
Can anyone suggest a way that this might be implemented? Thanks!
As far as I can tell it is not possible to achieve this using the built-in dialog definition.
I was able to get around this limitation by building my dialog plugin using the iframedialog plugin. This basically pops up a CKEditor dialog window and loads an external URL into it. You can do anything you want in that iframe, and then return the text to CKEditor when the user presses the OK button.
A simple example:
// plugins/iframelink/plugin.js
CKEDITOR.plugins.add('iframelink', {
requires: ['iframedialog'],
init: function(editor){
CKEDITOR.dialog.addIframe('iframelinkDialog',
// title
'Insert a Link',
// src
this.path + 'dialogs/link.html',
// minWidth
500,
// minHeight
250,
// onContentLoad
);
var cmd = editor.addCommand('iframelink', {exec: iframelinkOnclick});
editor.ui.addButton('iframelink', {
label: 'Insert a Link (Special Link Tool)',
command: 'iframelink',
icon: this.path + 'images/world_link.png'
});
}
});
function iframelinkOnclick(editor){
dialog = editor.openDialog('msiteslinkDialog');
};
// plugins/iframelink/dialogs/iframelink.js
$(function() {
if (typeof(window.parent.CKEDITOR) != 'undefined') {
CKEDITOR = window.parent.CKEDITOR;
var dialog = CKEDITOR.dialog.getCurrent();
var editor = dialog.getParentEditor();
// Get value of the selected text:
var selection = editor.getSelection().getSelectedText();
// Do something when the user presses the OK button:
var okListener = function(ev) {
link = yourFunctionToDoSomethingClever();
this._.editor.insertHtml(link);
dialog.removeListener("ok", okListener);
};
// Bind the OK button to your okListener method:
dialog.on("ok", okListener);
};
}
So you can make the dialog look any way you want: