Creating a grid UI in AngularJS using Typescript: utilizing functions as column values

I am working on an AngularJS app that includes the following UI grid:

this.resultGrid = {
    enableRowSelection: true,
    enableRowHeaderSelection: false,
    enableHorizontalScrollbar: 0,
    enableSorting: true,
    columnDefs: [
        { name: 'Id', field: 'id' },
        { name: 'Name', field: 'name' },
        { name: 'Street', field: 'street' },
        { name: 'Postcode', field: 'postcode' },
        { name: 'City', field: 'city' },
        { name: 'Country', field: 'country' },
        { name: 'In System', field: 'inSys()' }
    ],
    data: [{ city: "Warsaw", country: "Poland", id: "123456789", name: "Company 1", postcode: "00-122", street: "Waszyngtona", inSys: this.inSys(id); }, //compilation error - cannot find name "id"
{ city: "London", country: "UK", id: "987654321", name: "Company 2", street: "Downtown" }]
};

Furthermore, I have a function that I need to call within this controller:

inSys = (id: string) => {
    if (id== null || id.length == 0)
        return false;

    return this.myService.recordExistsInSys(id);
}

I have been unable to find any examples of how to pass a function as a ui-grid column value in TypeScript. Do you have any ideas on how to handle this?

javascriptangularjstypescript

Answer №1

Dealing with a similar issue, I found a solution that worked for me:

