I cannot disable a tabstrip button. Ive tried the following running within the Tabstrips Activate event
tabButton.data("kendoButton").enable(false)
-- fails because the button isnt a kendo button
tabButton.addClass("disabled")
-- fails, disabled is added, but button is still usable
where tabButton was derived along the following lines, I know I gottten it.
var tabButton = $(".k-button")
I resolved the issue by adding a css & class as in
.disable_a_href { pointer-events: none; }
tabButton.addClass("disable_a_href")
TabStrip has explicit enable and disable functions.
If you want them to start disabled, use the class k-state-disabled on the <li> element.
Here's a fiddle showing both of these methods. Tab 2 will start disabled, and tab 3 can be toggled.
To disable all tabstrip except the active you can use this code:
var tabStrip = $("#tabstrip").data("kendoTabStrip");
tabStrip.enable(tabStrip.tabGroup.children().not(".k-state-active"), false);
I use a very simple approach ...
var tabstrip = $("#yourtabstripID").data("kendoTabStrip");
var tabContentID = $("content_div_of_that_tab").parent().attr('id');
//Enable tab item ...
tabstrip.enable(tabstrip.tabGroup.children("[aria-controls='" + tabContentID + "']")[0], true);
//Disable tab item ...
tabstrip.enable(tabstrip.tabGroup.children("[aria-controls='" + tabContentID + "']")[0], false);
I feel the code above is pretty self explanatory ...
Related
I have a kendo modal window in my angular app. Sometimes I auto-close the window after a second. At those times, I'd like to hide the Close [x] button, but at other times, not. Can it be done just before the window is opened?
if (autoCloseDelay) {
// hide the close [x] button here ??
$timeout( function() {
$scope.modalWindow.close();
}, autoCloseDelay, $scope);
}
$scope.modalWindow.open();
If you don't want to play with CSS, you can use setOptions to set programmatically the actions.
Example for removing the Close button:
// Get current actions
var actions = $scope.modalWindow.options.actions;
// Remove "Close" button
actions.splice(actions.indexOf("Close"), 1);
// Set the new options
$scope.modalWindow.setOptions({ actions : actions });
I believe you can do it like this:
// hide the close [x] button
$scope.modalWindow.parent().find(".k-window-action").css("visibility", "hidden");
Here is a sample jsFiddle
I have a Kendo window created using kendoWindow, which is called on a div. This correctly shows this div in a Kendo Window. If at some later point I then try to simply show the div using the show function, to make it appear on the page instead of in a window,
which worked perfectly fine before creating the Kendo
Window, the show doesn't work. How do I get it to show the div?
if (GC.ViewModels.Dashboard.IsSubscriberLoaded()) { // ***CREATES MY KENDO WINDOW
var $kwin = $('#complaint-dashboard-container').kendoWindow({
width: "1400px",
title: "", // ??
modal: true,
actions: ["Close"]
});
$($kwin).data("kendoWindow").center().open();
} else { // *** WON'T SHOW THE div if above has been executed at some point
$('#complaint-dashboard-container').show();
}
Answer : once you bind the div and make a widget it does not act as a normal div , if you need show the content i suggest you to get the html of the content and show in a different div
Basically i have 2 instances of ckeditor on a single page. One on the left and another in the right side of the page.
The left editor uses a div rather than traditional iframe. I've done this by removing the iframe plugin and including the div editing area plugin.
The right editor loads in an iframe and but is also div based(i can use the iframe editor as well on the right if required, not an issue).
Now if the cursor/focus is on the right editor's content area then the left editor should scroll along with it. I've tried to use the code as provied by Reinmar in below url but it seems to work only with editors based on iframe on both sides. Also please note that i'm using jquery adapter for initializing the editors.
CKEDITOR how to Identify scroll event
I initialized the editor on left as below:
var editor_left = $( '#editor_left' ).ckeditor();
And below is my code for the right editor:-
var editor_right = $( '#editor_right' ).ckeditor();
editor_right.editor.on( 'contentDom', function() {
var editable = editor_right.editor.editable();
editable.attachListener( editable.getDocument(), 'scroll', function() {
alert('scroll detected');
parent.$('#left_editor_content_area').scrollTop($(this).scrollTop())
});
});
If i use the iframe based editor on the right then i'm able to get the "scroll detected" alert. But the scrollTop() function still does not work as expected
Any help will be appreciated.
The code that you mentioned is right. You got to update scrollTop property of the div-based editable with the scroll position of the window inside the iframe-based editor (JSFiddle).
var editor_div = CKEDITOR.replace( 'editor_div', {
extraPlugins: 'divarea'
} );
CKEDITOR.replace( 'editor_iframe', {
on: {
contentDom: function() {
var editable = this.editable(),
win = this.document.getWindow(),
doc = editable.getDocument();
editable.attachListener( doc, 'scroll', function( evt ) {
// Get scroll position of iframe-based editor.
var scroll = win.getScrollPosition();
// Update scroll position in the div-based editor.
editor_div.editable().$.scrollTop = scroll.y;
} );
}
}
} );
I'm using CKEditor and I wrote a plugin that pops up a the CKEditor dialog.
I need to re design the ok button and add to the footer more elements like textbox and checkbox but it's seems to be to complicated to do so, so I've hide the footer part and created a uiElement in the dialog content with all what I need but now what I want is to trigger the okButton in the hidden footer but I can't find a way to do it..
Anyone?!
There may be a better way, but here's how I'm doing it:
var ckDialog = window.CKEDITOR.dialog.getCurrent(),
ckCancel = ckDialog._.buttons['cancel'],
ckOk = ckDialog._.buttons['ok'];
ckOK.click();
The trick is to get the button and then use the CKEditor Button API to simulate the click. For some reason, I was unable to call dialog.getButton('ok') because getButton is undefined for some reason. My method digs into the private data, which I doubt is the best way to do it.
From the onShow event (when defining the dialog), I was able to get the ok button like the docs indicate:
onShow: function () {
var okBtn = this.getButton('ok');
...
}
Here's the Button API: http://docs.ckeditor.com/#!/api/CKEDITOR.ui.dialog.button, and you can access the dialog API there too (I'm assuming you've already been there!!!)
You might try to add this line in your plugin.js.
var dialog = this.getDialog();
document.getElementById(dialog.getButton('ok').domId).click();
In my custom plugin, i just hide the "ok" button instead of the whole footer.
Below is a part of my plugin.js statements.
{
type : 'fileButton',
id : 'uploadButton',
label : 'Upload file',
'for' : [ 'tab1', 'upload' ],
filebrowser :
{
action : 'QuickUpload',
onSelect : function(fileUrl, data){
var dialog = this.getDialog();
dialog.getContentElement('tab1','urlTxt').setValue(fileUrl);
document.getElementById(dialog.getButton('ok').domId).click();
}
}
}
btw, i'm using CKEditor 4.0 (revision 769d96134b)
I tried to disable unnecessary context menu when I set a grid with ContextMenus. By default, if you click the blank part of the grid, it disables the Delete menu.
However, after adding customized menu like Download, it shows in the context menu even there is no selected item (i.e., How can I download it?). So I want to disable the unnecessary menu or make it invisible except in the grid row context menu.
I'm using telerik ASP.NET AJAX contorl 2009 Q2.
Thanks in advance.
This piece of code should help - basically what you need to do is attach a handler to the menu showing event, check the target element (the element where you right-clicked) and if it is the grid area itself - disable the menu item.
<script type="text/javascript">
function OnClientLoad(explorer)
{
explorer.get_gridContextMenu().add_showing(disableItem);
}
function disableItem(sender, args)
{
var target = args.get_targetElement();
if (target && target.className == "rgDataDiv")
{
var dlItem = sender.findItemByValue("download");
dlItem.set_enabled(false);
}
}</script><telerik:RadFileExplorer runat="server" ID="RadFileExplorer1" OnClientLoad="OnClientLoad"></telerik:RadFileExplorer>