Issue with ng-grid in AngularJS: Data does not appear after resizing columns

Currently, I am encountering a problem where ng-grid data is not being displayed when column resizing occurs after changing the column names.

To demonstrate this issue, I have created a plunkr at - http://plnkr.co/edit/eV9baoDOV9A46FZmKW8G?p=preview

I would like to draw your attention to the function in main.js that explicitly changes the column names and their corresponding data.

$scope.reload = function(){
  $scope.columnDefinitions = [
      {field: 'first_col'},
      {field: 'second_col'}
    ];

  $scope.myData = [{first_col: "colData1", second_col: "colData2"},
                  {first_col: "colData3", second_col: "colData4"},
                  {first_col: "colData5", second_col: "colData6"}
                ];  
}

Here are the steps followed -

Scenario 1 (Functional).

  1. After the complete loading of the example along with ng-grid data, click on the "change" button.
  2. Upon clicking, the "name" and "age" columns will be replaced by "first_col" and "second_col" along with their respective data.

Scenario 2 (Issue)

  1. Rerun the example.
  2. Once all data from ng-grid has loaded, resize the columns slightly.
  3. After resizing, click the "change" button again.
  4. As a result, the grid appears empty.

I am currently stuck with this problem. Any assistance or guidance provided will be greatly appreciated.

javascriptangularjsng-grid

Answer №1

It appears that the column width is not being recognized when the change button is clicked. To solve this issue, you can manually specify it like so:

{field: 'first_col', width: 200},
{field: 'second_col', width: 200}

According to the ng-grid documentation:

Column widths can be defined in percentages (20%, 30%), weighted *s, or "auto" (which adapts the size based on data length) (similar to WPF/Silverlight)/ note: "auto" currently only works in single page apps because resizing occurs on "document.ready". Work is being done to improve this..

This suggests that if the default setting is "auto," it may be causing the issue. Using "auto" or any %-based width values could result in an error. I recommend implementing a workaround for now.

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

Issue with React submit button for posting data is not functioning as intended

My dilemma lies within a Modal component containing a Form and Button. The goal is to trigger a POST request (managed in a separate file) upon the user clicking the button, which will run a simulation using the validated input values. Surprisingly, the onC ...

javascriptreactjsrestreact-bootstrapflux

Tips for simulating mouse events in Jasmine tests for Angular 2 or 4

New to Jasmine testing, I'm exploring how to test a directive that handles mouse events such as mouse down, up, and move. My main query is regarding passing mouse coordinates from the Jasmine spec to my directive in order to simulate the mouse events ...

javascriptangularunit-testingjasmine

Utilizing ThemeProvider in a Different Component in React

In my App.js file, I have a function that toggles between light and dark mode themes: import { createTheme, ThemeProvider } from '@mui/material/styles' import Button from '@mui/material/Button' import Header from './components/Head ...

javascriptreactjsmaterial-ui

How can I showcase the index of `<tr>` and `<td>` elements in a dynamically generated table

