Is it possible to have different Switch fill colors in different components?  I can't turn off View encapsulation.

I have tried:

::ng-deep .k-switch-on .k-switch-track {
  border-color: red !important;
  background-color: red !important;
}

in the component .scss file but it doesn't work.

I'm struggling to access this kendo-switch ID (in this case it should be A1) being passed to the generateSubscriptionArray function it seems to return undefined no matter what variation of attempts to access it I try, it also doesn't seem to show up on the $event if I try to pass this to the function.

Any assistance regarding this would be really beneficial the switch is returning the relevant true/false boolean

HTML

 
<kendo-switch
    onLabel=" "
    offLabel=" "
    formControlName="A1"
    id="A1"
    (click)="generateSubscriptionArray(userPreferenceForm.controls.A1.value,
             formcontrol id as string in this case A1 should be passed here)"
    ></kendo-switch>

TypeScript:

exportclass UserPreferencesComponent implements OnInit {
    userPreferenceForm: FormGroup;
    email_address: FormControl;

    constructor() {}

    ngOnInit(): void {
        this.userPreferenceForm = new FormGroup({
            email_address: new FormControl('', Validators.required),
            A1: new FormControl(false),
        });
    }
generateSubscriptionArray = (subscription: boolean, alertID: string): void => {
        if (subscription === true) {
            console.log(subscription, alertID);
        } else {
            console.log(subscription, alertID);
        }
    };
 

When using the Fluent theme, I would expect the colour of a disabled switch to be a lighter version of the colour for the normal on state, but it's grey, so not easily to tell the difference in the switch state between on and off.

Using the normal theme;

Using the fluent theme

Hi,

I have grid and in every row i have a switch button .

I have a requirement to set ARIA LABEL value dynamically so that the user will know which column and row he is in. While fixing that, I found the JAWS screen reader reading additional comments(colored yellow) other than the content from ARIA LABEL. I am unable to find where it is coming from. This happens only for the first row. Also, the screen reader reads the column header for the second time. Please find the JAWS Speech history below. Attached is the screenshot of the same.

Yes/No
column 5 row 2
Column 5 row 1 Contains Controls 
Column 5 row 1 Switch Off 
Yes/No //It reads Column Header for the second time
column 4 row 1    //Additional content
Switch Pressed On 
Column 5 row 2 Switch Off 
Switch Pressed On 
Column 5 row 3 Switch Off 
Switch Pressed On 
Column 5 row 4 Switch Off 
Switch Pressed On 
Column 5 row 5 Switch Off 
Switch Pressed On


How to solve this?

Here's the stackblitz link:  https://stackblitz.com/edit/angular-egapar?file=src%2Fapp%2Fapp.component.ts

Thanks,

Sowmiya

Hi,

I have a kendo grid and in each row, I have a kendo switch button. When focusing on the kendo switch in the first row, the JAWS screen reader reads the entire grid values. The expected behavior is JAWS should read only the aria-label value along with Switch's action(Switched on or Pressed Off). I tried setting role="switch" and role="button".  How to fix this?

Here's the stackblitz link:  https://stackblitz.com/edit/angular-egapar?file=src%2Fapp%2Fapp.component.ts

I've attached JAWS' Speech history.

Thanks

I am creating unit tests using jest and I can't run the test because of Angular not like "on" inside the [onLabel] attribute in kendo-switch.  Is there a work around for this?  

Template parse errors:
    Binding to event property 'onLabel' is disallowed for security reasons, please use (Label)=...
    If 'onLabel' is a directive input, make sure the directive is imported by the current module. ("
              (valueChange)="switchPageSize($event)"
              [offLabel]="'All'"
              [ERROR ->][onLabel]="'All'">
            </kendo-switch>
          </ng-template>
    "): ng:///DynamicTestModule/HistoryComponent.html@199:10

Hello Angular Kendo UI Team,

I think I might have found a bug. On the attached screenshot I show that as a table cell is in edit mode, elements in other columns rerender, e.g. SwitchComponent and possibly due to css class conflict the said component is stretched (just while in edit mode of another cell)

Cheers, K. Dimitrov