This is a migrated thread and some comments may be shown as answers.

want to set Back ground color

3 Answers 97 Views
CheckBox
This is a migrated thread and some comments may be shown as answers.
Zahid Iqbal
Top achievements
Rank 1
Zahid Iqbal asked on 15 May 2020, 09:12 AM

 

I Have created kendo-angular   Multi drop down with customization  and I want to se the background color for "select all"  check box which is placed in Header please see the attachment for the refernce  and I have used <input type="checkbox" kendoCheckBox /> for select all.

Please help me to change the background color.  if I am using Class=k-checkbox it not working because this is placed under kendoMultiSelectHeaderTemplate.

 <ng-template kendoMultiSelectHeaderTemplate let-dataItem>
                      <div style="padding-left:5px;">
                        <input type="checkbox" [(ngModel)]="IsCountryselectallChecked"  
                        (change)="SelectAllCountry()" kendoCheckBox />
                        <label class="myass-checkbox-label">Select all</label>
                      </div>
</ng-template>

 

3 Answers, 1 is accepted

Sort by
0
Zahid Iqbal
Top achievements
Rank 1
answered on 16 May 2020, 09:29 PM

Please make this clickable this check box is not clickable  need this very badly this is the only way its setting the back ground if i don't use the class="k-checkbox" class="k-checkbox-label" i am able to click but background color is not setting this is the last peace od

<ng-template kendoMultiSelectHeaderTemplate let-dataItem>                       
                        <input type="checkbox" class="k-checkbox" kendoCheckBox />
                        <label class="k-checkbox-label" >Select all</label>

</ng-template>

 the Below Code is clickable but functioning as per the requirement but unable to set the background color for checkbox

<ng-template kendoMultiSelectHeaderTemplate let-dataItem>
                    
                        <input type="checkbox"  kendoCheckBox />
                        <label class="Custom CSS">Select all</label>
                      </div>

</ng-template>

 

 

 

0
Martin
Telerik team
answered on 19 May 2020, 06:19 AM

Hi Zahid,

Thank you for the provided code snippets.

Generally speaking, the kendoCheckBox directive adds some Kendo specific styling on top of the generic input HTML element. All input type="checkbox" HTML attributes and Angular bindings are applicable. Thus applying custom CSS styling does not differ from customizing a regular <input type="checkbox" /> element. 

In order to change the background color of the checkbox when is checked, the developer can use the checked pseudo-class:

      .custom-bg:checked {
        background: green;
        border-color: green;
      }
...
 <input class="custom-bg" type="checkbox" kendoCheckBox />

Here is an example demonstrating the suggestion:

https://stackblitz.com/edit/angular-4pp6js?file=app/app.component.ts

I hope this helps. Let me know if any further questions come up on this case.

Regards,
Martin
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Zahid Iqbal
Top achievements
Rank 1
answered on 20 May 2020, 12:27 AM
Hello Martin, Thank you for the Quick Reply, and big thanks for sharing the Solution, i started comparing the app.module.ts with your solution and found the input module was missing. that is the only reason it was not working. Thank you for Your Support .
Tags
CheckBox
Asked by
Zahid Iqbal
Top achievements
Rank 1
Answers by
Zahid Iqbal
Top achievements
Rank 1
Martin
Telerik team
Share this question
or