Grid Assigned ComboBox With Triggers (works as expected) - I Want To Add Icons To The Items Listed - How ?

[andyhill]

I have a Grid Assigned ComboBox With Triggers working correctly - I Want To Add Icons To The Items Listed In The Dropdown - How ?

 

[Sherzod]

Hello Andy, 

OK, and what should happen when the user clicks on the icon in the dropdown list item?

[andyhill]

Hi Sherzod, Thanks for asking.

I want the ComboBox DropDown List to show ICON+TEXT

The grid ComboBox EditBox will ignore icons and only save TEXT.

Regards
Andy

[andyhill]

Any progress Sherzod ?

[Sherzod]

10 hours ago, andyhill said:

Any progress Sherzod ?

Regarding the icons you want to display in the ComboBox dropdown — could you clarify, where will the icons come from?

[andyhill]

They can come from an ImageList OR URL image/apple.png

[Sherzod]

23 minutes ago, andyhill said:

They can come from an ImageList OR URL image/apple.png

Could you show an example of how you currently populate the ComboBox Items?

[andyhill]

Sure

cbItems are created at runtime (cbItems.Images:= UniNativeImageList1; // UniImageList) and are cleared and updated on the fly subject to user intervention.

        cbItems.BeginUpdate;
        cbItems.Items.Clear;
        if UniMainModule.MyQuery1.Active then UniMainModule.MyQuery1.Close;
        UniMainModule.MyQuery1.SQL.Clear;
        UniMainModule.MyQuery1.Params.Clear;
        UniMainModule.MyQuery1.SQL.Add('SELECT Description '+
                                       'FROM '+UniMainModule.ActiveDatabase+'.Items '+
                                       'WHERE HideFromView <> TRUE '+
                                       'AND UPPER(BusinessName) = :TXT '+
                                       'ORDER BY Description ;');
        UniMainModule.MyQuery1.ParamByName('TXT').AsString:= UpperCase(PurchSupplier);
        UniMainModule.MyQuery1.Open;
        while not UniMainModule.MyQuery1.Eof do begin
          i:= cbItems.Items.Add(Trim(UniMainModule.MyQuery1.FieldByName('Description').AsString));
          cbItems.Items[i].IconIndex:= 1; <<<<< etc.
          UniMainModule.MyQuery1.Next;
        end;
        UniMainModule.MyQuery1.Close;
        cbItems.EndUpdate;

This would be consistent with other similar programming.

[Sherzod]

@andyhill

Sorry for asking again, just to make sure I understand correctly — at the moment everything works on your side: the dropdown already shows icons + text, and the only remaining task is to strip the HTML/icon from the grid cell itself so it stores and displays plain text only. Is that correct?
 

[Sherzod]

If so, here is a possible solution — in the Grid ClientEvents → ExtEvents → reconfigure:
 

function reconfigure(sender, store, columns, oldStore, oldColumns, eOpts) 
{
  columns.forEach(function(col) {
    var editor = col.getEditor && col.getEditor();
    if (editor && editor.xtype === 'combo' && !editor._cleanHandlerAttached) {
      editor._cleanHandlerAttached = true;
      editor.on('select', function(combo, record) {
        var tmp = document.createElement('div');
        tmp.innerHTML = combo.getRawValue();
        var cleanText = (tmp.textContent || tmp.innerText || '').trim();
        combo.setRawValue(cleanText);
      });
    }
  });
}

 

[andyhill]

Sherzod, Originally I added html tags to the dropdown text but needed to strip the tags out when saved (or searched) as grid data BUT had issues.

So in the meantime I wanted to try and use the TUniComboBox to handle assigned icons from the UniNativeImageList1 just like the code I posted above but that FAILS.

Can we get the UniNativeImageList1 concept code to work please.

Also If I go back to the original concept (later I will need to do this elsewhere) I would need to rework my already reconfigure search code below:-

  grdWorkSheet.JSInterface.JSAddListener('reconfigure',
                                         'function reconfigure(sender, store, columns, oldStore, oldColumns, eOpts) '+
                                         '{ '+
                                         '  columns.forEach(function(col) '+
                                         '    { '+
                                         '      var ed=col.getEditor(); '+
                                         '      if (ed.xtype === "combo") '+
                                         '      { '+
                                         '        ed.addListener("select", '+
                                         '          function (combo, record) '+
                                         '          { '+
                                         '            var _cRow = sender.getSelectionModel().getCurrentPosition().row; '+
                                         '            var _cCol = sender.getSelectionModel().getCurrentPosition().column; '+
                                         '            _cCol+=1; '+
                                         '            /* Take into account the count of hidden columns 0=ID(hidden), 1=InvoiceID(hidden), 2=Quantity, 3=Description, 4=BASType */ '+
                                         '            _cCol-=2; '+
                                         '            Ext.defer(function(){sender.editingPlugin.completeEdit()}, 10); '+
                                         '            Ext.defer(function(){sender.editingPlugin.startEdit(_cRow, _cCol)}, 20); '+
                                         '          } '+
                                         '        ) '+
                                         '      } '+
                                         '    } '+
                                         '  ) '+
                                         '} '
                                        );

By adding your code too making it one code block:-

function reconfigure(sender, store, columns, oldStore, oldColumns, eOpts) 
{
  columns.forEach(function(col) {
    var editor = col.getEditor && col.getEditor();
    if (editor && editor.xtype === 'combo' && !editor._cleanHandlerAttached) {
      editor._cleanHandlerAttached = true;
      editor.on('select', function(combo, record) {
        var tmp = document.createElement('div');
        tmp.innerHTML = combo.getRawValue();
        var cleanText = (tmp.textContent || tmp.innerText || '').trim();
        combo.setRawValue(cleanText);
      });
    }
  });
}

Can you please merge the reconfigure codes so I can use this idea elsewhere AND get the UniNativeImageList1 concept to work.

Thanks
Andy 

[Sherzod]

10 hours ago, andyhill said:

I would need to rework my already reconfigure

function reconfigure(sender, store, columns, oldStore, oldColumns, eOpts) 
{
  columns.forEach(function(col) {
    var editor = col.getEditor && col.getEditor();
    if (editor && editor.xtype === 'combo' && !editor._cleanHandlerAttached) {
      editor._cleanHandlerAttached = true;
      editor.on('select', function(combo, record) {
        // 1. Strip HTML tags from selected value
        var tmp = document.createElement('div');
        tmp.innerHTML = combo.getRawValue();
        var cleanText = (tmp.textContent || tmp.innerText || '').trim();
        combo.setRawValue(cleanText);
        
        // 2. Move focus to next cell
        var pos = sender.getSelectionModel().getCurrentPosition();
        if (pos) {
          var _cRow = pos.row;
          var _cCol = pos.column + 1 - 2; // adjust for hidden columns
          Ext.defer(function() { sender.editingPlugin.completeEdit(); }, 10);
          Ext.defer(function() { sender.editingPlugin.startEdit(_cRow, _cCol); }, 20);
        }
      });
    }
  });
}

 

[andyhill]

Thank you Sherzod HOWEVER the incremental search is now broken (when a key is typed the items list is no longer filtered and synced in dropdown) because of html script ?

        //i:= cbItems.Items.Add(Str);
        i:= cbItems.Items.Add('<font color="blue">'+Str+'</font>');

Also, the classical use of icons in a ComboBox was not addressed ?

Please advise

[andyhill]

Any progress Sherzod ?

[andyhill]

Sherzod, what does ComboBox.NormalizeString actually do ? Any progress with above ?

[andyhill]

While I have been waiting, I can fudge Icons in a simple ComboBox test project but in a larger application where a grid is involved  "Columns.Items[i].Editor:= cbItems;" the code still executes but the icons fail to appear ?

type
  TUniComboBoxExtended = class(TUniCustomComboBox);

...

FORMCREATE
  cbItems:=        TUniComboBox.Create(HiddenPanel);
  cbItems.Parent:= HiddenPanel;
  cbItems.Name:=   'cbItems';
  cbItems.Mode:=   umNameOnly;
  cbItems.Images:= UniNativeImageList1; 
  cbItems.Items.Clear;
  cbItems.Text:=   '';
  cbItems.IconItems.Clear;

...

PROCEDURE
var
  Item: TUniIconItem;
begin  
  cbItems.BeginUpdate;
  cbItems.Items.Clear;
  cbItems.IconItems.Clear;
  for I:= 1 to 5 do begin
    Item:=            TUniComboBoxExtended(cbItems).IconItems.Add();
    Item.Caption:=    'Andy'+IntToStr(I);
    Item.ImageIndex:= 1;
  end;
  cbItems.EndUpdate;
end;

...

Sherzod, Can you please explain ?

[andyhill]

Sherzod, on a standalone shell project with an IDE placed Grid and then dynamically creating the ComboBox - all works as expected.

In a much larger project with dynamically created Grids, ComboBoxs etc. (same combo code) dropdown fails to show icons in the dropdown. 

Do you have some sort of console code that at runtime will read ALL of the grid's settings (including events) so that I can compare to see why the larger projects icons fail to show.

It has something to do with the Grid Editor implementation.

[Sherzod]

Hello Andy,

Sorry for the delayed response.

Since the same approach works in a small test project, could you please create a minimal reproducible test case with a dynamically created grid and ComboBox column editor?

[andyhill]

SOLVED WITH A WORK AROUND.

Farshad, this one is in your court.

Because TUniComboBox has a dual personality (Items.Add OR IconItems.Add), when it is assigned as a grid editor, the grid initialisation process samples the items within to determine how to set it up and use. 

eg. 1
cbItems.Items.Add('1') grid will ignore icons (they do not exist) in grid rendering even if later cbItems are cleared (Items.Clear/IconItems.Clear) and new Iconitems are added, the grid remains locked in non Icon mode.

eg. 2
Item:= TUniComboBoxExtended(cbItems).IconItems.Add();
Item.Caption:=    '2';
Item.ImageIndex:= 2; 
Grid will render icons accordingly ONLY IF IN FORMCREATE cbItems IS SEEDED WITH IconItems.Add before assigning to grid.

THERFORE if cbItems on creation remains EMPTY or does not contain IconItems before it is assigned to the grid as an editor, Icons throughout the session will be ignored.

FIX FOR NOW, on creation seed it with IconItems.Add before assigning it to the grid as an editor.