CODEWITHSUNDEEP
angularvalidationkendo-dropdown
SilverFish
SilverFish

Reputation: 1106

How to disable defaultItem in Angular kendo-dropdownlist?

Is there a way to disable or make [defaultItem] readonly in kendo-dropdownlist? If not, how can I validate that a value other than defaultItem is selected and validate form? The [disabled]="DepartmentProcessing.invalid is not working as expected since it gets enabled even when default item is selected. Here is the html

    <form class="form-horizontal" #DepartmentProcessing="ngForm">      
      <div class="form-group" >
                <label class="col-sm-4 control-label" for="dept">Department</label>
                <div class="col-sm-4">
                    <kendo-dropdownlist [data]="departmentlistItems"
                                        [filterable]="true"
                                        [valueField]="'Id'"
                                        [defaultItem]="defaultDepartment"
                                        [textField]="'Description'"
                                        [(ngModel)]="SelectedDepartment"
                                        (filterChange)="handleDepartmentFilter($event)"
                                        #SelectedDepartmentControl="ngModel"
                                        name="SelectedDepartment"
                                        id="SelectedDepartment"
                                        required>
                    </kendo-dropdownlist>
                    <span class="help-block"
                          *ngIf="SelectedDepartmentControl.touched && SelectedDepartmentControl.invalid">
                        Department is required
                    </span>
                </div>
            </div>

            <div class="pull-right">
                <button id="button1id" name="button1id" class="btn btn-danger" (click)="SubmitDept()" [disabled]="DepartmentProcessing.invalid">Submit Department</button>
            </div>

In the component class, I have

public defaultDepartment: { Id: number, Description: string } = { Id: null, Description: 'Select Department' };

Upvotes: 0

Views: 1542

Answers (2)

dennisbot
dennisbot

Reputation: 948

You can use this event handler for the itemDisabled kendo-dropdownlist property:

 public itemDisabled(itemArgs: { dataItem: string; index: number }) {
     return itemArgs.index == -1;
 }

And in your angular view:

<kendo-dropdownlist
    ...
    [defaultItem]="defaultItemPropFromAngularComponent"
    [itemDisabled]="itemDisabled"
    ...
></kendo-dropdownlist>

-1 indicates to the dropdownlist to pick up the defaultItem value, it will be readonly from now on.

I'm using Angular 14 and "@progress/kendo-angular-dropdowns": "^6.0.1"

Upvotes: 0

topalkata
topalkata

Reputation: 2098

When valuePrimitive is not set to true, the component's value is an object and thus does not fail the "required" validation.

You can either bind the component to a primitive value (thus form will be invalid when the value field of the selected item is null/undefined), or if this is not an option use the valueChange event handler to reset the form field's value if the default item is selected

<kendo-dropdownlist
                [data]="departments"
                [defaultItem]="{ Id: null, Description: 'Select Department' }"
                [textField]="'Description'"
                [valueField]="'Id'"
                (valueChange)="onValueChange($event)"
                [(ngModel)]="SelectedDepartment"
                name="SelectedDepartment"
                required
            >
            </kendo-dropdownlist>

public onValueChange(e) {
  if(!e.Id) {
    this.SelectedDepartment = undefined;
  }
}

PLUNKER

Upvotes: 0

Related Questions