Tips for applying styles to the parent item when the sub item is selected in a Kendo menu

Currently, I am utilizing the Kendo Menu feature to create a customized menu. To style the selected item in the menu, I have incorporated the following code:

$("#menu").kendoMenu({
    select: function (e) {
        // Remove previously selected options for this menu
        $(".k-state-selected", this.element).removeClass("k-state-selected");
        // Select item
        $(e.item).addClass("k-state-selected")
    }
});

.k-menu .k-state-selected> .k-link {
    color: lightcoral;
}

Using the above code snippet, I have successfully applied styles to the selected items in the menu.

However, I now face a new challenge. Each parent item in the menu has sub-items, and when I select a sub-item, I want the parent item to also inherit these styles. Could someone provide guidance on how to achieve this?

Answer №1

If you're looking to experiment with the styling of a selected node, similar to how you customize a selected item, pay attention to nodes marked with the CSS class k-state-active.

Here's my suggestion:

$("#menu").kendoMenu({
    select: function (e) {
        // Clear previous selections for this menu
        $(".k-state-selected", this.element).removeClass("k-state-selected");
        $(".ob-selected-ancestor").removeClass("ob-selected-ancestor");

        // Select item
        $(e.item).addClass("k-state-selected")
        $(".k-state-active", this.element).addClass("ob-selected-ancestor");
    }
});

First, I remove any styling applied using ob-selected-ancestor from all marked nodes (resetting everything).

Next, I apply the CSS class ob-selected-ancestor to every node marked with k-state-active.

And finally, I define a style like this:

.ob-selected-ancestor {
    color: green;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Height-adjustable Rows

I recently encountered a challenge while designing a layout for user reviews in one of my projects. Each review varies in length, leading to irregular row lengths with different div element sizes. My goal is to create rows with 3 divs each and have the sub ...

What is the method for passing multiple parameters to a Vue.js component in Vue.js 2?

Here is how I have structured my view: <table class="table table-inbox"> ... <tbody> @foreach($messages as $message) <tr> ... <td> <div class="btn-group" role="group" aria-label="..."& ...

What strategies can be implemented to avoid PHP timeouts when running loops, without adjusting the max_execution_time setting?

I am facing a challenge with a folder full of documents that need to be processed by a PHP script. There are around 1000 documents in the folder, and each one needs to be deleted after processing. Is there a way to efficiently run or restart a PHP script ...

Incorporating a parameter into a <div> only when the parameter holds a value

Being new to web development, I have a rather basic query. If the datainfo prop variable is not empty, I'd like to include a data attribute in the div tag. <div style={{height: props.height - handleHeight()}} data={datainfo ? datainfo : ""}> C ...

Learn how to dynamically activate an icon in Angular to enhance user interaction

HTML Code: The Zoom Component <div class="zoom py-3"> <i nz-icon nzType="minus" (click)="zoomToggle(false)" nzTheme="outline"></i><br> <i nz-icon nzType="plus" (click)=&q ...

Refresh the Rails HTML table with new data by incorporating ajax requests and vanilla JavaScript

I'm struggling to find a solution without using jQuery in my current scenario. How can I refresh a partial on my page without reloading the entire page? Within my new.html.erb file, there's a button that triggers a JavaScript function each time ...

The behavior of my waypoint function becomes unpredictable if the user refreshes the page after scrolling beyond it

I have a navigation bar that changes position to fixed when the user scrolls down past it and back to its original state when scrolling up, using a specific waypoint: var $navbar = $('.navbar-default'); $navbar.waypoint(function(){ if ($(&ap ...

Unit Testing Angular: Mastering Unit Testing for the .map() Function

I am in need of testing a service method, but I am unsure about how to achieve complete coverage for the code that gets executed as a result of calling another injected service method. The Service Method to be tested: @Injectable() export class BomRevisi ...

Exploring the world of Single Page Application SEO and the wonders of infinite scroll with

Looking to revamp our website, which features a feed similar to Pinterest. Considering moving away from the messy jQuery code and leaning towards either AngularJS or Backbone+Marionette for a more structured approach. The site is user-generated with a stro ...

Javascript tip: Place brackets within braces when declaring an array

Recently, I came across a code snippet that is new to me and I'm having trouble finding an explanation for it online: function segColor(c) { return { red: "#FF0000", green: "#00ff00", blue: "#0000ff" }[c]; } I'm ...

Analyzing Varied Date Formats

I'm looking to create a function in AngularJS that checks if a given date is after today: $scope.isAfterToday= function(inputDate){ if(inputDate > Date.now().toString()){ return true; } else { return false; } } The iss ...

When referencing a particular React commit in package.json, it may result in the installation of react-tools instead of react itself

After including the following line in my package.json: "react": "git://github.com/facebook/react.git#08e4420019f74b7c93e64f59c443970359102530" When I execute npm install, I notice that node_modules/react-tools has been installed instead of node_modules/r ...

Angularjs directives failing to compute accurately~

I'm working with an AngularJS directive where the HTML template is compiled within the linker function. var htmlTemplate = '<img ng-src="~/img/logos/{{account.Logo}}" width="45" height="35" />' var linker = function (scope, element) ...

How can I retrieve an array of collections from multiple parent documents in Firebase and pass them as props in Next.js?

I need to access all the collections within the documents stored in a collection named users. This is how I currently retrieve all the user information: export async function getServerSideProps() { const snapshot = await firebase .firestore() .collection ...

What could be the reason for this JSON being considered "invalid"?

Despite passing validation on jsonlint, both Firefox and Chrome are rejecting this JSON: { "messages": [ { "subject": "One" }, { "subject": "Two" }, { "subject": "Three" ...

Client requests are not being responded to by the server

I've been trying to send a request from the client to the server using Jquery and Ajax, but I'm running into some issues. I've also attempted using Ajax and Xml, but without success. Can anyone offer assistance with this problem? Here is my ...

Find the similarities and differences between two circular structured JSON objects

How can I effectively compare 2 websocket connections on my nodejs webserver when I can't simply use json.stringify due to the circular structure of the objects? ...

Hash functionality does not cooperate with the back button, requiring the use of JavaScript to trigger a function when the URL changes

Hi everyone, I have a code snippet that is designed to read the value after the hash in the URL and display a specific div based on that value. It works as expected, except for when the hash is changed while already on the site or when navigating back with ...

Restrict the option to select checkboxes

Can anyone help with limiting checkbox selection? This is the code I currently have... foreach($res as $res) echo '<div class="ediv"><input type="checkbox" class="echeck" name="pr[]" value="'.trim($res['product']).'" ...

Struggling with jquery's addClass method when trying to apply a class to

Below is a sample tr: <tr> <td><input type="text" class="ingredient required" name="ingredient"></td> <td><input type="number" class="amount required" name="amount" ></td> <td><input type="number" c ...