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

Retain previous value on error check

3 Answers 14 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Carla
Top achievements
Rank 1
Veteran
Carla asked on 17 Mar 2021, 05:56 PM

Hello,

I'm trying to retain the value of the combobox on action error. After the user selects an option from the combobox, I run a database query to check if the option selected is valid, if not, I want the previous option to stay selected. Example: Combobox value = "N/A", user selects "COMPLETED", db check fails, combobox value should be 'N/A". I add the code below, hope to get some help with this.

Thanks,

Carla

<kendo-combobox id="complete-button"
                              (click)="$event.stopImmediatePropagation()"
                              [data]="stateListDictionary[task.id]"
                              [value]="stateListComboDefaultDict[task.id]"
                              [placeholder]="'Change State...'"
                              (valueChange)="updateTaskStatePerExperiment($event, task, experiment)"
                              [disabled]="stateListComboDisabledDict[task.id]">
</kendo-combobox>
if (taskId === 17) { // Pre Review task needs an extra check
      this.checklistApiService.getPreReviewTrackValue(this.expId).subscribe(data => {
        let dataLength = data.length;
 
        if (dataLength != 0) { //there is a track value set, so it's ok to change
          this.updateTaskHelper(taskId, status, taskItem, experimentItem);
        } else { //there is no track value
          if (status != 'COMPLETED') { //setting status other than Completed is ok
            this.updateTaskHelper(taskId, status, taskItem, experimentItem);
          } else { //status is 'Completed' so throw error
            this.stateListComboDefaultDict[taskItem.id] = "TEST";
            // this.populateCategoryChildren(this.gateId); // @TODO find a better way to clear 'COMPLETED' and keep the previous value that should not change
            let toast:Toast = {
              type: 'error',
              title: 'Task status could not be updated',
              body: 'The task could not be updated. Please select a Review Track in the Pre Review tab',
              showCloseButton: true
            };
            this.toasterService.pop(toast);
          }
        }
      }, err =>{
        console.log("Request Service Error => [getPreReviewTrackValue in gate-checklist page] generated while getting review track  " + err);
        return false;
      });
    } else {
      this.updateTaskHelper(taskId, status, taskItem, experimentItem);
    }

3 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 19 Mar 2021, 11:55 AM

Hi Carla,

Thank you for the provided details on this case.

In order to change the ComboBox value programmatically based on some conditions, the developer can implement some custom logic in valueChange handler, utilizing the value property of the component. 

Here is an example where I added a custom alert, where on Cancel button I set the ComboBox value to N/A:

https://stackblitz.com/edit/angular-pmnk71

In your case, store the last selected item, and when the database returns an error reassign the ComboBox value.

I hope this helps. Let me know if there is anything else I can help with.

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Carla
Top achievements
Rank 1
Veteran
answered on 23 Mar 2021, 01:27 AM

Hi Martin,

 

Thanks for your response, unfortunately this is not working for me. The selected value stays even after I use "combobox.value = this.stateListDictionary[taskItem.id][0];". Location [0] is the location of the previous value. I'm passing it manually for now but would have to find its location once I get this working. I suppose I cannot pass a simple string as: "combobox.value = 'Value 2';"

Here are my changes:

<kendo-combobox id="complete-button"
                #combobox
                (click)="$event.stopImmediatePropagation()"
                [data]="stateListDictionary[task.id]"
                [value]="stateListComboDefaultDict[task.id]"
                [placeholder]="'Change State...'"
                (selectionChange)="updateTaskStatePerExperiment($event, combobox, stateListComboDefaultDict[task.id], task, experiment)"
                [disabled]="stateListComboDisabledDict[task.id]">
</kendo-combobox>

 

private updateTaskStatePerExperiment(selectedValue, combobox: ComboBoxComponent, previousItem:any, taskItem:PanelBarItemModel, experimentItem:PanelBarItemModel): void {
    let taskId = parseInt(taskItem.id);

    if (taskId === 17){ // Pre Review task needs an extra check
      this.checklistApiService.getPreReviewTrackValue(this.expId).subscribe(data => {
        let dataLength = data.length;

        if (dataLength != 0) { //there is a track value set, so it's ok to change
          this.commonChecklistService.updateTaskHelper(this.expId, this.laneId, taskId, this.stateListDictionary, selectedValue, taskItem, experimentItem);
        } else { //there is no track value
          if (selectedValue != 'COMPLETED') { //setting status other than Completed is ok
            this.commonChecklistService.updateTaskHelper(this.expId, this.laneId, taskId, this.stateListDictionary, selectedValue, taskItem, experimentItem);
          } else { //status is 'Completed' so throw error
            combobox.value = this.stateListDictionary[taskItem.id][0]; //previousItem

            let toast:Toast = {
              type: 'error',
              title: 'Task status could not be updated',
              body: 'The task could not be updated. Please select a Review Track in the Pre Review tab',
              showCloseButton: true
            };
            this.toasterService.pop(toast);
          }
        }
      }, err =>{
        console.log("Request Service Error => [getPreReviewTrackValue in gate-checklist page] generated while getting review track for expId: "
          + this.expId + ". " + err);
        return false;
      });
    } else {
      this.commonChecklistService.updateTaskHelper(this.expId, this.laneId, taskId, this.stateListDictionary, selectedValue, taskItem, experimentItem);
    }
  }

0
Accepted
Martin
Telerik team
answered on 24 Mar 2021, 11:05 AM

Hello Carla,

Thank you for the provided additional details on this case.

What I could suggest is to try to change the bound value property in valueChange event handler. Please note that the value option of the ComboBox uses two-way data binding:

  <kendo-combobox
      [data]="listItems"
      [(value)]="value"
      (valueChange)="onChange($event, combobox)"
    >
    </kendo-combobox>
public value = this.listItems[1];

  onChange(e) {
    if (!confirm("Invalid entry, do you want to proceed")) {
      this.value = this.listItems[0];
    }
  }

https://stackblitz.com/edit/angular-pmnk71-3ei6hd

Another option is to change the text property of the ComboBox, e.g.:

else { //status is 'Completed' so throw error
            combobox.value = this.stateListDictionary[taskItem.id][0]; //previousItem
            combobox.text= this.stateListDictionary[taskItem.id][0]; 

Keep in mind that this property is not exposed in our public API and its purpose can be changed in the future. Such changes of the internal properties are not considered a breaking change. So use it at your own discretion.

Let me know how it goes.

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ComboBox
Asked by
Carla
Top achievements
Rank 1
Veteran
Answers by
Martin
Telerik team
Carla
Top achievements
Rank 1
Veteran
Share this question
or