Retain previous value on error check

[Carla]

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);
    }

[Martin]

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

[Carla]

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);
    }
  }

[Martin]

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