Angular UI-Grid not resetting scroll after reusing grid, causing infinite scroll functionality to fail

I've been working with the UI-Grid plugin in Angular, found at , to display data. However, I've come across a couple of issues that I'm having trouble solving.

My search form includes parameters that fetch results from a database and populate the grid. After performing a search, viewing the data, and scrolling, if I do another search, the existing data is wiped out and replaced with new data on the same grid. This has led me to notice two specific problems:

1) Following a second database search, the scroll position isn't reset to the top, and without utilizing a new directive like cellNav for scrollTo functionality, I'm unsure how to address this issue.

2) Additionally, it appears that infinite scrolling stops functioning properly after conducting a new search.

It seems like refreshing the grid should resolve these problems, but I can't seem to find a way to achieve this. Any suggestions would be greatly appreciated.

javascriptangularjsgrid

Answer №1

After some exploration, I stumbled upon a resolution...

I opt to recreate the DOM element each time. Initially, I eliminate the element - with diligence in destroying the isolate scope to circumvent any directive watcher null point exceptions.

if(document.getElementById('searchGrid')) {
    $scope.element = angular.element(document.getElementById('searchGrid'));
    var isolate = $scope.element.isolateScope();
    isolate.$destroy();
    if($scope.element) $scope.element.remove();
  }

Subsequently, forge your element and utilize $compile for conversion into an Angular element, enabling the creation of directives:

var newDirective = angular.element('<div id="searchGrid" ui-grid=\"gridOptions\" ui-grid-infinite-scroll ui-grid-auto-resize ui-grid-move-columns ui-grid-resize-column ng-style=\"{ \'height\' : height }\" ng-show=\"gridLoaded &amp;&& !gridLoading\"></div>');
var element = angular.element(document.getElementById('myGrid'));
element.append(newDirective);
$compile(newDirective)($scope);

It should be noted that myGrid is essentially an empty div for accommodating the searchGrid div.

The solution may not be the most elegant one - ideally, UI-GRID would have a mechanism in place to clean up a grid for reusability. Nonetheless, it gets the job done.

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

An effective method for verifying information in MongoDB and generating new records if they are not already present

Is there an efficient way in MongoDB to search for the presence of new data, such as a phone number, and insert it into another collection if it does not already exist? For example, searching whether the phone numbers [123456789, 15, 20] associated with ...

javascriptmongodbmongodb-queryaggregation-framework

PHP error: User data failed to be transmitted

I'm currently working on a website for capturing still photos of students. However, I'm facing an issue when trying to transfer the collected data and upload the picture with the corresponding "ID" provided in the prompt. For some reason, the dat ...

javascriptphp

SEO Friendly URL for JQuery Tabbed Content

I have developed a jQuery powered tabbed content system, where clicking on a tab changes the content below. However, I am facing an SEO issue. The SEO specialist has advised me to make it more SEO-friendly by adding different URLs to each tab. Can anyone ...

javascriptjqueryhtmlcss

Embracing the Unknown: Exploring Wildcard Values

I have a code snippet below that has a wildcard * in it. I'm looking for suggestions on how to make the * accept any number. Any thoughts on this? $('body').on('click', '.custom_295_*-row', function(){ var href = "htt ...

javascriptjquerywildcard

TypeScript error: Unable to locate namespace 'ng'

I am attempting to utilize a tsconfig.json file in order to avoid having /// <reference tags at the beginning of multiple files. However, I keep encountering this error: [ts] Cannot find namespace 'ng'. any Here is my configuration within ...

javascriptangularjstypescripttypescript-typings

I am eager to retrieve intricate JSON data with the help of AngularJS

Hey there, I'm currently struggling to implement a third level select option and can't seem to retrieve data from JSON. Could someone please assist me or point out where I might be going wrong? var app = angular.module('myApp', []); ...

angularjsjson

Utilizing React JS to assign various state values from a dropdown menu selection

In my project, I have implemented a dropdown list populated from an array of values. This dropdown is linked to a handleSelect function. const handleSelect = (e) => { handleShow() setCommunityName(e) } <DropdownButton id="dropdown-basi ...

