How to have KendoPanel's all the sections expand - javascript

I just started using KendoPanel and I am wanting to expand all the segments of the panel under certain condition. I am using following code to achieve that:
var panelbar = $("#KendoPanel").kendoPanelBar();
var kendoPanelbar = panelbar.data().kendoPanelBar;
kendoPanelbar.collapse($("li", panelbar.element));
Seems like it is contracting all the segments instead of expanding them. What am I doing wrong?


Please try with below code snippet.
<ul id="mypanelbar">
<li class="k-state-active">First Item
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li>Second Item
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li>Third Item
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li>Fourth Item
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li>Fifth Item
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
</ul>
<script>
var panelBar;
$(document).ready(function () {
panelBar = $("#mypanelbar").kendoPanelBar().data("kendoPanelBar");
// Expand all item
panelBar.expand($("#mypanelbar li.k-item"));
});
</script>
Let me know if any concern.

Related

How can I get the index of a list item element not "display:none;"

I want to find the index of a list item element that has no attribute style="display:none;".
Here is my basic list:
<ol>
<li style="display:none;">LI 1</li>
<li>LI 2</li>
<li style="display:none;">LI 3</li>
<li style="display:none;">LI 4</li>
<li style="display:none;">LI 5</li>
</ol>
Thank you for your answers :)

While you could search for an element without a style attribute
const li = document.querySelector('ol li:not([style])');
console.log(li.textContent);
<ol>
<li style="display:none;">LI 1</li>
<li>LI 2</li>
<li style="display:none;">LI 3</li>
<li style="display:none;">LI 4</li>
<li style="display:none;">LI 5</li>
</ol>
If you're going to select elements based on the style display, I'd highly recommend using a class instead:
const li = document.querySelector('ol li:not(.hide)');
console.log(li.textContent);
.hide {
display: none;
}
<ol>
<li class="hide">LI 1</li>
<li>LI 2</li>
<li class="hide">LI 3</li>
<li class="hide">LI 4</li>
<li class="hide">LI 5</li>
</ol>

I think you can do like this.
const li = document.querySelector('li:not([style="display:none;"])');
console.log(li.textContent);
<ol>
<li style="display:none;">LI 1</li>
<li style="display:block;">LI 2</li>
<li style="display:none;">LI 3</li>
<li style="display:none;">LI 4</li>
<li style="display:none;">LI 5</li>
</ol>

How to add class to parent when child is visible?

I have a menu with a sub menu, when the sub menu is visible I want to add a class to parent list element.
<ul class="upper-menu">
<li>Item 1</li>
<li>Item 2</li>
<li class="parent-li">Item 3
<ul class="lower-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
<li>Item 4</li>
</ul>
Basically, when the "lower-menu" is visible, I want to add another class to the list element "parent-li". Also when the lower-menu is not visible, I want to the remove the class from "parent-li". Is this possible in JQuery?
Thanks

You can do by following jquery script
if($('.lower-menu').is(':visible')){
$(this).parent().addClass("YourClass");
}

