Simple TIP: CheckComboBox Plugin

[estrify]

Hi,

 

I show a simple use of a CheckComboBox Plugin...

• Add "CheckComboBox_Plugin.js" to UniServerModule->CustomFiles (adjust the path to the .JS file to yours)
• Add the following to UniServerModule->CustomCSS (adjust the path to the .GIF file to yours):
  

  .ux-boundlist-item-checkbox
  {
      background-repeat: no-repeat;
      background-color: transparent;
      width: 13px;
      height: 13px;
      display: inline-block;
      line-height: 13px;
      background-image: url('checkbox.gif');
      background-position: 0 0;
  }
  .x-boundlist-selected .ux-boundlist-item-checkbox
  {
      background-position: 0 -13px;
  }
  

• Add UniComboBox->ExtEvents->Ext.form.field.ComboBox -> change

  function change(sender, newValue, oldValue, eOpts)
  {
      for (var i=0; i<newValue.length; i++)
      {
         var found=false;
         
         for (var j=0; j<oldValue.length; j++)
           if (newValue[i]==oldValue[j])   { found=true; break;}
         
         if (!found)  ajaxRequest(sender, "checkevent", [ "text="+newValue[i] ]);
      }
  
      for (var i=0; i<oldValue.length; i++)
      {
         var found=false;
         
         for (var j=0; j<newValue.length; j++)
           if (oldValue[i]==newValue[j])   { found=true; break;}
         
         if (!found)  ajaxRequest(sender, "uncheckevent", [ "text="+oldValue[i] ]);
      }
  }
  

• Add to UniComboBox->UniEvents -> Ext.form.Field.ComboBox -> beforeInit:

  function beforeInit(sender, config)
  {
     Ext.apply(sender, {
        emptyText: 'empty text',
        multiSelect: true,
        plugins: Ext.create('Ext.ux.form.plugin.CheckComboBox')
     });
  }

• Look at Main.pas to see sample ways to do things...
   

I hope you find it useful to adapt it to your needs...

 

Regards,

 

 

 

20150928_CheckComboBox_Plugin.rar

[stiaan]

Thanks!

[mehmet07]

Thanks

[Laskdou]

How to programmatically mark multiple positions?

The issue is canceled, I found the answer in the example

[wildfoxwolf]

Something wrong when used in unidbgrid filter-editor,cell-editor.

[jahlxx]

Hi.

 

Is this still not possible with standard components?

 

Thanks.

[Freeman35]

Hello,

I get "c is not a constructor" error in my application, how can I find this error ?  "plugins: Ext.create('Ext.ux.form.plugin.CheckComboBox')" this line create this error but where, I couldn't find.

Problem in my app. Demo work normal. on ver 1480

How to find this error? or any suggession cheklist useage in filter.

Thank you.

[Sherzod]

2 hours ago, Freeman35 said:

I get "c is not a constructor" error in my application, how can I find this error ?  "plugins: Ext.create('Ext.ux.form.plugin.CheckComboBox')" this line create this error but where, I couldn't find.

Problem in my app. Demo work normal. on ver 1480

Hello,

On 9/28/2015 at 8:26 PM, estrify said:

• Add "CheckComboBox_Plugin.js" to UniServerModule->CustomFiles (adjust the path to the .JS file to yours)
• Add the following to UniServerModule->CustomCSS (adjust the path to the .GIF file to yours):

 

[Freeman35]

copy + paste is good thing but, don't forget chek after paste I made mistake while adding customfile.

Thank you.

[Freeman35]

I get a another strange problem.

When I add in Column's for filtering editor, ClearButton showing. This is not importend for me, but if clearButton is visible, at this time check glyphs not showing. Just for test, I removed combobox from column filter editor, and on form. ClearButton property work normal, I mean if ClearButton is true, then show, if false not showing. Not just for this component. I test this on TUniEdit. Same result. I mean TuniEdit.ClearButton is false, but when in filtering (I mean in edit type something) ClearButton bean visible why? or

How to remove ClearButton in filter editor in grid column

or how to show check glyph in this js code ?

Thank you.

[Sherzod]

Ok, can you try this approach for now?

For example for UniComboBox1

1. UniComboBox1.ClearButton = False

2. function beforeInit:

