Serenity: Using a LookupEditor in Direct Entry in a Grid

[Doomisateur]

Hello, I wanted to use a LookupEditor drop-down list to make direct entry in a grid. In the demo, on the product screen, there are examples of drop-down lists, but they are just fixed lists of type Select2Editor.

Volkan had already answered this question in another post saying that this is not possible in the current version of Serenity. After much research, I confirm that it is impossible.

However, I absolutely wanted to use a LookupEditor and founded how to do it. _Attention, to get there, I had to modify basic classes of Serenity_. This post is for sharing this find for those who are interested in this use.

To get there, modify the following files ...

Modify the file /Scripts/SlickGrid/slick.grid.js _(remember to save this file before making any changes and it will be overwritten if you update the Serenity version)_

function render() {
   ...
   trigger(self.onRender, { grid: self });
}

$.extend(this, {
   "slickGridVersion": "2.1",

   // Events
   ...
   "onRender": new Slick.Event(),



md5-c995105d3dad9f4ce8dc1a34fa5848f7



interface Grid {
   ...
   onRender?: Slick.Event;
}



md5-ec1d231dfa11c85cb92ecf0584022489



...
constructor(container: JQuery) {
   ...
   this.slickGrid.onRender.subscribe(() => {
      this.liaisonEditeurs();
   }
}

private liaisonEditeurs() {
   var laLignes = this.view.getItems();
   for (let lnCpt in laLignes) {
      this.liaisonEditeur(lnCpt, laLignes);
   }
}

private liaisonEditeur(pnIndex: string, paLignes: trs_CtcTelRow[]) {
   if (!$("#CtcTelIdf" + pnIndex).hasClass("select2-offscreen")) {
      var loEditeur = new Tables.TabIdfListeEditor($("#CtcTelIdf" + pnIndex));
      loEditeur.value = Q.toId(paLignes[pnIndex].CtctelIdfFk);
      loEditeur.changeSelect2(e => {
         paLignes[pnIndex].CtctelIdfFk = Q.toId(loEditeur.value);
      });
   }
}

protected getColumns() {
   var laColonnes = super.getColumns();

   var loCtcTelIdf = Q.first(laColonnes, x => x.field === fld.CtctelIdfFkIdf);
   loCtcTelIdf.referenceFields = [fld.CtctelIdfFk];
   loCtcTelIdf.format = ctx => { return '<input type="hidden" id="CtcTelIdf' + ctx.row + '" title="Indicatif" />'; };

   return laColonnes;
}

It works very well for me, I hope it will help you. Perhaps this could be a suggestion for adding it to a future version of Serenity.

[Doomisateur]

I forgot to put you an example of LookupEditor class, file TabIdfListeEditor.ts :

namespace MyProject.MyModule {
    @Serenity.Decorators.registerEditor()
    export class TabIdfListeEditor extends Serenity.LookupEditorBase<Serenity.LookupEditorOptions, tab_IdfRow> {
        constructor(container: JQuery, options?: Serenity.LookupEditorOptions) {
            super(container, options);
        }

        protected getLookupKey(): string {
            var lcValeur = super.getLookupKey();
            lcValeur = Tables.tab_IdfRow.lookupKey;
            return lcValeur;
        }

        protected getItemText(item: tab_IdfRow, lookup: Q.Lookup<tab_IdfRow>) {
            return "+" + item.IdfIdf + " (" + item.IdfPaysFkPaysNom + ")";
        }

        protected getSelect2Options(): Select2Options {
            var liOptions = super.getSelect2Options();

            liOptions.dropdownAutoWidth = true;

            return liOptions;
        }
    }
}

[Doomisateur]

I think on the same way you can use a DateEditor or DateTimeEditor...

Here an example of the dialog with the LookupEditors :

[JohnRanger]

Hi @Doomisateur ,

merci beaucoup pour l'information :-) This would make up a good Wiki entry. May I kindly ask that you also put this into the wiki? (It's easier to find there than within the solved issues).

Thanks again for the info and

with kind regards,

John

[Doomisateur]

With pleasure, I created a page in the wiki visible at this address: https://github.com/volkanceylan/Serenity/wiki/Using-a-LookupEditor-in-direct-entry-in-a-Grid

I added some comments (in english, sorry if bad translation) in my code to make it more readable for everyone.

This issue can be closed.

[dfaruque]

@Doomisateur Thanks for your work.
It will be even better if you give some screenshots on the wiki page

[Doomisateur]

@dfaruque Done ! ;)