Navigating to the parent node in a treeview within the wijmo flex grid: a step-by-step guide

Utilizing the wijmo flex grid, I've successfully created a tree view for my data. I can determine if a specific node has children and its level, but I'm struggling to navigate to the parent node from a given one. Additionally, I am able to retrieve the index for each row.

Any insights or guidance on this matter would be greatly appreciated.

$scope.selectionChanged = function(sender,args){
       var index = sender.selection.row;
        var temp;
        console.log(index);
        temp = sender._rows[index]._data;
        console.log(temp.reports);
    }; 

Answer №1

FlexGrid has two types of rows: regular rows (Row objects) and nodes (GroupRow objects). Regular rows do not have a "level", while GroupRow objects possess a "level" property that indicates the node's level.

If you need to find a row's parent node, you can iterate through the grid's rows collection until you locate a node with a "level" lower than the starting point.

Take a look at this example:

http://jsfiddle.net/Wijmo5/8n2yde6f/

Pay attention to the implementation of the "getParentNode" function, which should help you achieve your objective:

// Retrieve the parent row for a given FlexGrid row.
// Return the parent row or null if the original row has no parent.
function getParentNode(row) {

  // Get the row's level
  var startLevel = row instanceof(wijmo.grid.GroupRow) ? row.level : -1;
  var startIndex = row.index;

  // Traverse upwards to find the parent node
  for (var i = startIndex - 1; i >= 0; i--) {
    var thisRow = row.grid.rows[i],
        thisLevel = thisRow instanceof(wijmo.grid.GroupRow) ? thisRow.level : -1;
    if (thisLevel > -1) {
      if (startLevel == -1 || (startLevel > -1 && thisLevel < startLevel)) {
        return thisRow;
      }
    }
  }

  // If not found
  return null;
};

I hope you find this information helpful.

Answer №2

To determine if the selected row contains children, you need to access the dataItem of the row and check for the presence of child items using the FlexGrid's childItemPath that has been configured.

For a demonstration, refer to this functional example: http://jsfiddle.net/banzor/700e6bn2/1/

Below is the code snippet for handling the selectionChanged event.

$scope.selectionChanged = function(sender, args){
    var index = args.row;
    var row = args.panel.rows[index].dataItem;
    var childPath = sender.childItemsPath;
    var children = row[childPath];

    if (children && wijmo.isArray(children)) {
        console.log("Has items: " + children.length);
    }
}; 

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

Are there any alternative solutions to the onunload event in Chrome, or any other ways to achieve the

After extensive searching for a solution to this issue, including scouring Google Chrome support sites and the Chrome Bug Issues page where the problem has not yet been resolved. Currently, I find myself in a situation where I need to use the onload or onb ...

Whenever a menu option is clicked in Umbraco, the page always redirects to the route #/content

After updating my site to the latest version available, I encountered a problem: Whenever I click on any link in the menu on the admin page (/umbraco) The temporary solution I discovered is Click on the link Go to profile Edit Confirm that you want to ...

Tips on how to remove the filter from a select element using Angular?

My code includes the following HTML: <select ng-options="mark.id as mark.name for mark in marks" ng-model="markSearch.mark.id"> <option value="">-- Choose mark --</option> </select> ... <tr ng-repeat-start="pipeType in pipeT ...

Navigate to a fresh webpage and find the scrollbar sitting at the bottom

When launching a new website using my forum system, I want the scrollbar to automatically be at the bottom so users don't have to scroll down. I'm not experienced in JavaScript and need help creating the code for this feature. ...

Enclose each instance of "Rs." with <span class="someClass">

I'm facing an issue with the currency symbol "Rs." appearing in multiple places on my website. I want to enclose every instance of this text within <span class="WebRupee">. However, if it's already wrapped in <span class="WebRupee">, ...

Looking to implement a CSS effect that will hide content without removing the space it occupies on the page?

Is there a way to hide specific buttons within the right column of a 3-column table display? I am currently utilizing jQuery to achieve this function. The purpose behind hiding these buttons is to prevent any quick clicks that might interfere with the fa ...

Retrieve a JSON object from a Knockout observable array using the object's ID

I'm struggling to find examples of ko.observablearrays that deal with complex JSON objects instead of simple strings. I have an observable array containing a large JSON object with several properties, and I need to retrieve a specific object based on ...

Modify the useRef value prior to the HTML rendering (React functional component)

Hello everyone, I am attempting to update the value of useRef before the HTML is rendered. I have tried using useEffect for this purpose, but it runs after the HTML is ready, making it unsuitable for my needs. What I want to achieve is resetting the value ...

React-modal triggers the file-explorer upon exiting the dropzone

Within my project, I have implemented a button that triggers a modal to appear on mouse-over. This button is nested inside a dropzone element. https://i.sstatic.net/95dxy.png The issue arises when I exit the modal by clicking (not exiting with the escape ...

Prevent all click and keyup events from being activated until the ajax call finishes

Is there a way to prevent all links from being activated until an ajax call is complete? I am looking for a solution that works for both click events and keyup triggers. In essence, what I am after is: - The Ajax link is activated (either through a clic ...

Script tag for Next.js reloading functionality

I have been facing a challenge while trying to integrate third-party commenting scripts like (disqus, remark42, hyvor) into my next.js application. The issue I encountered is that the script only loads on the initial page load. Subsequently, I need to refr ...

Adjust the border color of Material UI's DatePicker

https://i.sstatic.net/ZvNOA.png Hello everyone, I am currently working with a DatePicker component from Material UI. My main goal is to change the border color of this component. I have attempted various methods such as modifying classes, adjusting the th ...

Validation with Javascript can trigger the display of a hidden element

Hello there, I could really use some assistance with the JavaScript part of this code. I have two JavaScript functions: one for validating if a radio checkbox is selected, and another for revealing the "answer". Currently, an alert pops up if no selections ...

The unexpected error $parse:syntax has occurred: token '' is not recognized - Space within String

I encountered an issue with my code when I included a string with a space between two words. Currently, I am utilizing AngularJs. stringAmi = '<i class="fa fa-user-plus fa-2x" ng-click="demandeAmiNotif(' + $scope.invite + ');"></i& ...

What is the process for incorporating JavaScript files into an Angular project?

I have a template that works perfectly fine on Visual Studio. However, when I try to use it on my Angular project, I encounter an issue with the JavaScript code. I have filled the app.component.html file with the corresponding HTML code and imported the ...

Whenever I repeatedly click the button, the array will store a new value. My goal is for it to collect and store all values obtained from the function

After retrieving data from the listAPI value using an API, the output is displayed as follows: //output - console.log(listAPI) 5) [{…}, {…}, {…}, {…}, {…}] 0: {id: "1", name: "name 1", active: "true"} 1: {id: " ...

Keep fancybox items in their designated spot

When the window is opened at full size, everything looks fine. However, when you resize the window horizontally, the thumbnails shift and disappear. I want them to remain fixed in their position like the large pop-up image so that users can still see them ...

React app experiencing inconsistent loading of Google Translate script

In my React application, I have integrated the Google Translate script to enable translation functionality. However, I am facing an issue where the translator dropdown does not consistently appear on every page visit. While it sometimes loads properly, oth ...

Retrieve container for storing documents in JavaServer Pages

Previously, I created JSP and HTML code to upload a file from the hard disk into a database using <input type="file" name="upfile"> However, a dialog box with an "Open" button is displayed. What I am looking for is a "Save" button that will allow u ...

Exploring the functionality of a Vue component designed solely through a template

I currently have a basic Vue application set up: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'& ...