How can I deselect the currently selected row and select the one that follows it by clicking a button? I am using AngularHotkeys.js for this purpose.
It gets even more complicated because I can sort the table with different columns. It would be helpful to know the index of the current row based on the current sorting applied.
What is the best approach to solve this problem?
All suggestions are welcome.
To access the sorted and filtered array of rows, you can utilize
$scope.gridApi.grid.renderContainers.body.visibleRowCacheAn example of how your code might look:
$scope.selectNextRow = function() {
var currentRowIndex;
var selectedRows = $scope.gridApi.selection.getSelectedRows();
if( selectedRows.length < 1 ){
// if nothing selected, we'll select the top row
currentRowIndex = -1;
} else {
// if there are multiple selected, we use the first one
var selectedRow = selectedRows[0];
var gridRow = $scope.gridApi.grid.getRow(selectedRow);
currentRowIndex = $scope.gridApi.grid.renderContainers.body.visibleRowCache.indexOf(gridRow);
}
$scope.gridApi.selection.clearSelectedRows();
$scope.gridApi.selection.selectRow($scope.gridApi.grid.renderContainers.body.visibleRowCache[currentRowIndex + 1].entity);
};
View a demo at http://plnkr.co/edit/Z7HCjVY6oxGJzyjLI6Qo?p=preview
If I'm following correctly, it seems like you should be able to achieve your desired outcome with a similar approach. (Please note that this hasn't been tested)
$scope.scrollToPosition = function( index ) {
$scope.gridApi.core.scrollTo( $scope.gridOptions.data[index], 0);
};
$scope.moveNextRow() {
var currentRow = $scope.gridApi.selection.getSelectedRows();
scrollTo(currentRow + 1);
}
Cheers!
In my development project, I am creating a .NET wrapper for the popular java-script library called Linkify.js, utilizing Microsoft's ClearScript. The challenge I am facing involves implementing the attributes property within the options object parame ...
After developing an ionic-1 application for iOS and Android devices, I encountered an issue with displaying mobile numbers in one of the views. The numbers are contained within <p> tags. While users can click and hold on a number to copy it on Andr ...
After reading through this response on Stack Overflow, I attempted to pass data when clicking a button and invoking a function from Controller1 to Controller2. Here is my attempt: Controller1: $scope.DetailsLivraison = function(){ ...
I am currently troubleshooting an issue with a HTML5 canvas inside a Bootstrap modal. The canvas is designed to be a selection game where objects can be selected and manipulated. Everything works fine in the center of the 600x600px canvas, but there is an ...
I have implemented Bootstrap 5 toasts to showcase an advertisement on my website. The goal is to make the advertisement disappear for 24 hours once the user closes it. Here's the current code snippet: <div class="position-sticky bottom-0" ...
I am currently using npm's simple-ssh library to establish a connection with a remote host as the root user. I have an additional superuser account named serviceUser. My objective is to switch to this user by running su serviceUser (Note: su service ...
Struggling with integrating React Router into my Electron desktop app for navigation. During debugging, I realized that the login component, which doesn't use routers, transitions smoothly to a component with a router. However, this new component fail ...
When I compile a native HTML element, everything works perfectly fine. However, when I try to compile an Angular Material element (md-button), the console displays an error message: "Error: [ngTransclude:orphan]". I've reached a point where I am com ...
In my current project, I encountered a challenge with changing the background color to black and the body text color to white within an iframe. Additionally, all elements that are originally styled with black in an external stylesheet also need to be chang ...
Essentially, I am looking to have a div box slide in on the page as it loads. This method has worked successfully on other websites and HTML previews that I have tested it on so far. However, for some reason, it does not seem to work on this specific websi ...
Currently, I am working on a view where ng-show is used to display a select DOM object when certain conditions are met, and an input DOM for all other scenarios. However, I have noticed that there is a significant delay in the disappearance of the input bo ...
Within my React project, I am retrieving data from a JSON source like so: The simplified JSON data appears as: const listData = [ { "_id": "abscdf456", "bucket": { code: "videos" }, "contents": [{}, {}, {}, {}] }, { "_id": "absusi78 ...
My curiosity lies in developing man-machine interfaces using Electron. Currently, I am experimenting with a Star Trek life signs monitor demo. I came across this code that can be easily customized to create vertical and horizontal movements: http://jsfiddl ...
The code snippet below seems to be causing some issues. It requires jquery and three.js to function properly. The problematic lines are as follows: // change the view so looking at the top of the airplane views[1].camera.position.set( 0,5,0 ); views[1].ca ...
This query marks the initiation of the narrative for those seeking a deeper understanding. In an attempt to incorporate this class into app.module: import { Injectable } from '@angular/core'; import { KeycloakService } from 'keycloak-angul ...
Is it true that cross-domain ajax requests require a 'proxy' server to be used? But what if an ajax request is made from server1.example.com to server2.example within the same domain of example.com? Would that still not work? I've noticed ...
My journey into the world of bootstrap and json files has hit a roadblock, and I need some help with the following issue: Here is a snippet of my code: <div class="container"> <h1 class="text text-success text-center ">Kontoauszug</ ...
I am currently working on an Angular 11 application and I have a specific requirement to download a PDF file from a given HTML content. The challenge is that the HTML content exists independent of my Angular app and looks something like this: < ...
I'm encountering an issue with rendering a view template using a directive in my main page. The JavaScript code in my main page attempts to access an element in the view template before it's rendered, resulting in an 'undefined' error l ...
I am encountering a similar issue to the question mentioned here: Express.js session lost after about 3 minutes Unfortunately, I have not been able to find a solution yet. This is my Session Code: app.use( session({ secret: 'secret', resave ...