javascriptreactjs

Convert a string in JavaScript by replacing spaces with '+' and use it as a link for a Google Search

I need to create a link to search Google with a specific text. To do this, I have to replace the spaces in the text with '+' and include it in the href attribute. Here is how it can be done in HTML: <a href="#" id="afd_gsearch">Search Goo ...

javascriptreplace

Unfolding the potential of variables in JSON.stringify with Node.js

I am currently developing a node.js API for my app, which includes a simple TCP server that accepts NDJSON (newline delimited JSON). However, I have encountered an issue with the JSON stringify method. The problem arises when I attempt to expand all variab ...

javascriptjsonnode.js

Monitoring vuex mutations and actions within a component: A step-by-step guide

Is there a way to detect and react whenever events occur across the page, such as animations starting or finishing, requests firing or failing? I want a component to be able to respond to these occurrences. It's simple to watch a getter by importing ...

javascriptvue.jsvuex

The switch/case function I implemented is functioning correctly, however, an error is being displayed in the console stating "Cannot read property 'name' of null"

Check out the live codepen demo here After selecting "elephant" from the third dropdown, the console.log(brand.name) displays "elephant" as expected and executes the rest of the switch statement successfully. However, there seems to be a console error oc ...

javascriptangularjs

Using Javascript to save a numeric value and accessing it on a different webpage

I'm encountering an issue with a specific feature on my website. I want users to click on a hyperlink that will redirect them to an application form page. The challenge is ensuring that the reference number (a 5-digit code displayed as a header) is st ...

javascripthtml

ui-router: Issues with utilizing the <ui-view> element within a bespoke directive

In my current project, I am utilizing version 0.3.1 of ui-router. Within my custom directive, there is a <ui-view></ui-view> tag present. <div > <button type="button" class="btn btn-primary btn-circle btn-lg pull-left" ui-sref="u ...

javascriptangularjsangularjs-directiveangular-ui-router

What is the best way to check for a matching array value in my menu list and apply a corresponding class tag to it?

I need a way to dynamically add a class to tags that match specific array values. My menu list consists of 150 items, and I want to add a class to the tag whose text matches an element in the array. <ul class="nav main" id="tabs"&g ...

javascripthtmljquery

What is the reason for being unable to remove the event listener from a sibling element?

function show1() { console.log("ok1"); document.getElementById("a2").removeEventListener("click", delegate); } function show2() { console.log("ok2"); } function show3() { console.log("ok3"); } function delegate(event) { var flag = event.target ...

javascripthtmlevent-listener

Swap out AJAX following a successful retrieval and when managing errors

I currently have a basic AJAX load function set up to load a specific URL: <div id="load"> <h1 id="status">Loading...</h1> </div> <script type="text/javascript"> $(document).ready(function(){ $.ajaxSetup({cache: false}); var ...

javascriptajax

Effortlessly Concealing Numerous Elements with a Single Click in Pure JavaScript

I have successfully created an HTML accordion, but I am facing an issue. I want to implement a functionality where clicking on one accordion button will expand its content while hiding all other accordion contents. For example, if I click on accordion one ...

javascripthtml

Design a JavaScript Image Showcase with Background Images

Struggling to create a full-page gallery that allows for vertical scrolling through one image at a time. I've attempted different options but can't seem to crack it. Here is a snippet of my code: <style> #img1 { background-image: url("&l ...

javascriptjquerycssimagegallery

Refresh the span when the mouse button is released

I have a span and select in my view Here is the code snippet: <li> <select name="search[adults]" id="search_adults" class="custom" style="display: none;"> <option selected="selected" value="1">1 adult</option> <option ...

javascriptjqueryhtmljquery-uiselect

What is the best way to create a fluid-like moving 2D morphing circle using three.js?

I have a circular mesh that I want to animate similar to the example shown in this link from the two.js 2D library: Currently, I've been studying this example and positioning the camera above the shape, but I believe there must be a simpler way to a ...

javascriptthree.jswebglmorphing