ng grid shift select issue mistakenly selects extra rows

Take a look at my plunker here: link

var app = angular.module('app', []);
// encountering a silly error that prevents me from pasting the entire code, please refer to the plunker for details

To replicate the issue:

  1. Click on the first row with the left mouse button
  2. Press ctrl + end to scroll to the bottom rows
  3. Select the row labeled 'Select me...' by clicking while holding down shift + ←
  4. Expected behavior: Rows up to 'Select me...' should be selected
  5. Actual behavior: Additional rows are also being selected

Note: The additional rows become deselected when scrolling.

javascriptangularjsng-grid

Answer №1

Here is a code snippet that I used successfully:

beforeSelectionChange: function() {
    var grid = angular.element('.ngGrid');
    grid.data('alreadySelectedItems', grid.scope().selectedItems);
    return true;
},
afterSelectionChange: function (rowItem) {
    if (rowItem.selected === true) {
    } else if (rowItem.selected === false) {
    } else if (rowItem.length > 0) {
        var selectedIds = [],
            grid = angular.element('.ngGrid'),
            renderedRows = grid.scope().renderedRows,
            alreadySelectedItems = grid.data('alreadySelectedItems') || [];
        angular.forEach(rowItem, function (row) {
            if (row.selected === true) {
                selectedIds.push(row.entity.Id);
            }
        });
        angular.forEach(renderedRows, function (row) {
            if (selectedIds.indexOf(row.entity.Id) === -1 && alreadySelectedItems.indexOf(row.entity) === -1) {
                row.selected = false;
            }
        });
        grid.removeData('alreadySelectedItems');
    }
}

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

Leverage the power of gRPC with Node.js and TypeScript for seamless

I'm trying to implement GRPC in a Node.js and Typescript project, but I'm facing an issue with generating proto files on Windows 10 using npm. I need to run the file transpile-proto-ts.sh: #!/usr/bin/env bash OUT_DIR="./src" TS_OUT_DIR="./src" ...

javascripttypescriptnpmgrpc

Can you add links or buttons to the page view using Directus v9?

In my Directus 9 project, I have a table dedicated to contacts that includes their emails and a special button leading to an external site. I am wondering if it is possible to make the email address clickable (as a mailto: link) and still display the spec ...

javascriptnode.jsvue.jsdirectus

Tips for sending parameters in onClick within a React Functional Component

In my ReactJS Functional Component, I need to pass a few values when a button is clicked. The code snippet for this functionality is below: <span className="edit" onClick={ onClickEdit(value.title, value.details)}> <img src={editImg} height=" ...

javascriptreactjs

What is the proper method for submitting a mail form via AJAX without using jQuery?

Currently, I am working on integrating a PHP mail form with AJAX. The aim is to create a straightforward form that collects user information such as phone numbers and sends it to my email address. While I have managed to set up the form to send emails usi ...

phpjavascriptajaxformssubmit

Utilize an AngularJS directive to deactivate all child elements

I've implemented a directive that disables all selected child elements as shown below: app.directive('noeDisable', function () { var linkFunction = function (scope, element, attributes) { scope.text = attributes["=noeDis ...

angularjsangularjs-directive

Error: It seems like there was a problem with the injector and the module could not be

Currently, I am encountering an issue with the code below. Whenever I try to run it, I receive the following error: Uncaught Error: [$injector:nomod]. Even though the module name is correct, I am unsure of why this error is occurring. I have double-checked ...

angularjs

Bringing in the jqGrid library with Meteor using NPM

I am currently working on a project using Meteor and I want to incorporate the free-jqgrid library. However, I am unsure of the correct way to import this library... I have tried: import 'free-jqgrid'; import jqGrid from 'free-jqgrid&apo ...

javascriptnode.jsmeteornpmjqgrid

Create a small circle in the bottom left corner with a constrained size

I'm trying to create a circle at the top of the screen on mobile, similar to the image below. The circle should take up a percentage of space, with the rest of the content appearing against a blue background as shown in the image. However, I'm h ...

javascripthtmlcssvue.jsvuetify.js

What is the best way to display recently added information?

I'm curious about why the newly added data isn't showing up in the template, even though it does appear when using console.log (check out ViewPost.vue). After adding a new post, this is the result: result.png. Does anyone know how to fix this? ...

javascriptvue.jsvuejs2vuex

Top method for handling multiple conditions - JavaScript

I created a customized function to create a responsive carousel with multiple images per slide. (Unfortunately, I couldn't get Owl Carousel to work on my Angular project, but that's not the focus here). The number of images displayed per slide i ...

javascriptfunctionif-statementcomplexity-theory

`How can I retrieve environment variables in React or inject them into a React application?`

I attempted to include the following code in the plugins section of my webpack configuration, but it resulted in an unusable build. It's worth noting that I am not using create-react-app. new webpack.DefinePlugin({ 'process.env': dotenv. ...

javascriptreactjswebpackenvironment-variables

Please refrain from refreshing the page multiple times in order to receive updated data from the database

Currently, I have created a countdown timer from 00:60 to 00:00. However, once the timer reaches 00:00, I am looking to refresh the page only once in order to retrieve a new value from the database. Does anyone have any suggestions on how to achieve this ...

javascriptphpjqueryhtml

When working with Vuejs, if you try to use "axios" in a .js file, you may encounter an error

I am currently working with VueJS and attempting to send a GET request to my API. I am using axios, but encountering an issue when trying to import it. If I use require for the import, I receive this error: Uncaught ReferenceError: require is not defined. ...

javascripthtmlvue.jsaxiosget

Is there a method to create a typecheck for hasOwnProperty?

Given a certain interface interface Bar { bar?: string } Is there a way to make the hasOwnProperty method check the property against the defined interface? const b: Bar = { bar: 'b' } b.hasOwnProperty('bar') // works as expected b. ...

javascripttypescripttypes

Loading content within the designated element

<div class="col-sm-6" id="ajaxform"></div> <!-- begin snippet: js hide: false --> <!-- language: lang-html --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul id="accordio ...

javascriptjqueryajax

encountered empty values when retrieving static paths

I need to retrieve the values of slug and tags in my params. It's important to note that tags is not an array, but just a string. export async function getStaticPaths() { const chapters = await client.fetch( `*[_type == "chapters" & ...

javascriptreactjsnext.jscontent-management-systemgroq

Tips for preventing duplicate triggering of a broadcast event from app.js in AngularJS

Within the app.js file, I am utilizing a callback function that broadcasts on the $rootScope to trigger a method in the second controller. function onSuccess(state) { if (state != true) { } else { $rootScope.$broadcast(&a ...

javascriptandroidjqueryangularjs

What is the process for excluding a file from running in jest?

Currently, I am working on integration tests using Jest and I have a folder with 20 test files. However, there are three specific files in that folder that should not be executed during the testing process. I tried using testPathIgnorePatterns, but it seem ...

javascriptnode.jsjestjsjasmine

Make the adjustment from an H1 tag to an H2 tag with the help of

I need assistance with changing the HTML code from using an <h1> tag to a <h3> tag, using Vanilla JavaScript. Here is the code snippet in question: <h1 class="price-heading ult-responsive cust-headformat" data-ultimate-target=" ...

javascripthtml

Tips on identifying the method to import a module

Currently, I am including modules into my Node project like this: import * as name from "moduleName"; Instead of the old way: var name = require("moduleName"); In the past, we used require in Node projects. My question is, is there a difference in ...

javascriptnode.jsexpressecmascript-6es6-module-loader