Autocomplete with primitive value and computed label

[zewa666]

Hey there @ghiscoding. So these are actually two questions at once.

I'm currently trying out to create a custom backend for Supabase since the query assembly should be hopefully straight forward with the chainable builder approach.

now I have table items with a field called owner_id which is a sequential number which in turn is a foreign key to the id col of the user table.

In order to show the name instead of the owner_id I'd have to make the col an object with key/value pair and set dataKey and labelKey but there is no other way to keep it as number and still have the name rendered right? If not, my approach for that would be a custom formatter which gets the id plus a lookup table passed in and returns the labelKey.

The other question is whether the label can be actually an expression or template to render e.g. "{{firstName}} {{lastName}}. Again in a custom formatter this should be doable but I wanted to check back whether something like this already exists.

[ghiscoding]

hello, the Autocomplete lib that I use since removing jQuery/jQueryUI is this lib kraaden autocomplete, it usually works with pair only but there is also the render method you can use to change the default display, for that it's better to consult both the 3rd party lib docs and Angular-Slickgrid Autocomplete Wiki to see how to use external methods, for example this doc section shows how to modify the render.

In order to show the name instead of the owner_id I'd have to make the col an object with key/value pair and set dataKey and labelKey but there is no other way to keep it as number and still have the name rendered right? If not, my approach for that would be a custom formatter which gets the id plus a lookup table passed in and returns the labelKey.

yeah the best would be to save it as an object and then use a custom formatter OR you could also use the Formatters.complex and then use the labelKey and dataKey and make sure to set type: FieldType.object, there's a demo of that in Example 30, the advantage is that you don't have to create your own custom formatter but you have less flexibility so choose which one is the best approach for you.

Angular-Slickgrid/src/app/examples/grid-composite-editor.component.ts

Lines 306 to 323 in f5ab23a

	{
	id: 'origin', name: 'Country of Origin', field: 'origin',
	formatter: Formatters.complexObject, columnGroup: 'Item',
	exportCustomFormatter: Formatters.complex, // without the Editing cell Formatter
	dataKey: 'code',
	labelKey: 'name',
	type: FieldType.object,
	sortComparer: SortComparers.objectString,
	filterable: true,
	sortable: true,
	minWidth: 100,
	editor: {
	model: Editors.autocompleter,
	massUpdate: true,
	customStructure: { label: 'name', value: 'code' },
	collectionAsync: this.http.get(URL_COUNTRIES_COLLECTION),
	editorOptions: { minLength: 0 }
	},

The other question is whether the label can be actually an expression or template to render e.g. "{{firstName}} {{lastName}}. Again in a custom formatter this should be doable but I wanted to check back whether something like this already exists.

No we don't have any formatter or any templating engine in the lib, however the beauty of the custom formatters is that you can define your formatter that would handle that, save it as a separate formatter file, and just reuse it across your project. You could use external lib Handlebar or just use RegEx to do it yourself, custom formatter are just plain JS so it should be easy enough :)

[zewa666]

alright thanks for the feedback. Yeah eventually I would have gone anyways with a custom formatter and editor in order to have a generic construct for various foreign key relations.

I love this concept really a lot as e.g I'd like to have along with the autocomplete input also a list of "recently used" and the custom editor approach makes this super flexible

also using handlebars in that one to parse the provided template was exactly what I thought 👍