this.resultGrid = {
    enableRowSelection: true,
    enableRowHeaderSelection: false,
    enableHorizontalScrollbar: 0,
    enableSorting: true,
    context: {
          inSys: (row) => {
              /*add logic here*/
    }
    columnDefs: [
        { name: 'Id', field: 'id' },
        { name: 'Name', field: 'name' },
        { name: 'Street', field: 'street' },
        { name: 'Postcode', field: 'postcode' },
        { name: 'City', field: 'city' },
        { name: 'Country', field: 'country' },
        { name: 'In System', field: 'context.inSys(MODEL_COL_FIELD)' }
    ],
    data: [{ city: "Warsaw", country: "Poland", id: "123456789", name: "Company 1", postcode: "00-122", street: "Waszyngtona", inSys: this.inSys(id); }, //compilation error - cannot find name "id"
{ city: "London", country: "UK", id: "987654321", name: "Company 2", street: "Downtown" }]
};

I haven't tested your code but you might find this helpful.

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

Using NodeJS and ExpressJS to send the HTTP request response back to the client

After creating a website using Angular 2 and setting up node.js as the backend, I successfully established communication between the Angular client and the node.js server. From there, I managed to forward requests to another application via HTTP. My curren ...

javascriptnode.jsexpress

Display an HTML icon within a label in an md-tab that uses ng-repeat when selected

I am currently using AngularJS material functionality in my code: <md-tab md-on-select="something" label="{{subsetKey}} ({{subset.data ? subset.data.length : 0;}}) <i class='example icon class'></i>" ng-repeat="(subsetKey, subset) ...

angularjsjsonangular-materialmaterial-design

Setting response character encoding in Node.js/Express - how is it done?

Assume I have the following code: app.get('/json', function(req, res) { res.set({ 'content-type': 'application/json' }).send('{"status": "0"}'); }); I've been attempting to send the response as ...

javascriptnode.jsexpress

Tips for creating fonts that adjust depending on the length of characters

Is there a way to adjust the font size of a paragraph based on the space available in its containing div, depending on the length of characters? For instance: p{ font-size:15px; } <div class="caption"> <p>Lorem ipsum dolor sit amet, consect ...

javascriptjqueryhtmlcss

Is there a way to attach an event listener to a span that was inserted using DTColumnBuilder?

I am attempting to include an onclick event for a span element that is generated by DTColumnBuilder. DTColumnBuilder .newColumn('Invoice') .withTitle('<span class="li-table-head ...

javascriptangular

`sendNodejs header not being transmitted during connection``

My nodejs application utilizes stomp to connect to a server using websockets. However, I am encountering an issue where the application is failing to send the headers that I have specified. Despite referring to clear documentation and examples on how to in ...

javascriptnode.jswebsocketstomp

Modify the appearance of an element within an array upon selection by comparing it with a separate array

In my code, there is an array called tagList that contains a list of objects. When one of these objects is clicked on, it gets added to another array named selectedTags. var selectedTags = []; export default class RegisterTags extends Component { con ...

javascriptarraysreactjsreact-native

Tips on displaying information following the parsing of JSON

Trying to retrieve a list of users using this code snippet <div id="users" data-users='[{"name":"one","userName":"user_one"}, {"name":"two","userName":"user_two&q ...

javascriptjson

Is there a way to display a Google Map marker after a certain amount of time without needing to refresh the

Is it possible to update Google Map markers without refreshing the map itself every 30 seconds? The markers' latitudes and longitudes are retrieved from a database. Once obtained, these markers are then allocated onto the Google Map. However, the i ...

javascriptphpgoogle-maps-api-3

Add hyphens to separate the words in AngularJS if there is a break in the string

Within a div of set width, a string is being bound to it. This string could be short or long. I would like for the string to break with a hyphen inserted on each line except for the last one. For example: If the string is "misconception" and it breaks at ...

javascriptjqueryhtmlcssangularjs

Steps to position images and text side by side in a grid layout

Trying to create a grid layout with profile images and text aligned next to each other, but struggling with CSS. If anyone could provide some guidance, that would be greatly appreciated! Here is the HTML code snippet: <div class="col-sm-3" ...

javascripthtmlcssvue.jsvuejs2

Is there a way to trigger $q notify without initiating a $digest cycle?

Within my application, the $digest cycle typically takes around 5ms to complete. I heavily utilize $q.defer with deferred.notify throughout my codebase, but I've encountered an issue. Each time deferred.notify is triggered, it schedules a new digest c ...

javascriptangularjsangular-promiseangularjs-digest

Creating assets from typescript plugins in Angular 6: A comprehensive guide

Situation I am currently in the process of migrating from Angular 4 and Angular Seed to Angular 6 and Angular CLI. Challenge One issue I am facing is with dynamic loading of plugins within a component using SystemJS. SystemJS.import("client/plugins/" + ...

angulartypescriptangular-cli

What is the best way to eliminate "?" from the URL while transferring data through the link component in next.js?

One method I am utilizing to pass data through link components looks like this: <div> {data.map((myData) => ( <h2> <Link href={{ pathname: `/${myData.title}`, query: { ...

javascriptreactjsnext.js

SignalR blocking axios requests (In a Waiting State)

I am currently developing a project that involves bidding on products in Auctions with real-time updates of the bid price. With potentially thousands or even millions of users worldwide participating in the bidding process. We have implemented SignalR for ...

javascriptreactjsasp.net-core-signalr

Retrieve libraries from package-lock.json file

I am tasked with extracting all the libraries and versions from the package-lock.json file. Let me provide some context. I am implementing a security module within Jenkins to create an inventory of libraries used in each application. The goal is to gather ...

javascriptnode.jssecuritynpmlibraries

Node.js - Hitting maximum call stack size limit despite using process.nextTick()

I am currently developing a module for creating "chainable" validation in Express.js: const validatePost = (req, res, next) => { validator.validate(req.body) .expect('name.first') .present('This parameter is required') ...

javascriptnode.jsvalidationecmascript-6

Using jQuery on the client-side to interact with a MongoDB database

Currently, I'm in the process of developing a basic example application to gain experience with using MongoDB. My goal is to create a single web page that can interact with a local MongoDB server by adding and removing content dynamically through jQue ...

javascriptjquerymongodb

Is it possible to utilize Typescript and Browserify in tandem?

As I explore the compatibility of TypeScript and Browserify, one perplexing aspect stands out - they both utilize 'require' but for different purposes. TypeScript uses 'require' to import other TS modules, while Browserify employs it to ...

typescriptbrowserifycommonjs

Trouble with modifying style in Google Chrome and Internet Explorer prior to AJAX request

When utilizing AJAX, I have a common practice of setting up a loading indicator before each request to inform the user about the short wait. Usually, this is achieved by adding an animated loading gif. Interestingly, when performing this action in Firefox, ...

javascriptjqueryajax