No labels appeaering when adding a KendoSwitch to a kendoGridFilterMenuTemplate

[Murray]

I am trying to add a switch to allow a user to dictate whether a column filter is applied as an AND or OR to the server side query generated, as follows. The problem is that no labels are generated for the switch. Can you help with why this is happening? 

 

<ng-template
      kendoGridFilterMenuTemplate
      let-filter
      let-column="column"
      let-filterService="filterService">
      <kendo-grid-string-filter-menu
        [column]="column"
        [extra]="false"
        [filter]="filter"
        [filterService]="filterService">
        <kendo-filter-contains-operator>
        </kendo-filter-contains-operator>
        <kendo-filter-eq-operator>
        </kendo-filter-eq-operator>
        <kendo-filter-neq-operator>
        </kendo-filter-neq-operator>
      </kendo-grid-string-filter-menu>
        <kendo-switch
          [checked]="filter.logic == 'or'"
          (valueChange)="switchChange($event, filter)">
        </kendo-switch>
    </ng-template>

 

 

[Dimiter Topalov]

Hi Murray,

Thank you for bringing this issue to our attention. I logged it to our public Kendo Themes repo and you can track it here:

https://github.com/telerik/kendo-themes/issues/1499

The undesired layout is caused by the existing built-in styling for Kendo components nested within a Grid Filter Menu - there is a display: block added to .k-widget elements used within the Grid Filter Menu (for the purpose of styling the default building blocks of the menu properly):

Overwriting these rules via custom CSS yields the desired layout (the width of the Switch can be changed or not depending on the design preference). Here is an example demonstrating the described approach:

encapsulation: ViewEncapsulation.None,
styles: [`
  .k-filter-menu .k-widget.k-switch {
    display: inline-flex;
    width: 6em;
  }
`]

https://stackblitz.com/edit/angular-cvzjrq-wcy59c?file=app/app.component.ts

I hope this helps, and I also updated your Telerik points for bringing this issue to our attention.

Regards,
Dimiter Topalov
Progress Telerik