Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Check all binding

See original GitHub issue

I have the following form with a lot of checkboxes. Is there any way to bind one checkbox to all the others. The reason for this is to quickly tick all the checkboxes instead of going one by one.

<form>
  <title>SECOND TRIMESTER ULTRASOUND</title>
  <heading>Patient details</heading>
  <row>
    <col>
      <text>Name: {ContextBinding FirstName} {ContextBinding LastName} ({ContextBinding GenderAsString})</text>
    </col>
    <col>
      <text>DOB: {ContextBinding DateOfBirth} ({ContextBinding AgeString})</text>
    </col>
  </row>
  <row>
    <col>
      <text>Patient ID: {ContextBinding PatientId}</text>
    </col>
    <col>
      <text>Accession: {ContextBinding PatientId}</text>
    </col>
  </row>
  <hr />
  <row>
    <col>
      <input
        type="string"
        name="EDD"
        label="EDD"></input>
    </col>
    <col>
      <input
        type="string"
        name="Weeks"
        label="Weeks"></input>
    </col>
    <col>
      <input
        type="string"
        name="Days"
        label="Days"></input>
    </col>
  </row>
  <title>Placenta</title>
  <row>
    <col>
      <row>
        <input
          type="bool"
          name="has-Anterior"
          label="Anterior"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-Posterior"
          label="Posterior"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-Fundal"
          label="Fundal"></input>
      </row>
      <row>
        <col>
          <input
            type="bool"
            name="has-Clear"
            label="Clear (&gt;2cm)"></input>
        </col>
        <col
          width="0.7">
          <input
            type="string"
            name="has-ClearLength"
            visible="{Binding has-Clear}"
            label="mm"></input>
        </col>
      </row>
      <row>
        <input
          type="bool"
          name="has-Low"
          label="Low"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-Covering"
          label="Covering"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-Liquor"
          label="Liquor"></input>
      </row>
      <row>
        <input
          type="string"
          name="CervicalLength"
          label="Cervical Length (mm)"></input>
      </row>
    </col>
    <col>
      <textarea
        name="PlacentaComments"
        label="Placenta comments" />
    </col>
  </row>
  <hr />
  <title>Growth Parameters</title>
  <row>
    <col>
      <row>
        <col>
          <input
            type="string"
            name="BPD"
            label="BPD (mm)"></input>
        </col>
        <col
          width="0.5">
          <text>=</text>
        </col>
      </row>
      <row>
        <col>
          <input
            type="string"
            name="HC"
            label="HC (mm)"></input>
        </col>
        <col
          width="0.5">
          <text>=</text>
        </col>
      </row>
      <row>
        <col>
          <input
            type="string"
            name="AC"
            label="AC (mm)"></input>
        </col>
        <col
          width="0.5">
          <text>=</text>
        </col>
      </row>
      <row>
        <col>
          <input
            type="string"
            name="FL"
            label="FL (mm)"></input>
        </col>
        <col
          width="0.5">
          <text>=</text>
        </col>
      </row>
      <row>
        <col>
          <input
            type="string"
            name="H2"
            label="H2 (mm)"></input>
        </col>
        <col
          width="0.5">
          <text>=</text>
        </col>
      </row>
      <row>
        <col>
          <input
            type="string"
            name="meanusage"
            label="Mean U/S Age"></input>
        </col>
        <col
          width="0.5">
          <text>=</text>
        </col>
      </row>
    </col>
    <col>
      <row>
        <col>
          <input
            type="string"
            name="bpd_weeks"
            label="Weeks"></input>
        </col>
        <col>
          <input
            type="string"
            name="bpd_days"
            label="Days"></input>
        </col>
      </row>
      <row>
        <col>
          <input
            type="string"
            name="hc_weeks"
            label="Weeks"></input>
        </col>
        <col>
          <input
            type="string"
            name="hc_days"
            label="Days"></input>
        </col>
      </row>
      <row>
        <col>
          <input
            type="string"
            name="ac_weeks"
            label="Weeks"></input>
        </col>
        <col>
          <input
            type="string"
            name="ac_days"
            label="Days"></input>
        </col>
      </row>
      <row>
        <col>
          <input
            type="string"
            name="fl_weeks"
            label="Weeks"></input>
        </col>
        <col>
          <input
            type="string"
            name="fl_days"
            label="Days"></input>
        </col>
      </row>
      <row>
        <col>
          <input
            type="string"
            name="h2_weeks"
            label="Weeks"></input>
        </col>
        <col>
          <input
            type="string"
            name="h2_days"
            label="Days"></input>
        </col>
      </row>
      <row>
        <col>
          <input
            type="string"
            name="mean_weeks"
            label="Weeks"></input>
        </col>
        <col>
          <input
            type="string"
            name="mean_days"
            label="Days"></input>
        </col>
      </row>
    </col>
    <col>
      <row>
        <col>
          <text>Heart rate:</text>
        </col>
        <col>
          <input
            type="string"
            name="Heart_Rate"
            label="bpm"></input>
        </col>
      </row>
      <row>
        <col>
          <text></text>
        </col>
        <col>
          <input
            type="string"
            name="BPDf"
            label=""></input>
        </col>
      </row>
      <row>
        <col>
          <text></text>
        </col>
        <col>
          <input
            type="string"
            name="BPDf"
            label=""></input>
        </col>
      </row>
    </col>
  </row>
  <hr />
  <title>Foetal anatomy</title>
  <row>
    <col
      width="1.1">
      <row>
        <col
          width="0.27">
          <heading>Head</heading>
        </col>
        <col>
          <input
            type="bool"
            name="has-Tick_All_Head"
            label=""></input>
        </col>
      </row>
      <row>
        <input
          type="bool"
          name="has-Faix"
          label="Faix"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-Cavum_Septum"
          label="Cavum Septum"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-Skull_Bones"
          label="Skull Bones"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-Choroid_Plexus"
          label="Choroid Plexus"></input>
      </row>
      <row>
        <col>
          <input
            type="bool"
            name="has-Ventricles"
            label="Ventricles"></input>
        </col>
        <col
          width="0.7">
          <input
            type="string"
            name="has-VentriclesLength"
            visible="{Binding has-Ventricles}"
            label="mm"></input>
        </col>
      </row>
      <row>
        <col>
          <input
            type="bool"
            name="has-Cerebellum"
            label="Cerebellum"></input>
        </col>
        <col
          width="0.7">
          <input
            type="string"
            name="has-CerebellumLength"
            visible="{Binding has-Cerebellum}"
            label="mm"></input>
        </col>
      </row>
      <row>
        <col>
          <input
            type="bool"
            name="has-Cisterna_Magna"
            label="Cisterna Magna"></input>
        </col>
        <col
          width="0.7">
          <input
            type="string"
            name="has-Cisterna_MagnaLength"
            visible="{Binding has-Cisterna_Magna}"
            label="mm"></input>
        </col>
      </row>
      <row>
        <col>
          <input
            type="bool"
            name="has-Nuchal_Fold"
            label="Nuchal Fold"></input>
        </col>
        <col
          width="0.7">
          <input
            type="string"
            name="has-Nuchal_FoldLength"
            visible="{Binding has-Nuchal_Fold}"
            label="mm"></input>
        </col>
      </row>
    </col>
    <col>
      <row>
        <heading
          icon="heart">Heart</heading>
      </row>
      <row>
        <input
          type="bool"
          name="has-Position"
          label="Position/Axis"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-Four_Chambers"
          label="Four Chambers"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-LVOT"
          label="LVOT"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-RVOT"
          label="RVOT"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-Aortic_Arch"
          label="Aortic Arch"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-Ductal_Arch"
          label="Ductal Arch"></input>
      </row>
    </col>
  </row>
  <hr />
  <br />
  <row>
    <col
      width="1.1">
      <row>
        <heading>Face</heading>
      </row>
      <row>
        <input
          type="bool"
          name="has-Orbits"
          label="Orbits"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-Lips_Nose"
          label="Lips/Nose"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-Jaw"
          label="Jaw"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-Profile"
          label="Profile"></input>
      </row>
    </col>
    <col>
      <row>
        <heading>Abdomen</heading>
      </row>
      <row>
        <input
          type="bool"
          name="has-Diaphragm"
          label="Diaphragm"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-Stomach"
          label="Stomach"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-LeftKidney"
          label="Left Kidney"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-RightKidney"
          label="Right Kidney"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-Bladder"
          label="Bladder"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-Abdo_Wall"
          label="Abdo Wall"></input>
      </row>
    </col>
  </row>
  <hr />
  <br />
  <row>
    <col
      width="1.1">
      <row>
        <heading>Spine</heading>
      </row>
      <row>
        <input
          type="bool"
          name="has-Coronal"
          label="Coronal"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-Sagital"
          label="Sagital"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-Axial"
          label="Axial"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-Skinline"
          label="Skinline"></input>
      </row>
    </col>
    <col>
      <row>
        <heading>Limbs</heading>
      </row>
      <row>
        <input
          type="bool"
          name="has-12_Long_Bones"
          label="12 Long Bones"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-Hands"
          label="Hands"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-Feet"
          label="Feet"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-Position_of_joins"
          label="Position of joins"></input>
      </row>
    </col>
  </row>
  <hr />
  <br />
  <row>
    <col
      width="1.1">
      <row>
        <heading>Umbilical cord</heading>
      </row>
      <row>
        <input
          type="bool"
          name="has-Insertion"
          label="Insertion"></input>
      </row>
      <row>
        <input
          type="bool"
          name="has-3VC"
          label="3VC"></input>
      </row>
    </col>
    <col></col>
  </row>
  <hr />
  <row>
    <input
      type="string"
      name="Sonographer"
      label="Sonographer"></input>
  </row>
  <row>
    <action
      name="reset"
      content="RESET"
      icon="close"
      resets="true" />
    <action
      name="submit"
      content="SUBMIT"
      icon="check"
      validates="true" />
  </row>
