I am using Kendo UI treeview to display certain data dynamically. I have no issues with the data loaded. But found one scenario which is as follows
When I click on the expand icon to the left of the node(which has a child node), the expand icon and the collapse icon overlaps with that of the nodes. When the focus moves out of that tabstrip which has the treeview data, then the expand/collapse icon does not overlap and it is to the left of the node. When I hover to the tab strip containing the data , then both the icons overlap with that of the nodes.
Following is the pane and the tab strip declaration
<div id="inner-1" class="configuration k-widget k-header" style="height: 100%; border: 0;background- color:#E1E5E7;"></div>
var leftTabStip=null;
leftTabStip = $("#inner-1").kendoTabStrip().data("kendoTabStrip");
leftTabStip.append({
animation: {
open: {
effects: "fadeIn"
}
},
text: "Sample",
content: '<div id="treeSample" style="overflow:auto;position:relative;border:1px solid #B0B0B0;"> </div><ul class="options"> ',
encoded: false
});
finalPath is the array that contains the tree hierarchy data and I am using these 3 properties id,text and encoded..
var localDataSource = new kendo.data.HierarchicalDataSource({
data:finalPath
});
var groupTree1 = $("#treeSample").kendoTreeView({
dataSource: localDataSource
}).data("kendoTreeView");
Is there any way to ensure that the icons and nodes do not overlap and that even if i hover/ move out of tab strip or click on the icon, the data should be displayed properly like the expand/collapse icon should be to the left of the node and not overlap. Please guide me.
Thanks in advance.
I had the same problem with IE 8 running in compatibility view settings (i.e. IE 7 document mode)
Found this link quite useful:
...The problem is probably hasLayout related in IE 7, so I advise you to experiment whether triggering layout with a zoom:1 style to specific elements will fix the issue...
This css I applied to treeview, fixed the same problem in my case:
li
{
zoom: 1;
}
Related
I applied kendo editor on a div element rather using textarea as it's giving some issues in iPad. Now, I don't want the editor to have toolbar to format text.
I tried applying styles as none & set tools to an empty array but still the toolbar appears with a draggable button in it.
<div id="targetdiv" contenteditable="true" style = "resize: none;width:
100%
!important; height:150px; max-height:150px;max-width: 100% !important;">
</div>
<script>
$("#targetdiv").kendoEditor({
tools: []});
</script>
The toolbar appears though the editor it initialized with no tools, as in image below.
Approach 1: (Not working)
<style>
.k-editor-toolbar
{
display:none;
}
</style>
Approach 2: (Not working)
$('.k-editor-toolbar').hide();
Approach 3: (partially works)
Added a select event but still the toolbar appears for an instant and then disappears.
$("#targetdiv").kendoEditor({
tools: [],
//Fires when the Editor selection has changed.
select: function (e) {
let editor = $("#targetdiv").data("kendoEditor");
editor.toolbar.hide();
});
If you don't want to show the toolbar define an empty tools in the KendoUI editor initialization:
$("#editor").kendoEditor({
// Empty tools so do not display toolbar
tools: [ ]
});
If you want to disable the edition, you should use:
$(editor.body).attr('contenteditable',false);
you can try this one as well
.k-editor-toolbar
{display:none !important;}
Finally,
I have to subscribe for the open event of the editor toolbar and prevent its execution. This resolved my issue.
let editor = $("#targetdiv").getKendoEditor();
editor.toolbar.window.bind("open", function (e) {
e.preventDefault();
});
My CKEditor fields often contain lots of content with h1, h2, h3, etc headings, and I've written a script that presents all the headings in a sidebar for quick reference. I'd also like to use this sidebar as a navigation menu for the editor content, so clicking a heading in the sidebar scrolls the editor to the related heading, but I can't figure out how to wire it all up.
This post at https://davidwalsh.name/scroll-element-ckeditor leads me to believe that it should be possible, but I can't figure out how to get to the "editor" element described in the post.
My sidebar is built with jQuery from a CKEditor textarea with id="content" like this...
var content = $('<div/>').append($('#content').val());
var sidebar = "";
$(content).find('h1,h2,h3,h4,h5,h6').addClass('heading');
$(content).find('.heading').each(function () {
sidebar += this.outerHTML;
});
$('#sidebar').html(sidebar);
I imagine using jQuery :contains() to identify heading elements in the editor based on the text they contain, but I can't figure out how to hook back into the CKEditor instance in a way that enables this kind of DOM activity.
I am using CKEditor 4 but am happy to upgrade to version 5 if it offers a better solution to my problem.
Thanks!
This is what wound up working for me:
var content = $('<div/>').append($('#content').val());
var sidebar = "";
$(content).find('h1,h2,h3,h4,h5,h6').addClass('heading');
$(content).find('.heading').each(function () {
sidebar += this.outerHTML;
});
$('#sidebar').html(sidebar);
$('#sidebar .heading').click(function() {
var element = $('#cke_content iframe').contents().find(':contains(' + $(this).text() + ')')[2];
if (element) {
element.scrollIntoView();
}
});
I am using bootstrap template and Kendo Window and so far positioning of modal kendo windows wasn't too hard.
But now as I a use a different layout for a certain area, I find myself having problems with that matter.
following code is expected to create a centered (x-axis) modal kendo window:
#(Html.Kendo().Window()
.Name("Window1")
.Visible(false)
.Position(builder => builder.Top(100))
.Draggable()
.Content(#<div class="kendoWindowContent"><p>Please wait...</p><div class="k-loading-image"></div></div>)
.Width(1000)
.Title("Title1")
.Actions(actions => actions.Close())
.Modal(true)
.Resizable())
..and displaying via:
var wnd = $("#ownerVoucherCreateWindow").data("kendoWindow");
wnd.refresh({
url: '#Url.Action("Voucher_Create", "OwnerVoucher")'
});
wnd.open();
The window is not beeing displayed in the middle of the x axis.
Are there any constraints in order to have the kendo window beeing centered.
Window centering requires the usage of the center() method. Since the Window content is loaded via Ajax, you need to center the widget in its refresh event.
var wnd = $("#ownerVoucherCreateWindow").data("kendoWindow");
wnd.one("refresh", function(e) {
e.sender.center();
});
wnd.refresh({
url: '#Url.Action("Voucher_Create", "OwnerVoucher")'
});
wnd.open();
It is also possible to trigger centering in every refresh event, instead of just once.
Another option is to set explicit width and height. In this case you can center the Window at any time, because the widget dimensions will not change after changing (loading) the content.
ok I guess I was just lucky that all my kendo windows happened to be displayed centered although specifying an explicit offset to top like described.
I assumed, that the window would automatically center on y-axis when having only an x-axis position set.
As it seems this is not the case. I don't really know why this has been working in the past.
Anyway, I figured out a way to center the window depending on the browsers' viewport and window width:
just in case anybodes cares...
function displayWindowCenteredOnYAxis(kendoWindow) {
var windowOptions = kendoWindow.options;
var pos = kendoWindow.wrapper.position();
var viewPortWidth = $(window).width();
var wndWidth = windowOptions.width;
pos.left = viewPortWidth / 2 - wndWidth/2;
kendoWindow.wrapper.css({
left: pos.left
});
kendoWindow.open();
}
Usage:
var wnd = $("#id").data("kendoWindow");
wnd.refresh({
url: '#Url.Action("Action", "Controller")'
});
displayWindowCenteredOnYAxis(wnd);
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;
} );
}
}
} );
One thing I don't understand is how did Minima.pl (http://minima.pl/pl) implement that feature within Isotope library where clicking on a thumbnail opens up a bigger gallery of images (a single clickable image, clicking on it makes it cycle through the rest of the images in a gallery) while resorting the Isotope items?
Here is how far I got -> http://tinyurl.com/cr5kzml
Anyone have any ideas on what I'm missing, how do I get this working?
Well, I am author of minima.pl website ;).
The part which takes care of repositioning of tiles after enlarging clicked one:
$('#mainContent').isotope('reLayout', function(){
$('html, body').animate({scrollTop: item.offset().top - 10}, 400);
});
It also takes care of scrolling browser window to top of clicked tile.
I am triggering the above action after loading clicked tile content (by AJAX). The trick is to trigger it simultaneously with enlarging the clicked tile.
I will be glad to answer any additional questions.
Actually, this is simple to achieve. Normally, a click on an Isotope .item can, for example, maximise it, another click minimises it. If you want interactivity inside a clicked-on Isotope .item, you simply don't attach the minimisation function to it. Instead, clicking on another Isotope .item minimises the previously selected = maximised item. By keeping track of the previously selected .item, clicks inside the maximised .item won't close it. Basic logic for an example that allows maximising and minimising only by clicking on a "header" zone inside each Isotope .item:
$(document).ready(function () {
var $container = $('#container');
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: 128 // corresponding to .item divs width relationships
}
});
// $container.isotope('shuffle'); // randomise for every new visitor
$items = $('.item'); // to reference methods on all .item divs later
$('.header').click(function () { // instead of registering the entire .item div (default use), only its .header div (child div) receives clicks
var $previousSelected = $('.selected'); // necessary for switching
if ($(this).parent().hasClass('selected')) { // use $(this).parent() (not $(this)), because the .header div is a child of the .item div
$(this).parent().removeClass('selected');
$(this).parent().children('.maximised').hide();
$(this).parent().children('.minimised').show();
$items.find('.minimised, .header').removeClass('overlay'); // returns all .minimised divs to previous state after the .item is closed again
} else {
$previousSelected.removeClass('selected');
$previousSelected.children('.minimised').show();
$previousSelected.children('.maximised').hide();
$(this).parent().addClass('selected');
$(this).parent().children('.minimised').hide();
$(this).parent().children('.maximised').show();
$items.not('.selected').find('.minimised, .header').addClass('overlay'); // adds .overlay on each .item which is not currently .selected
}
$container.isotope('reLayout'); // comment out to mimick old masonry behaviour
});
});
The actual interactivity inside each Isotope .item can then be coded however you like; hardcoded or dynamic...
By click on a thumbnail a ajax function return the same gallery except a bigger replacement for the thumbnail. Then let isotope rearrange the gallery. You can find an example here: http://www.maxmedia.com or http://www.phpdevpad.de (my own site).