Preserve the autocomplete value in a SlickGrid cell

I am working with a slickgrid cell that has an autocompletion feature and a custom formatter. The cell value is a key field in a list of dynamically loading autocompletion options. These options are displayed as labels (e.g. 

Contract: ABCDEF-123, thick:10, width:210, City: Chicago
) and when one is selected, it appears in the corresponding input field. The issue arises because the formatter only recognizes the key (order_id) and not the label itself.

function contractFormatter(row, cell, value, columnDef, dataContext) {               
    var res = '';  
    var val = get_contract_list()[value] ? get_contract_list()[value]['label'] : '';
    res = '<span class="' + getSpanClass() + '" style="float: left;"></span>\n\
           '+ (val =='' ? '<span style="color:slategrey;">  Enter 3 symbols </span>' + val : val) + '';
    return res;
}

The get_contract_list function retrieves the entire list of contracts, which is quite large. As a result, the decision was made to make this list dynamic. Currently, the function is empty and it would be preferable to simply extract the selected label into the variable val.

Is there a solution to achieve this?

javascriptslickgrid

Answer â„–1

It's important to keep in mind that Formatters are synchronous and should return quickly in string format to avoid slowing down the grid. One workaround is to cache your list in a separate variable and reuse it instead of reloading it each time. If you need to load asynchronous content, look into using asyncPostRenderer (check out this Example).

To display associated keys as labels, I implemented something similar in my library. You can view an example here and see a live demo here. In my case, I use complexityLevelList to find the associated object and display its label in the formatter.

export class MyExample {
  complexityLevelList = [
    { value: 0, label: 'Very Simple' },
    { value: 1, label: 'Simple' },
    { value: 2, label: 'Straightforward' },
    { value: 3, label: 'Complex' },
    { value: 4, label: 'Very Complex' },
  ];

  prepareGrid() {
   this.columnDefinitions = [
    {
        id: 'complexity', name: 'Complexity', field: 'complexity', minWidth: 100,
        formatter: (_row, _cell, value) => this.complexityLevelList[value].label,
        filter: {
          model: Filters.multipleSelect,
          collection: this.complexityLevelList
        },
        editor: {
          model: Editors.singleSelect,
          collection: this.complexityLevelList,
          massUpdate: true
        },
      },
   ];
  }
}

Keep in mind that the Filters & Editors are specific to my library Slickgrid-Universal, but the concept applies to refactoring your code for optimal performance.

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

Encounters an undefined error when attempting to access a non-existent value within a nested object in Vue.js

I am currently facing an issue with accessing a nested object property. Here is the scenario: const data={a:'value1',b:{c:'null'}} When trying to access the 'c' property within object 'b', I am encountering a proble ...

javascriptvue.jsjavascript-objectsnested-objectjsobject

Unable to convert "images" to an ObjectId in the "Product" model at path "_id"

I encountered a unique problem with mongoose that I have been researching. While searching for solutions, I came across an interesting response on Stack Overflow related to a similar issue: what's Cast to ObjectId failed for value "ascendPrice" at pat ...

javascriptnode.jsreactjs

Are there any lodash functions available for removing an array that matches another array from the main array?

I currently have two arrays named available and selected, each containing certain values. I also have another array called finalAvailable where I want to include all items from the available array except those that are already present in the selected array ...

javascriptarraysjsonlodash

Is it possible for the JavaScript code to cease execution once the tab is closed?