</form>

See this images. If I tick the “Head” then everything in the head category should tick

Issue Analytics

State:
Created 5 years ago
Comments:11 (11 by maintainers)

Top GitHub Comments

1reaction

edongashicommented, Jun 24, 2018

Behaviors feature is done, well mostly done:

DynamicForm class supports following methods: DynamicForm.AddBehavior(object behavior) and DynamicForm.RemoveBehavior(object behavior)
As you can see above, behaviors are only applied at class/global level
Instance level (per form control) behaviors can be done if they are needed
A behavior to be useful should implement IPropertyChangedBehavior to do side effects on property changed, IModelChangedBehavior when a new form is mounted, or both.
More behaviors types will be added in time.
This is basically a glorified observer pattern, but it’s easier for the consumer because you don’t have to worry about event leaks from manually hooking into inpcs.

For your task you need this behavior:

class CheckAllBehavior : IPropertyChangedBehavior
{
    public void PropertyChanged(IPropertyChangedContext context)
    {
        if (!(context.Model is IDictionary<string, object> model))
        {
            return;
        }

        // Select all only on checked.
        if (model[context.PropertyName] is true)
        {
            var meta = context
                .FormDefinition
                .GetElements()
                .FirstOrDefault(elem => elem is DataFormField d && d.Key == context.PropertyName)
                ?.Metadata;
            if (meta == null || !meta.TryGetValue("sets", out var value))
            {
                return;
            }

            var props = value?.Split(new[] { ' ', ',' }, StringSplitOptions.RemoveEmptyEntries);
            if (props != null)
            {
                foreach (var prop in props)
                {
                    model[prop] = true;
                }
            }
        }
    }
}

