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
Related
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;
} );
}
}
} );
Setup
I've got a Telerik Kendo UI TabStrip with multiple tabs inside of an UpdatePanel...
<asp:UpdatePanel ID="DataDetails_Panel" UpdateMode="Conditional" runat="server">
<div id="ABIOptions_TabContainer">
<ul>
<li>Attendance</li>
<li>Grades</li>
<li>Gradebook</li>
<li>PFT</li>
<li>Scheduling</li>
<li>Miscellaneous</li>
<li>Parent Data Changing</li>
</ul>
</div>
</asp:UpdatePanel>
...which I then wire up in javascript later...
var optionTabContainer = $("#ABIOptions_TabContainer").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
},
select: onMainTabSelect
}).data("kendoTabStrip");
Scenario
The users will click on the various tabs and inside of each tab are settings for our portal. When they are in a tab and they make a change to a setting, the expectation is that they'll click on the 'Save' button, which will perform a postback to the server via ajax, because it is in the update panel.
Current Behavior
After the post back happens and the ul content comes back, I reapply the kendoTabStrip setup function call, which makes none of the tabs selected. This appears to the user like the page is now empty, when it just had content.
Desired Result
What I want to do, is after the partial postback happens and the UpdatePanel sends back the ul, I want to reselect the tab that the user previously selected.
What Already Works
I already have a way to preserve the tab that the user clicked on:
var onMainTabSelect = function (e) {
tabToSelect = e.item;
console.log("onTabSelect --> ", e.item.textContent);
}
and a function to reset the selected tab whenever it is called:
function setMainTab() {
if (!jQuery.isEmptyObject(tabToSelect)) {
var tabStrip = $('#ABIOptions_TabContainer').data("kendoTabStrip");
console.log("Attempt to set tab to ", tabToSelect.textContent);
tabStrip.select(tabToSelect);
} else {
console.log("tabToSelect was empty");
}
}
What Doesn't Work
My hypothesis is that the Kendo TabStrip says, "Hey, that tab is already selected" when I call the setMainTab after my postback:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
BindControlEvents();
setMainTab();
});
...and therefore, doesn't set my tab back. If I click on the tab, then Poof, all my content is there just like I expect.
Any ideas what I may be doing wrong?
I ended up changing the onMainTabSelect method to:
var onMainTabSelect = function (e) {
tabToSelect = $(e.item).data("tabindex");
}
which gets me the data-tabindex value for each li in my ul. I couldn't get the tab index from kendo, so I had to role my own. Once I got that value, then I was able to set the selected tab via an index rather than the tab object reference itself.
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 am trying to open ckeditor in jQuery dialog first time it opens with the ckeditor box perfect I click it again the jQuery dialog loads with textarea with no editor.
I am assuming its because I am not destroying it properly or reinitializing I have no idea Here is a few snippets of what I have tried.
<script type="text/javascript">
if (CKEDITOR.instances['ContentText']) {
CKEDITOR.remove(CKEDITOR.instances['ContentText']);
}
CKEDITOR.replace('ContentText',
{
disableObjectResizing: true,
resize_enabled: false,
shiftEnterMode: CKEDITOR.ENTER_BR,
toolbarCanCollapse: false,
forcePasteAsPlainText: true
});
</script>
<script type="text/javascript">
if (CKEDITOR.instances.ContentText) {
CKEDITOR.instances.ContentText.destroy();
}
CKEDITOR.replace('ContentText',
{
disableObjectResizing: true,
resize_enabled: false,
shiftEnterMode: CKEDITOR.ENTER_BR,
toolbarCanCollapse: false,
forcePasteAsPlainText: true
});
</script>
This is code at the end of the form in the partial view I have tried in the dialog close function in the view
tried editor destroy.. if you want to see the code in action I can deploy it.
What is probably happening is that you're not initializing the CKeditor the second time you open the dialog. The first time it happens on page load. But the second time the modal dialog probably refreshes the dom (html) elements, and these new elements don't have the ckeditor attached to it.
You can solve this by running the initialize code when clicked to open the dialog. Best way is to throw your ckeditor code in a function and add that to the click event that triggers the dialog.
But since you're not posting the code that opens the dialog I could be wrong.
Try using:
CKEDITOR.editor.prototype.destroy
instead of
CKEDITOR.remove
Also you should write a function that is called when the dialog is opened that encompasses your CKE code (both destroying and re-instantiating the the instance).
If both of these things doesn't help you can rename the textarea and call it with the new name you created:
var newCKname = "ContentText" + Math.floor((Math.random()*50)+1);
$('#ContentText').attr('id',newCKname);
[instantiate CKE again with the newCKname]
I'm attempting to place an image map into a jQuery UI dialog. Initially, the and are hidden on the page so that I don't have to do any AJAX. When the dialog is triggered, the and are placed in the dialog and the hidden original content has its link to the image map removed.
There are a few links on the image map in tags and in Firefox, Chrome etc the links are positioned correctly and work.
However, in all versions of IE (the web site is SharePoint 2007 and compatibility mode is on), the links do not fire on the image map. You can hover over the rectangles and be shown the link, but the action never fires.
Code used to initialise below:
$(document).ready(function() {
$('.processDiagram').click(function() {
var phase = $(this).attr('title');
var text = $('#'+phase+' div').html();
var mapname = $('#'+phase+' map').attr('name');
$('#'+phase+' map').attr('name', ''); // null out the background map name so it doesn't get confused
var $dialog = $('<p></p>').html(text).dialog({modal:true, autoOpen:false, width:620, title:phase, beforeClose: function(event, ui) { $('#'+phase+' map').attr('name', mapname); }});
$dialog.dialog('open');
return false; // So firefox won't just follow the link
}
}
I could really do with some help here as I have no idea why the links aren't firing.
Thanks,
Steve
So, the reason is the layout being position:relative does a number on IE, moving all of the hotspots to be relative to the body and not to the image map itself.
Solution is to fix that layout issue.