CODEWITHSUNDEEP
javascriptslickgrid
Danatela
Danatela

Reputation: 349

Save slickgrid cell autocomplete value

I have a slickgrid cell with an autocompletion and a custom formatter. The cell value is a key field of dynamically loading autocompletion list. The list is shown as labels (e.g. Contract: ABCDEF-123, thick:10, width:210, City: Chicago) and when I select one it appears in the according input field. The point is that the formatter does not know that label, it only knows the key (order_id).

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 function get_contract_list returns the whole list of contracts and it is very big, so it was decided to make that list dynamic. So the function is empty now and it would be nice just to take the selected label into val.

Is there any way to achieve it?

Upvotes: 0

Views: 37

Answers (1)

ghiscoding
ghiscoding

Reputation: 13214

You have to remember that Formatters are synchronous and it must return right away in a string format, if it requires a lot of processing power while staying synchronous then you'll end up slowing down your grid. You should probably cache your list once in a separate variable and use it afterward instead of reloading the list every time. If you load something that takes time and is asynchronous (a delayed output) then you'll want to look up the asyncPostRenderer (you can see this Example)

So going back to displaying the associated key to a label, I've done something similar in my lib in this Example and a live demo here, in my use case the value is a key index and I use the complexityLevelList to find its associated object which I can then read its label to display 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
        },
      },
   ];
  }
}

Note that the Filters & Editors are specific to my lib Slickgrid-Universal, but you should get the idea on how to refactor your code to make it work.

Upvotes: 1

Related Questions