This is already done in the demo (this specific solution will not be supported from the library). To see it in action write the following form:

<form>
  <input type="bool" label="All" name="all" meta-sets="first,second,third" />
  <input type="bool" label="First" name="first" />
  <input type="bool" label="Second" name="second" />
  <input type="bool" label="Third" name="third" />
</form>

Copy the class above into your project and modify it as you see fit. Don’t forget to inject it somewhere in startup/init code.

0reactions

edongashicommented, Oct 15, 2018

@hashitha also what could be improved here: when serializing, you can check if the field is just an “all” setter, which you can ignore when serializing json.

if (field.Metadata.ContainsKey("sets")) {
  // don't serialize this
  continue;
}

because otherwise we get this:

{
  "all": true,
  "first": true,
  "second": true,
  "third": true
}

depending if you need the "all" flag in your json or not.

Top Results From Across the Web

List all bindings of an element (with jQuery)

Is there a way to list all bindings on a jQuery element? jQuery's bind() does only seem to attach them and I didn't...

Is there a console command to see what binds I have?

If you want a list of all bound keys and their commands/aliases, type key_listboundkeys into console (use unbindalljoystick to remove all ...

How do I list all key-bindings available in a given buffer?

You can start with S-TAB , to see all currently available keys. Or you can start by hitting a prefix key (e.g. C-x...

How to bind select all , specific check to view model or model

Hi, 1.I would like to get how to build the view model for this screenshot especially to select all , specific check ....

XAML data binding diagnostics - Visual Studio (Windows)

Clear the list of failures: This is useful if you're about to show a new page in your app and want to see...

Troubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.

Start Free

Top Related Reddit Thread

No results found

Top Related Tweet

No results found

Top Related Dev.to Post

No results found

Check all binding

Issue Analytics

Top GitHub Comments

Top Results From Across the Web

Top Related Medium Post

Top Related StackOverflow Question

Troubleshoot Live Code

Top Related Reddit Thread

Top Related Hackernoon Post

Top Related Tweet

Top Related Dev.to Post

Top Related Hashnode Post

Visibility based on radio buttons

Field visibility binding