Multiselect Element color change

Muhammad Sohail 0
Viewed 40

I want to apply styles on elements in kendo multiselect according to my inline style given in an Array Text Field.

TS File

dataValues: Array<{value: number, text: string}> = [{value: 1, text: "<span style='color:red'>value 1</span>"},{value: 2, text: "value 2"}, {value: 3, text: "<span style='color:red'>value 3</span>"}]

HTML File

<kendo-multiselect 
      [checkboxes]="true" 
      [autoClose]="false"
      [data]="dataValues"
      [textField]="'text'"
      [valueField]="'value'"
      [valuePrimitive]="true">
</kendo-multiselect>

Output

enter image description here

Output should be like this.

enter image description here

kendo-ui kendo-ui-angular2 angular
1 Answers

You can use templates to format the values. And you has two options

  1. Inject domSanitizer and use innerHTML in template

      constructor(private domSanitizer:DomSanitizer){}

 public listItems: Array<value: number,text:SafeStyle>=[
      {value:1,text:this.domSanitizer.bypassSecurityTrustHtml(
        '<span style="color:red">Value 1</span>')},
      {value:2,text:this.domSanitizer.bypassSecurityTrustHtml(
        '<span style="color:green">Value 2</span>')},
      ...]

<div class="example-wrapper">
        <kendo-label text="T-shirt size:">
          <kendo-multiselect
            [checkboxes]="true"
            [autoClose]="false"
            [data]="listItems"
            [(ngModel)]='value'
            textField="text"
            valueField="value"
          >
            <ng-template kendoMultiSelectItemTemplate let-dataItem>
              <div [innerHTML]="dataItem.text"></div>
            </ng-template>
          </kendo-multiselect>
        </kendo-label>
      </div>

  2. Use a new property, e.g. color and use some like

    public listItems: Array<{ text: string, value: number,color?:any}> = [
    { text: 'Small', value: 1,color:'red'},
    { text: 'Medium', value: 2 },
    { text: 'Large', value: 3,color:'green' }
];

<div class="example-wrapper">
    <kendo-label text="T-shirt size:">
      <kendo-multiselect
        [checkboxes]="true"
        [autoClose]="false"
        [data]="listItems"
        [(ngModel)]='value'
        textField="text"
        valueField="value"
      >
        <ng-template kendoMultiSelectItemTemplate let-dataItem>
          <span [style.color]="dataItem.color">{{dataItem.text}}</span>
        </ng-template>
      </kendo-multiselect>
    </kendo-label>
  </div>
Eliseo0
Related