Tips and tricks for AngularJS UI Grid: Filtering currency to display values in the format of $0

Currently, I am utilizing AngularJS UI-Grid for filtering pricing data. The issue I am facing is that the filtering works perfectly fine for numbers with a non-zero digit after the decimal point.

$scope.GridOptions = {
            enableFiltering: true,
            rowEditWaitInterval: -1,
            multiSelect: true,
            enableColumnMenus: false,
            columnDefs: [
                { name: 'Name', field: 'Item', width: '15%' },
                { name: 'Price', field: 'Price', type: 'number', cellFilter: 'currency', width: '6%' },
                { name: 'Current Price', field: 'CurrentPrice', type: 'number', cellFilter: 'number: 2', width: '12%' }
            ]

View example with 2 digits after the decimal, View example with 0 digits after the decimal

javascriptangularjsangular-ui-grid

Answer №1

Referencing the documentation at , make sure to change the field type to 'numberstr' for the cell's 'type' attribute.

Answer №2

It took some effort, but I finally found a solution to create an attractive currency column. Hopefully, this method will become easier to implement in the future. The following steps worked well for me:

In JavaScript, include cellFilter:number:2 and cellClass:'currency' in the column definition:

myGrid.columnDefs = [{
    field: "Sale",
    cellFilter: 'number:2',
    cellClass:'currency'
}]

In CSS, add the following style definitions to your stylesheet:

.currency{
    text-align:right;
}
.currency .ui-grid-cell-contents:before{
    content: '$';
    float: left;
}

Here is the final result:

https://i.sstatic.net/aB8UQ.png

For more details, check out my original answer here.

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

A guide on deploying a Next.js application using Passenger

I'm completely new to development and I'm attempting to deploy my very first application (let's call it testing). I am looking to deploy my Next.js React app using Passenger (which is included and required by Dreamhost, so I have not insta ...

javascriptnode.jsnext.jspassenger

Utilizing JavaScript in Selenium WebDriver, what's the procedure for extracting element information from a script tag?

I'm facing an issue with this particular page There is a canvas element on this page that displays changing numbers whenever the page is refreshed or reloaded. Looking at the source code, I can only find the following: <div class="row"> ...

javascriptjavaseleniumautomationwebdriver

The dimensions of the sprites within Three.js geometry

I am interested in creating an animation of sprites moving along a figure, particularly sprites that walk along the figure. An example of what I envision can be seen here: http://armsglobe.chromeexperiments.com/ I found some helpful information related t ...

javascriptanimationthree.jsparticles

AngularJS fetches the 'compiled HTML'

If I have this angularjs DOM structure <div ng-init="isRed = true" ng-class="{'red': isRed == true, 'black': isRed == false}"> ... content </div> How can I obtain the 'compiled' version of this on a cl ...

javascripthtmlcssangularjs

Table cell featuring a status menu created with Material UI DataGrid

I'm looking to include a column called "Filled Status." Although I've checked the documentation, I can't quite figure out how to do it. It seems like I may need to use renderCell when setting up the column, but I'm not sure how to make ...

javascriptnode.jsreactjsmaterial-uijsx

Guide to deploying a React application using Material-UI and react-router

I've successfully built an application using React, Material-UI, and react-router. Below is the content of my complete package.json: { "name": "trader-ui", "version": "0.1.0", "private": true, "dependencies": { "@material-ui/core": "^3.2. ...

javascriptreactjsreact-routermaterial-ui

Node.js file successfully establishes a database connection, but script tags fail to do so

Having some trouble connecting to my MongoDB database (or MongoLab server). It works perfectly fine when the code is in the name.js file, but for some reason it fails when placed inside <script> tags within an HTML file. My folder contains only thes ...

javascripthtmlnode.jsmongodbmlab

After I designed a single modal for all buttons, I encountered an infinite loop error

I'm facing an issue with my buttons and modal functionality. I have three buttons with different content, each linked to a modal that should display the corresponding data upon click. However, after reloading the page, I encounter an infinite loop in ...

javascriptreactjs

Customize your smartphone wallpaper with React Native

As a newcomer to React, I've successfully uploaded an image from my local phone gallery and stored its URI in a global variable. However, I'm struggling to figure out how to set this image as my phone's background image (not within React its ...

javascriptreactjsreact-nativeexpobackground-image

Is it possible to prevent users from clearing data in an Android application when using Ionic framework?

Currently, I am developing an app using the Ionic framework. The data is being stored on the mobile device via SQLite, but there is a concern that users can easily clear this data by clicking on the "clear data" button in the application info settings. The ...

androidangularjsionic-framework

extract specific data from JSON using JavaScript

Dealing with JSON data can be tricky, especially when working with multiple sets of information to choose from. When I inspect the data in my JavaScript code using console.log(contacts.data["all"]);, I can see the returned objects clearly. Here's a ...

javascriptjson

Adjusting the format of a JavaScript object

Looking at the object below: {A: 52, B: 33} I want to transform it into this format: ["A", 52], ["B", 33] Any recommendations on how to achieve this conversion? ...

javascriptjqueryjson

Leveraging Angular2 within Angularjs framework

Can Angular2 be integrated with AngularJS? For instance, is there a way to have a button in an AngularJS application that, when clicked, shows an Angular2 form? What would be the best approach for this scenario? Would it be better to host them on separat ...

angularjsangularangular2-forms

Immediately set the width attribute of an HTML element using JavaScript

Can an element's width be dynamically set using the following code: <img id="backgroundImg" src="images/background.png" alt="" width="javascript:getScreenSize()['width']+px" height="1100px"/> In this code, getScreenSize() is a JavaSc ...

javascripthtmlcss

Utilizing variables in Angular service to make API calls

Currently, I am working on accessing the Google Books API. Initially, I was able to directly access it in my controller but now I want to follow best practices by moving the business logic into a directive. HTML <form ng-submit="search(data)"> < ...

javascriptangularjsapi

Issue with React component not updating when the "Date" value in its state is changed

Disclaimer: I am currently working with React using Typescript. I have a particular component that, upon mounting, initializes state with a date like this: constructor(props: SomeProps) { super(props); const fromDate = new Date(); fromDat ...

javascriptreactjstypescript

What is the process behind Express and React Routes when the browser sends an initial GET request?

Embarking on my journey into the realm of React and full-stack development, I find myself in need of guidance on a particular issue that has been eluding me. In my quest to create an app using React and Express, authentication plays a crucial role. My pla ...

javascriptnode.jsreactjsexpressreact-router

JQuery drag and drop functionality experiencing issues in Chrome Browser specifically when integrated into a Joomla Article

I recently embedded a jQuery drag and drop example into my Joomla article. Surprisingly, it works perfectly fine on Firefox browser but encounters issues on Chrome. Although the drag and drop functionality works on Chrome, the problem is that the buttons b ...

javascriptjqueryhtml

How can I disable a select element in Laravel 5?

Hey everyone! Currently using Laravel 5 and trying to style the "select" class as "selectpicker". I'm facing an issue where I want to disable or hide the selected option when clicked, as I'm creating a div with the option's content right b ...

javascriptjquerycsslaravelbootstrap-4

In my React JS project, I am using an <Add /> component on two distinct pages. However, I am encountering an issue where only one of the pages is correctly receiving the add count prop

I could use some assistance in understanding why the logic for my counter button is not functioning properly on one specific instance. My aim is to have the count displayed by the counter look like this: https://i.sstatic.net/VdJ8o.png In order to add it ...

javascriptreactjsreact-propsreact-component