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

ObservableObject data item transform

5 Answers 113 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Doug
Top achievements
Rank 1
Doug asked on 11 Jul 2017, 06:22 PM

Hello-

I have an ObservableObject bound to a remote datasource, and the ObservableObject is bound to form fields with MVVM.

I currently have a 1-1 relationship between the field and the form input.  However, I want to change that so there is a single field for multiple controls.  For example...

 

Current

isClient database field (boolean) --> isClient checkbox

isPrimeClient database field (boolean) --> isPrimeClient checkbox

 

Desired

clientType database field (integer) --> isClient checkbox, isPrimeClient checkbox

 

I think I can use binding to the observable's "get" and "set" events...

 

observable.bind("set", function (e) {
if ((e.field === "isClient") || (e.field === "isPrimeClient")) {

   let isClient = observalbe.get("isClient");

   let isPrimeClient = observalbe.get("isPrimeClient");

   //// Some logic to determine appropriate value for clientType /////

   observable.set("clientType",somevalue);

}

});

 

observable.bind("get", function (e) {
if (e.field === "isClient") {

   //Look at clientType integer value and set e.value (for isClient) appropriately.

   let clientType = observable.get("clientType");

   e.value = //// some logic to determine appropriate value ////
}

else if(e.field === "isPrimeClient"){

   //Look at clientType integer value and set e.value (for isPrimeClient) appropriately.
   let clientType = observable.get("clientType");
   e.value = //// some logic to determine appropriate value ////

}
});

However, observable.get(...) always returns null.  Why is that?

Basically what I'm trying to do is take a single field from the back-end and render two controls for it.

5 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 13 Jul 2017, 02:05 PM
Hello Doug,


In the get event handler the conditions are set for fields that do not exist in the model (e.g. isClient, isPrimeClient), so the code blocks inside them will never execute. You can replace the condition with the following:


observable.bind("get", function (e) {
    if (e.field === "clientType") {
   //logic goes here
   }
});


The same applies when you get the values in the set event handler, since isClient and isPrimeClient are not part of the model, trying to get them will always return null. So you have to get clientType.


Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Doug
Top achievements
Rank 1
answered on 17 Jul 2017, 02:33 PM

Georgi-

Thank you for your response.  That makes sense.  I thought that binding to "get" would add logic to the data pull from source, rather than replace it.  Since it replaces it, for all fields, I would like to have logic in the else that does whatever it would have originally done.  In other words, what goes in the 'else' part?...

observable.bind("get", function (e) {
  if (e.field === "isClient") {
    //do something
  }
  else if (e.field === "isPrimeClient") {
    //do something
  }
  else {
    //do whatever "get" would have done if it wasn't overridden...
  }
}
0
Georgi
Telerik team
answered on 19 Jul 2017, 02:06 PM
Hi Doug,


It is possible to bind a field to multiple controls only in one direction. In other words you can place a condition and bind the controls based on the value of the field as illustrated in the following sample:


However it is not possible to bind the control to the field when the value of the control changes, since it is bound to a conditional expression.


Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Doug
Top achievements
Rank 1
answered on 20 Jul 2017, 07:30 PM

Thanks for the example of the one way data binding of the observable value using an expression.

 

Do you know what code would go in the section "//do whatever "get" would have done if it wasn't overridden..."?

In other words, if the getter wasn't overridden, and it made a call to the database to get the value (for all fields other than IsClient and IsPrimeClient), what code would go there?  Basically, what is the source code for the normal get operation?

0
Georgi
Telerik team
answered on 24 Jul 2017, 02:00 PM
Hello Doug,

I assembled dojo sample which illustrates how to bind single field in the model to multiple controls:


It works as follows:
  1. When clientType is 0, none of the checkboxes is checked.
  2. When clientType is 1, first checkbox is checked.
  3. When clientType is 2, second checkbox is checked.
  4. When clientType is 3, both checkboxes are checked.

Also get is an event which is fired when when the get method is called, so if you do not attach an event handler to the get event, no code will be executed - it does not have default behavior.


Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Doug
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Doug
Top achievements
Rank 1
Share this question
or