You can select the desired element by :visible pseudo class and then assign your class to its parent:
$(".lower-menu:visible").closest('.parent-li').addClass("test");
.test {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="upper-menu">
<li>Item 1</li>
<li>Item 2</li>
<li class="parent-li">Item 3
<ul class="lower-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
<li>Item 4</li>
</ul>

List order rearrangement using jquery

Can anyone please help me on this problem.
I have a list order like:
<ul>
<li class="parent">Parent item 1</li>
<li class="no-parent">item 1</li>
<li class="no-parent">item 2</li>
<li class="parent">Parent item 2</li>
<li class="no-parent">item 3</li>
<li class="no-parent">item 4</li>
<li class="no-parent">item 5</li>
<li class="parent">Parent item 3</li>
<li class="no-parent">item 6</li>
<li class="no-parent">item 7</li>
</ul>
I want this like :
<ul>
<li class="parent">Parent item 1</li>
<div>
<li class="no-parent">item 1</li>
<li class="no-parent">item 2</li>
</div>
<li class="parent">Parent item 2</li>
<div>
<li class="no-parent">item 3</li>
<li class="no-parent">item 4</li>
<li class="no-parent">item 5</li>
</div>
<li class="parent">Parent item 3</li>
<div>
<li class="no-parent">item 6</li>
<li class="no-parent">item 7</li>
</div>
</ul>
is this possible to make it using jQuery?
Thanks in Advance.

If you are able to accept a semantically correct nested list, you could achieve that by using jQuery to loop through each .parent element and select each item after it until it hits the next .parent item using nextUntil(). Then, you create a new <ul> and append those children to it and then append the new <ul> to the parent <li>.
// Select all of the .parents and loop through them.
$('.parent').each(function() {
// Select all the following siblings starting from this .parent element until you reach the next .parent element.
var $children = $(this).nextUntil('.parent');
// Take the results and append them to a new ul element and then append that ul element to the current .parent li element.
$children.appendTo($('<ul>').appendTo($(this)));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="parent">Parent item 1</li>
<li class="no-parent">item 1</li>
<li class="no-parent">item 2</li>
<li class="parent">Parent item 2</li>
<li class="no-parent">item 3</li>
<li class="no-parent">item 4</li>
<li class="no-parent">item 5</li>
<li class="parent">Parent item 3</li>
<li class="no-parent">item 6</li>
<li class="no-parent">item 7</li>
</ul>

Searching for formula to align submenus direction in menu along the width

Currently I'm trying to achieve this
With this: http://jsfiddle.net/EJXNV/3/
HTML:
<div>
<ul>
<li>Menu
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</li>
<li>Menu
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</li>
<li>Menu
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</li>
<li>Menu
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</li>
<li>Menu
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</li>
<li>Menu
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</li>
JS:
var coef = 7.5;
$("div > ul > li").each(function () {
$(this).children("ul").css("left",
($(this).position().left
/ coef)
* (-1));
});
But I can't figure out from where I should took that coefficient = 7.5 (I've got it empirically).
Please, help me to find out what formula I should use to get this coefficient.

I was able to figure out it by myself:
$("div > ul > li").each(function () {
var coef = $("div > ul > li").last().position().left / ($(this).children("ul").width() - $(this).width());
$(this).children("ul").css("left", ($(this).position().left / coef) * (-1));
});
http://jsfiddle.net/EJXNV/4/
Works with any width of any element (except the container, it must be fixed width and relative).

Is there anyway to stop collapsible side navigation to stop jumping on page load?

The code works except it keeps jumping every time I load or refresh the page and I was wondering if anyone knows of a good solution to this? Any help much appreciated.
Press the 'Run' button on this Jsfiddle to see what I mean.
<div id="sideNav_header">Navigation</div>
<ul id="collapsibleMenu">
<li>Link
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>Link
<ul>
<li>List Item 2.1</li>
<li>List Item 2.2</li>
<li>List Item 2.3</li>
</ul>
</li>
<li>Link
<ul>
<li>List Item 3.1</li>
<li>List Item 3.2</li>
<li>List Item 3.3</li>
</ul>
</li>
<li>Link
<ul>
<li>List Item 4.1</li>
<li>List Item 4.2</li>
<li>List Item 4.3</li>
</ul>
</li>
<li>Link
<ul>
<li>List Item 5.1</li>
<li>List Item 5.2</li>
<li>List Item 5.3</li>
</ul>
</li>
<li>Link
<ul>
<li>List Item 1.1</li>
<li>List Item 1.2</li>
<li>List Item 1.3</li>
</ul>
</li>
<li>Link
<ul>
<li>List Item 2.1</li>
<li>List Item 2.2</li>
<li>List Item 2.3</li>
</ul>
</li>
<li>Link
<ul>
<li>List Item 3.1</li>
<li>List Item 3.2</li>
<li>List Item 3.3</li>
</ul>
</li>
<li>Link
<ul>
<li>List Item 4.1</li>
<li>List Item 4.2</li>
<li>List Item 4.3</li>
</ul>
</li>
<li>Link
<ul>
<li>List Item 5.1</li>
<li>List Item 5.2</li>
<li>List Item 5.3</li>
</ul>
</li>
<li>Link
<ul>
<li>List Item 5.1</li>
<li>List Item 5.2</li>
<li>List Item 5.3</li>
</ul>
</li>
</ul>
//Script//
$("#collapsibleMenu > li > a").find("+ ul").slideUp(1);
// Expand or collapse:
$("#collapsibleMenu > li > a").click(function() {
$(this).find("+ ul").slideToggle("slow");
});​

Yes, change:
$("#collapsibleMenu > li > a").find("+ ul").slideUp(1);
to:
$("#collapsibleMenu > li > a").find("+ ul").slideUp(0);
http://jsfiddle.net/DjbeK/1/
Using slideUp(1) on page load doesn't make sense you can use hide() instead.

Categories

Resources