I am working on a JavaScript code snippet that is designed to execute once a component finishes loading: function HelloThere() { React.useEffect(() => { setTimeout(() => { // code to make a server call to write data to DB ...

javascriptreactjs

Fetching real-time Twitter search feeds through dynamic AJAX requests

Previously, I successfully used JSON to retrieve hash tag feeds from Twitter and Facebook. However, currently the feeds are not updating dynamically, indicating a need for Ajax implementation. Unfortunately, my lack of knowledge in Ajax is hindering this ...

javascriptjqueryajaxjson

Having difficulty transferring data from a JSON file on a different domain to a variable using Ajax

As a beginner in Ajax, I am currently exploring the use of Ajax Cross domain functionality to fetch data. The Ajax function is triggered from test.php, which then calls stats.php to request the desired data. The content of Stats.php: <?php $data = ...

javascriptphpjqueryjsonajax

What is the best way to convert a scene or model to GLTF Format in Three.js?

Can I create a Web App with Meteor that exports the scene to GLTF format directly to the server? ...

javascriptmeteor3dthree.jsgltf

Retrieve information from a JSON file and send it as a parameter to a function within AngularJS

Currently, I am referring to this specific example. However, in my case, I am looking to retrieve data from a JSON file instead of utilizing local data. The scenario is: function store() { this.products = [ new product("APL", "Apple" ...

javascriptjsonangularjsrest

Tips for displaying a message when clicking on the second level in fancytree.js

I'm looking to use fancytree.js to display an alert message only when clicking on nodes in the second level. For example: <ul> <li>1</li> <ul> <li>1.1</li> ...

javascriptjqueryfancytree

Strange JSON.parse quirk observed in Node.js when dealing with double backslashes

My coworker encountered an issue while trying to parse a JSON string from another system, leading to unexpected behavior. To illustrate the problem, I have provided a simple code snippet below: // This code is designed for node versions 8 and above con ...

javascriptnode.jsjson

Maintaining User-Selected Options on Page Refresh: A Guide to Keeping Input Selections Consistent

I'm currently working on implementing local storage to save options data. The issue I'm facing is that whenever I select different options, like choosing "Action" under Genre, the selections reset to their original state when I refresh the page â ...

javascriptjqueryhtmllocal-storage

Differences between the http module and Express framework

After noticing this common pattern, I've become intrigued : const server = http.createServer(app); // Listen on provided port, on all network interfaces. server.listen(port); server.on('error', onError); server.on('listening', on ...

javascriptnode.jsexpress

jqgrid's date restriction is set to November 30th, 1999 at midnight

I have a table displaying DATETIME values. However, after editing the datetime value, it always changes to "1999-11-30 00:00:00", both in jqgrid and the database, regardless of the date entered. [Tue Mar 12 11:39:28 2013] [error] [client 171.43.1.4] PHP N ...

phpjavascriptjqueryjqgrid

Guidelines for providing the image file path in an external JavaScript file for creating a Flask API

I am looking to modify the attribute value in the index.html file from an external JavaScript file that is linked to the HTML file. The structure of my folders is as follows: folder structure When I try to specify the path from the HTML file using: {{url ...

javascripthtmlajaxflask

Guide: How can I change to <br/> using JavaScript?

function replaceAllSymbols(find, replace, str) { //find=\n replace=<br/> //str=tyyrtu\nuiop\nuioui try { while (str.indexOf(find) > -1) { str = str.replace(find, replace); ...

javascript

What is the purpose of creating redirects instead of just "processing" data?

Upon pressing the subscribe button, a form is submitted. Previously, I used axios. The POST request is sent to https://api.skymongoose.com/subscription. Why does it redirect to a blank page even though the URL points to https://api.skymongoose.com/subscri ...

javascripthtmlajaxformsaxios

The context in which the state was passed resulted in an undefined outcome

I am facing an issue with my context setup. I have implemented it and it functions correctly when I pass a string as a property to the state. However, I want to use a prop as the state. Here is what works: export class DataProvider extends Component { ...

javascriptreactjs

Tips for converting JSON values to float in JavaScript

Below is an example of a JavaScript object along with some code: buildingJson: { name: "build", height: 40 } var val = parseFloat(buildingJson.height).toFixed(2); buildingJson.height = val; console.log(typeof buildingJson.height); Despite the va ...

javascriptjson

Maintaining String Integrity in JQuery when Adding Elements to the DOM

I am currently working on dynamically adding elements to the DOM in order to display a list of search results. Here is a snippet of the code I am using: for(var i=0; i<length; i++){ console.log(temp[i].CATEGORY); console.log(temp[i].SUBCATEGORY ...

javascriptjquery

Issues with OrbitControls in THREE.js are preventing proper functionality

After setting up my JavaScript code to utilize Three.js OrbitControls, I thought I had everything in place: <script>"OrbitControls.js"></script> As well as: var cameraControls; cameraControls = new THREE.OrbitControls(camera, renderer.dom ...

javascriptanimationthree.jsrotationorbit.js