MultiColumnComboBox conditionally hide column

[Jake]

I need to conditionally hide some of the columns of my kendo-multicolumncombobox based on whether or not the field they are bound too contains a value I know that the kendo-combobox-column has a hidden property but I don't know how to get access to the bound dataItem in order to determine if it has a value.

 

Basically I want to be able to do:

<kendo-combobox-column field="myField" title="cc2" [width]="50" [hidden]="!myField"></kendo-combobox-column>

this throws an error how do I get access to the value of that field for this particular item?

[Martin]

Hi Jake,

You can dynamically create the MultiColumnComboBox columns, using *ngFor and custom column configuration array object like:

 <kendo-combobox-column
            *ngFor="let col of columnsConfig"
                [field]="col.field"
                [title]="col.title"
                [width]="col.width"
            >
            </kendo-combobox-column>

  public columnsConfig = [
    { field: 'name', title: 'Name', width: 200 },
    { field: 'title', title: 'Title', width: 250 },
    { field: 'country', title: 'Country', width: 80 },
  ];

This allows you to set the hidden option to a custom column property:

 public columnsConfig = [
    { field: 'name', title: 'Name', width: 200, isHidden: true },
..]

 <kendo-combobox-column
            *ngFor="let col of columnsConfig"
                [field]="col.field"
                 ...
                [hidden]="col.isHidden"
            >
</kendo-combobox-column>

or bind the hidden property to a custom function that determines the visibility of the column by some custom business logic.

I hope this sheds some light on the case. Let me know if any further questions come up about this scenario.

Regards,
Martin
Progress Telerik

[Jake]

Martin,

Thank you that was helpful.