function beforeInit(sender, config)
{
    Ext.apply(sender, {
        multiSelect: true,
        plugins: [
            Ext.create('Ext.ux.form.plugin.CheckComboBox'),
            Ext.create('Ext.ux.field.plugin.Clearable')
        ]
    });
}

3. function afterrender:

function afterrender(sender, eOpts)
{
    if (sender.getValue().length == 0 && sender.triggers.clear) {
        sender.triggers.clear.setHidden(true);
    }
}

4. function change:

function change(sender, newValue, oldValue, eOpts)
{
    if (sender.getValue().length > 0 && sender.triggers.clear) {
        sender.triggers.clear.setHidden(false)
    }
    
    ...
    ...
}

 

[Freeman35]

Thank you so much, this is work in testcase. I think problem in my app. I have to investigate more, tomorrow.

Thank you so much.

[Sherzod]

OK, no problem

[Freeman35]

And the end I found problem

unidbGrid.Options.dgFilterClearButton := False;

in ......\uniGUI\Source\Components\uniDBGrid.pas

      if not FFilterInited then
      begin
       (FEdit as IUniFormControl).ClearButton := True;      >>>>>  Line: 5432  Why it has to be True? I don't wanna ClearButton....
        (FEdit as IUniFormControl).CheckChangeDelay := FFiltering.ChangeDelay;
        (FEdit as IUniFormControl).VarValue := Null;

It should

 (FEdit as IUniFormControl).ClearButton := dgFilterClearButton in FGrid.Options;//True;

unigui builded but in application grid not showing.

Is this bug?

[Sherzod]

On 1/24/2019 at 1:23 PM, Freeman35 said:

Is this bug?

Hello,

One possible solution:

UniComboBox2

1. function beforeInit:

function beforeInit(sender, config)
{
    Ext.apply(sender, {
        multiSelect: true,
        plugins: []
    });
}

2. function afterCreate:

function afterCreate(sender)
{
    sender.newCheckBoxPlugin = new Ext.create('Ext.ux.form.plugin.CheckComboBox');
    sender.newCheckBoxPlugin.init(sender);    
}

 

[Freeman35]

Yes, perfect. now its work now clearly.

Thank you.

best regards.

[picyka]

Can someone post the latest version?

[Freeman35]

On 1/23/2019 at 8:41 PM, Sherzod said:

Ok, can you try this approach for now?

For example for UniComboBox1

1. UniComboBox1.ClearButton = False

2. function beforeInit:

function beforeInit(sender, config)
{
    Ext.apply(sender, {
        multiSelect: true,
        plugins: [
            Ext.create('Ext.ux.form.plugin.CheckComboBox'),
            Ext.create('Ext.ux.field.plugin.Clearable')
        ]
    });
}

3. function afterrender:

function afterrender(sender, eOpts)
{
    if (sender.getValue().length == 0 && sender.triggers.clear) {
        sender.triggers.clear.setHidden(true);
    }
}

4. function change:

function change(sender, newValue, oldValue, eOpts)
{
    if (sender.getValue().length > 0 && sender.triggers.clear) {
        sender.triggers.clear.setHidden(false)
    }
    
    for (var i=0; i<newValue.length; i++)
    {
       var found=false;
       
       for (var j=0; j<oldValue.length; j++)
         if (newValue[i]==oldValue[j])   { found=true; break;}
       
       if (!found)  ajaxRequest(sender, "checkevent", [ "text="+newValue[i] ]);
    }

    for (var i=0; i<oldValue.length; i++)
    {
       var found=false;
       
       for (var j=0; j<newValue.length; j++)
         if (oldValue[i]==newValue[j])   { found=true; break;}
       
       if (!found)  ajaxRequest(sender, "uncheckevent", [ "text="+oldValue[i] ]);
    }
//For lazy :)
  var vls= sender.getValue();
  ajaxRequest(sender,"where_str",["where_str="+vls]);
}

 

All thanks to @Sherzod and @estrify

[shawdown]

Good morning friends.

Today to select a checkbox inside the ComboBox I use the following code.

UniSession.AddJS (UniComboBox1.JSName + '. SetValue (["Item 1", "Item 2"]);');

The above code unchecks any other selection leaving only "Item 1" and "Item 2".

This way I have "Item 1" and "Item 2" selected.

Now I would like to select "Item 3" but I want to just pass the "Item 3" name and select it.

Without deselecting "Item 1" and "Item 2".