Arranging Strings in Ascending/Descending Order Using the ng-grid Filter

Experimenting with Ascending and Descending sorting in Angular JS using Strings

Check out the Plunker The select box offers two choices: Ascending and Descending

If Ascending is selected, the grid should display values with Importance in the order of L-M-H, which represents Low-Medium-High. If Descending is chosen, it should be displayed as H-M-L.

I've posted similar questions before but I'm still unclear about sorting and filtering in Angular JS.

UPDATE

I've managed to sort the contents in the correct order for part of the solution.

Check out this Stack Question Here, I've included a dropdown for selection. The dropdown also has options for Ascending and Descending that I'm currently investigating.

javascriptangularjs

Answer №1

When integrating an external select like the one shown in your Plunker, there doesn't seem to be a straightforward method.

To handle sorting, a custom sorting function can be created and implemented:

var prioritySort = function(a, b){
    var priority = { L: 1, M: 2, H: 3 };
    if(priority[a] > priority[b]) return 1;
    if(priority[a] < priority[b]) return -1;
    return 0;
};

$scope.gridOptions = {
    data: 'myData',
    enableSorting: true,
    showFilter: true,
    columnDefs: [{ field: 'name', displayName: 'Name'},
    { field: 'age', displayName: 'Age' },
    { field: 'Importance', displayName: 'Importance', sortFn: prioritySort}]
};

Demo

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

How can I solve the issue of my link not triggering the click event?

I'm generating multiple links dynamically using jQuery's html function based on the JSON data that I receive. Each link has an ID "idxxxx" (where xxxx is the primary key). Below is the JavaScript code I am using: $(document).ready(function(){ ...

javascriptjquery

Three.js: It seems that THREE.WebGLRenderer detected the image is not a power of two, originally sized at 1600x900. It was resized to 102

As I dive into learning three.js, one of my goals is to incorporate a 16x9 photo into my scene. Below is the snippet of code where I add an Array of images to my scene: const material = new MeshBasicMaterial({ map: loader.load(images[i]), trans ...

javascriptthree.js

Validation issue with Reactive Forms not functioning as expected

My latest project involves a user signup component that I created from scratch import { Component } from '@angular/core'; import {UserManagementService} from '../user-management.service'; import {User} from "../user"; import {FormBuild ...

javascripthtmlangulartypescript

Is it possible to use ThreeJS to display text on a canvas and then use it as a texture on a

After spending the entire day searching for a way to dynamically generate 2D textures with text embedded in them, I have yet to find a suitable solution. My goal is to be able to update the text displayed on my WebGL page without having to rely on pre-made ...

javascripthtmlcanvaswebglthree.js

Verify the presence of an Object3D located at a designated distance from another Object3D within the three.js framework

How can I determine if an Object3D is located at a specific distance from another Object3D in three.js without knowing the second object? Using distanceTo(obj: Object3D) won't work in this case. What approach should I take to solve this? ...

javascriptthree.js3d

What is the best way to retrieve the input value from post.ejs?

app.js var express = require('express'); var bodyParser = require('body-parser'); var app = express(); var passport = require('passport'); var localStrategy = require('passport-local'); var axios = require("axi ...

javascripthtmlnode.js

Adding HTML and PHP script

Is there a way to efficiently add HTML content using PHP code to multiple files without having to individually edit each one? I have a responsive menu/navigation that requires frequent updates, and manually editing each file is cumbersome. I attempted usin ...

javascriptphpjqueryhtml

Dynamic content carousel

Exploring the world of jQuery for the first time and aiming to code logically, I am in the process of creating an upload site where users have the option to select "upload from computer" or "upload from URL". There are two links positioned above the conten ...

javascriptjquery

Converting document.querySelector into a user-friendly format with React hooks

Is there a way to convert the process of fetching an element using querySelector and adding a reference to a div using document.querySelector into something that can be done with React hooks? import ReactDOM from "react-dom"; import h337 fro ...

javascriptreactjsreact-hooks

How can I link JSON array data to a chart.js using the same canvas ID?

Here is the HTML Canvas code: <div> <canvas id="chartdiv" width="200" height="200"></canvas> </div> Below is the JSON data: [{ "SID": "1", "NAME": "niten", "FTEPERCENT": "71.29", "FTCPERCENT": "28.71" }, { ...

javascriptasp.netarraysjsonchart.js

The tooltip in Amcharts malfunctions when incorporating the DurationAxis

I've been grappling with getting tooltips to work in amCharts4 when using a DurationAxis(). It seems like there might be a bug, as the tooltips sometimes get stuck in the top left corner. Here's an example: https://jsfiddle.net/jamiegau/fpye3bkv ...

javascriptchartstooltipamcharts4

Set up the TempusDominus datetimepicker with the specific configuration provided by the Controller

Incorporating a tempusdominus datetimepicker along with a linked select aspect presents a challenge. After receiving a structure from the controller that comprises a Map>, where dates act as keys enabling the datetimepicker and each date contains an ass ...

javascriptjavajqueryajaxtempus-dominus-datetimepicker

Bump the version number and request a message for the commit

Recently diving into the world of Grunt, I've been experimenting with merging grunt-bump and grunt-prompt. My intention is to have users prompted for a commit message that will then be added to the commit. I looked to this article for guidance in str ...

javascriptnode.jsgitgruntjs

Retrieving data from Dojo's JsonRest and storing it as an object variable

After reading this post on Stack Overflow about how to Remove String from JSON, I am looking to populate a Dojo Selectbox with JSON Data. However, I am facing an issue where I need to modify the JSON Data before passing it to the dijit.form.select Box. Th ...

javascriptjsonrestdojo

Exploring the realms of object-oriented programming with JavaScript, jQuery, and AJAX

Here is the code snippet I am working with: var Foo = function(){ this._temp="uh"; }; Foo.prototype._handler=function(data, textStatus){ alert(this._temp); } Foo.prototype.run=function(){ $.ajax({ url: '....', succ ...

javascriptjqueryajaxoop

Issues arise with routing when specific route parameters are implemented

After setting a route parameter in my browser URL, I encountered errors with the routing of the public folder (which contains my CSS, JS, etc.). The app's structure is as follows: app | |-- public | └-- css | └-- profile.css | |-- ...

javascriptnode.jsexpress

Problem integrating multer with Express JS and Node JS

Click here to access the server.js file on GitHub Following a tutorial, I have implemented code accordingly. However, when working with an updated version of Express JS, errors are being thrown on the side of Express JS. Error C:\nodefiles&bso ...

javascriptnode.jsexpress

Discovering the Data Structures within the d3.js Illustrations by the Talented Mike Bostock

Wondering how to decipher the structure of JSONs in examples by Mike Bostock, like this one (after being transformed using d3): http://bl.ocks.org/mbostock/3886208 I aim to replicate it with my own fabricated array of JSON objects without relying on load ...

javascriptjsond3.js

Discover the secrets to replicating the mesmerizing horizontal scrolling menu akin to the

What is the most effective way to create a horizontal menu similar to the innovative Google picture menu? Could someone kindly share their knowledge and provide the code for achieving the same outcome? ...

javascripthtmlcssajax

Adjusting the page size in the material table to display all items

I am currently working with React and Material Table. Objective My goal is to provide the user with the option to set the pageSize to 'All' in order to display all rows in the material table. Steps Taken I utilized the useState hook to create ...

javascriptreactjsmaterial-ui