How can I print the index of table rows and data on click in javascript? <html> <head> <title>Table Creation</title> <script language="javascript" type="text/javascript"> function createTable() { ...

javascripthtmlcss

Tips for creating a two-tier selection filter system

I'm having an issue with this code. My objective is to create two filters for this table. The select element with id="myInput" should determine which rows appear in the table and apply the first filter. Here is the JavaScript code: function myFunctio ...

javascripthtml

What steps can be taken to resolve the error message "t.onSubmit is not a function" that occurs upon form submission?

Upon submitting a form, it should trigger the onSubmit method function. However, an error is being returned instead: TypeError: "t.onSubmit is not a function". I've attempted to address this issue by researching similar problems and solutions provide ...

javascriptvue.js

Upon utilizing AngularFire, the $createUserWithEmailAndPassword function successfully creates a new user; however, it fails to return a promise

Recently, I've been in the process of transitioning an existing project to Firebase 3/AngularFire 2 from a previous Firebase.com setup. This is my first time working with these technologies. My query revolves around using the $createUserWithEmailAndP ...

angularjsionic-frameworkfirebaseangularfirefirebase-authentication

Telerik Nested perspective

Here is the code snippet that I am currently working on, which involves a nested grid from Telerik: I've encountered an issue with using JavaScript to locate and interact with controls named "PreviousDate" and "DateofBirth". <%@ Page Language="c# ...

javascriptasp.nettelerik

Ways to show text on a donut chart when hovering with the mouse

I have been attempting to make adjustments to this sample. My goal is to display a word in the center of the donut chart upon mouseover, similar to this: https://i.sstatic.net/dCPKP.png Although I have included code for mouseover, it seems to not be func ...

javascriptd3.js

Find the total duration of all items within an array by utilizing the Moment.js library

Within an array of objects, each object contains a field named "duration" that represents a string. Here is an example of one such object: { id: 14070 project: {id: 87, name: "Test project for time tracking"} issue: {id: 10940} user: {id ...

javascripttypescriptmomentjs

Exploring the concept of passing 'this' as a parameter in JavaScript

<button type="button" aria-haspopup="dialog" aria-controls="b" onclick="openLayer($('#b'))"> button</button> <div role="dialog" id="b"><"button type="button">close<"/button></div> function openLayer(target){ ...

javascriptjqueryparameters

SyntaxError: Unexpected symbol

I have an issue with the following code: let op = data.map(({usp-custom-90})=> usp-custom-90 ) When I run it, I encounter the following error: Uncaught SyntaxError: Unexpected token - I attempted to fix it by replacing the dash with –, but t ...

javascriptjquery

Issue arising with data exchange between components using data service in Angular 5

Utilizing data service to share information between components has presented a challenge for me. References: Angular: Updating UI from child component to parent component Methods for Sharing Data Between Angular Components Despite attempting the logic o ...

javascriptasp.netasp.net-mvcangulartypescript

Angular 7 offers seamless synchronization for horizontal scrolling in a unique way

Can anyone provide guidance on how to achieve synchronized horizontal scrolling in an Angular project? I found a solution at the following link, but it uses jQuery code. Synchronized scrolling using jQuery? ...

javascriptangular

What is the most efficient way to navigate through routes using Angular's stateprovider?

Here, I am attempting to set the path using the following code. However, I am having trouble capturing the URL in formats such as: warranty warranty/1234 State: $stateProvider.state('warrantyid',{ url:'/warranty/:id', ...

angularjsstateangular-ui-router

Activate a monitoring pixel with a click of your mouse

I have a tracking pixel that is typically placed in the body of a "installation success" page: <img src="http://domain.com/adclick.php" width="1" height="1" border="0" /> However, I want to trigger this pixel when someone clicks on a download butto ...

phpjavascripthtml

How can I dive into a nested array to access the properties of an object within?

My array, called sportPromise, is structured like this: 0: Array[0] 1: Array[1] 2: Array[2] 3: Array[3] When I run console.log(angular.toJson($scope.sportPromise, 'pretty'));, the output looks like this: [ [], [ { "id": 5932, ...

javascriptarraysangularjslodash

Using Mongoose to Perform Lookup with an Array as a Foreign Key

In my database, I have a collection called questions which contains fields like _id, name, and more. Additionally, there is another collection named tests with fields such as _id, name, and an array of questions. My goal is to retrieve all the questions a ...

javascriptnode.jsmongodbexpressmongoose

AngularJS view is not refreshing

I am facing an issue with updating a view via a controller that fetches data from a service. Despite changing the data in the service, the view does not reflect these updates. I have created a simplified example from my application, which can be found here ...

javascriptangularjsviewangularjs-scope

What could be causing the issue with my validation for alphabetical input?

I am currently working on a registration form that only accepts alphabetical input. However, I am facing an issue where my error message appears regardless of whether I input an alphabetical or special character. According to my understanding, the code sho ...

javascripthtmlvalidation