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

Navigating tables with jQuery using a loop and extracting data from two tables with matching row names

I am facing a challenge with a function that combines data from two tables, each containing a column named "name". How can I specify which table's name should be displayed? function createTableRow(customers) { var data = JSON.parse(customers.resu ...

javascriptjquerymysql

Unable to perform filtering on a nested array object within a computed property using Vue while displaying data in a table

Lately, I've been experimenting with different methods to filter data in my project. I've tried using various approaches like methods and watchers, but haven't quite achieved the desired outcome yet. Essentially, what I'm aiming for is ...

javascriptvue.jsfiltercomputed-properties

The absence of a semi-colon in JSLint

I encountered an error message indicating a semicolon is missing, however I am unsure of where to place it. Here is the snippet of code: $('.animation1').delay(350).queue(function(){ $(this).addClass("animate-from-top") }); ...

javascriptjquerydebuggingjslint

Obtain a compilation of users who have expressed their reaction to a message with a specific emoji on Discord

Check out this Discord.js code snippet for a Discord bot: client.channels.fetch('channelID here').then(function (channel) { channel.messages.fetch('messageID here').then(function (message) { console.log(message.reactions.cache.get(&a ...

javascriptdiscord.jsbotsjavascript-objects

I am attempting to incorporate a List View within a Scroll View, but they are simply not cooperating. My goal is to display a collection of items with additional text placed at the bottom

This is how it should appear: item item item item additional text here I am trying to create a layout where the list is in List View for benefits like virtual scrolling, but the entire layout needs to be within a Scroll View. I want to be able to con ...

javascriptangularlistviewnativescriptscrollview

Utilizing the express framework to dynamically render route requests

I'm interested in trying dynamic routing with the express framework for my Node.js server. Here is an example of how I am attempting to achieve this: <a href="/views/adminpanel?url={{mMenu.WebAddress}}" ng-click="Description(mMenu.WebAddress)"> ...

angularjsnode.jsexpress

How to fetch data from DynamoDB using AngularJS

I've been working on retrieving a value from DynamoDB and then assigning that value to ng-model in order to display it. However, I keep running into the issue of the data always being null. DynamoDB table "meta_value": { "clause_note": "Note: go ...

angularjslaravellaravel-4angularjs-scopeamazon-dynamodb

Creating a unique input box using CSS and HTML

Could someone help me achieve an input box like the one shown in the image below? https://i.stack.imgur.com/XtVNj.png Since I am new to CSS, I am not sure how to put text inside the border of an input box. Should I style the input directly or create a di ...

javascriptcss

Inquiry from a newcomer: ASP.NET with jQuery

I am working on a webform with a file upload button that has some specific requirements. Whenever the file is uploaded using the button, I need the C# code behind to execute first before any jquery functions are called. <script> $(document.read ...

javascriptjqueryasp.net

Removing an element from an array of objects in Javascript

My situation involves an array containing objects: var items = [{ id: 1, text: "test1" }, { id: 2, text: "test2" }, { id: 3, text: "test3"}]; In addition, I have this specific object: var itemToRemove = { id: 2, text: "test2" }; My objective is to veri ...

javascript

Personalized sorting to match the unique rendering of cells in Material UI Data Grid

I have integrated the Material UI V4 Data Grid component into my React Js application. The Data Grid component requires two props: rows (list type) and columns (list type). Below is a sample row item: const rows = [ { id: 1, customerName: " ...

javascriptcssreactjsmaterial-ui

What is the proper way to request permission for allowing others to access the mailto function?

I want to create a feature where users can open email on click using JavaScript. However, I have encountered an issue with using the mailto function in Chrome, as it requires changing the handlers settings to make it work. My query is whether it is possib ...

javascripthtml

Is the `beforeEach` function in Jasmine synchronized?

Is it guaranteed that multiple beforeEach functions will always run sequentially? beforeEach(function() {}); beforeEach(function() {}); beforeEach(function() {}); beforeEach(function() {}); beforeEach(function() {}); It appears they do. I conducted a tes ...

javascriptjasmine

Performing AJAX in Rails4 to update boolean values remotely

Suppose I have a model named Post which includes a boolean attribute called active. How can I efficiently modify this attribute to either true or false directly from the list of posts in index.html.erb using link_to or button_to helper along with remote: ...

javascriptruby-on-railsajaxruby-on-rails-4

Help with guiding and redirecting links

Here's the code snippet: <script> if(document.location.href.indexOf('https://thedomain.com/collections/all?sort_by=best-selling') > -1) { document.location.href = 'https://thedomain.com/pages/bestsellers'; } </script& ...

javascriptcssif-statementshopifyhttp-redirect

Break down the key:value objects into individual arrays

I'm currently working on an ionic project that involves handling an incoming array composed of key:value objects such as the one shown in the image below: https://i.stack.imgur.com/qrZiM.png My question is, can these values be separated into three d ...

angularjsangularionic-framework

Unexpected behavior observed when trying to smoothly scroll to internal links within a div, indicating a potential problem related to CSS dimensions and

Within a series of nested div containers, I have one with the CSS property overflow:hidden. My goal is to smoothly scroll to internal links within this specific div using jQuery. The snippet of code below has worked successfully in previous projects: ...

javascriptjquerycssscroll

Optimal Procedure for New Users Form (Jade / Angular) in HTML

I'm currently working on integrating a form into my app for users to create tasks. This form should only appear the first time a user attempts to create a task. As someone who is not very experienced with frontend development, I find myself wondering ...

htmlangularjsformspug

Receive notification of alert content when it is displayed

Having an HTML page with the following script: <Script> function Run() { alert("The Content Here"); return true; } </script> <button onclick="Run();">I Want It Now</button> If I were to open this page using firefox or Chrome, and ...

c#javascripthtmlvb.netwinforms

Emphasize a checkbox by selecting it when another checkbox is checked

I have a question about checkboxes and highlighting the checkmarks. The issue I am facing is that I have multiple checkboxes with the same ID for different screen resolutions. When I click on the label for "Check 1" it highlights the corresponding checkmar ...

javascripthtmlcss