The value is not reflected on UI for all controls with binded using get set properties

[Tuariq]

Team,

I am using 2 time picker controls whose value is binded using a get set property.

Get: gets the value string from a service and converts into a date object as needed by control

Set: takes the date object returned by control, converts it into a time string (hours and min only) and saves into a service

When I make change in 1st control, value is not reflected in second control

However, on making changes to second control, value does get reflected in both.

Could you please provide  a general solution for it (Same issue I am also facing in case of multiselect)? 

I have sttached a demo project to show the issue. Make change in first control=> The second control do not show value. 

Make change in second control=> The first control updated automatically

Attachment: TimeBug1_abb45126.zip

[Sureshkumar P]

Hi Tuariq, 

 

Greetings from Syncfusion support. 

 

Based on the details and the sample you shared. We suspect you would like to update the value of the timepicker component as time string. Despite of this the issue in your sample was reproduced. To solve this problem, we suggest you set the default date object value instead of the time string value. 

Once we convert and set the time string value to the component that will cause the component change event continuously, please update your exact requirement to convert the time string value to update the component. We'll update the solution based on your requirement.  

  

Kindly refer the below code example. 

 

[comp1.component.ts] 

 

 get value() { 

    if (this.dataRepoService.time != undefined) 

      return this.dataRepoService.time; //value is retreived from a service 

  } 

 

  set value(val: any) { 

    if (val != undefined) 

      this.dataRepoService.time = val; 

  } 

 

[comp2.component.ts] 

 get value() { 

    if (this.dataRepoService.time != undefined) 

    return this.dataRepoService.time; //value is retreived from a service 

  } 

 

  set value(val: any) { 

    if(val!=undefined) 

    this.dataRepoService.time = val; 

  } 

 

 

Regards, 

Sureshkumar P 

[Tuariq]

Hi Sureshkumar P,

Thank you for the response.

The requirement is: The time picker control accepts as Date object binding to work, where as my service accepts/provide a time string. I cannot store the complete date object.

To achieve this, I wanted to use a get set property. The set will simply extract a time string from date object binded with time picker control, where as get will create a date object using saved time string.

get value() {

    if (this.dataRepoService.time != undefined)

      return this.GetDateObjectFromTimeString(this.dataRepoService.time); //value is retreived from a service

  }

  set value(val: any) {

    if (val != undefined)

      this.dataRepoService.time = this.GetTimeFromDateObject(val);

  }

GetDateObjectFromTimeString(time:string): Date    //accepts a time string and returns date object

GetTimeFromDateObject(dateTime: Date): string   //accepts a date object and return time string

The solution shared by you is simply storing the complete date object. The issue is being reproduced while performing the conversion in get set.

Is this not possible to acheive in this control or there is some known issue?

Thanks

Tuariq

[Sureshkumar P]

Hi Tuariq, 

 

Thanks for your update. 

 

Based on your shared information, we cannot achieve your requirement, because we have used two custom components with two-way binding. So, if we have changed the value in one component, another component value is automatically changed. In that case get and set properties are called continuously. That is the reason the issue you have facing. We suggest you use the component change event to store the time value as string format to your service. 

 

Regards, 

Sureshkumar P