Resetting the value to defaultItem

[Carla]

Hi,

I'm using a dropDownList in a navigation bar and I'd like to reset the dropdown to display the [defaultItem] every time I click in another navigation button. The other buttons get highlighted to show that the user is at that location. So to avoid confusion, I want the dropdown to reset. These buttons are not Kendo components but <a> links and I'm planning to use "(click)="resetDropdown($event)" to call the action.

Here is my code:
     

<kendo-dropdownlist
  [defaultItem]="selectGateDefaultItem"
  [itemDisabled]="gateChecklistItemDisabled"
  [data]="gates | async"
  [textField]="'NAME'"
  [valueField]="'ID'"
  (selectionChange)="openGatePage($event)"
  [popupSettings]="{height: 100, width: 280}"
  [iconClass]= "gateIcon"
  id="gateChecklistDropdown"
  style="width: 250px"
>
  <ng-template kendoDropDownListItemTemplate let-dataItem>
    <span class="template">{{dataItem.NAME}}</span>
  </ng-template>
  <ng-template kendoDropDownListValueTemplate let-dataItem>
    <span class="selectedValueTemplate">{{ dataItem.NAME }}</span>
  </ng-template>
</kendo-dropdownlist>

Also, I'd like to know if I can change the color of the dropdown button (when in closed state). I was able to add an icon but I could not find a way to edit the color. 

Thanks,

Carla

[Dimiter Topalov]

Hi Carla,

The DropDownList value can be reset using the `reset` method. As for switching the color of the arrow, one possible approach is to set a custom class dynamically based on a variable, toggled in the open and close event handlers, and custom CSS targeting the arrow container element only when the custom class is applied, e.g.:

encapsulation: ViewEncapsulation.None,
  styles: [
    `
      .k-dropdown.closed .k-select {
        color: red;
      }
    `
  ]

Here is an example demonstrating both resetting the value, and toggling the arrow color based on the open/close state:

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

If you need to edit the whole background color (not only the icon color), the following CSS can be used instead:

.k-dropdown.closed .k-dropdown-wrap {
        background: red;
        color: white;
      }

https://stackblitz.com/edit/angular-sekegt-nbb141?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik