Indeterminate checkboxes

[stucork]

A bit of a show and tell and Feature Request

indeterminate checkboxes can be a super useful UI feature

To achieve this in anvil you can do the following - either in the form you need this style checkbox or as a module that you import:

from anvil import *

@property
def indeterminate(self):
  return self._indeterminate

@indeterminate.setter
def indeterminate(self,value):
  js.call_js('indeterminate', self, value)
  self._indeterminate = value

CheckBox.indeterminate = indeterminate
CheckBox._indeterminate = False

Then in native libraries

<script>
function  indeterminate(self, value) {
  self = self.v._anvil.element
  self.find('input[type=checkbox]').prop("indeterminate", value);
}
  
</script>

Here’s a clone link
https://anvil.works/build#clone:ZYGNC5TVPFI66TN6=4ON75F3D6GIIKFCDEKIVIYJF

[david.wylie]

Nice.

If you add this code to the change event you can cycle through the states :

  def check_box_cycle(self, cb):
    if cb:
      if cb.indeterminate:
        cb.indeterminate = False
        cb.checked = False
      else:
        if not cb.checked:
          cb.indeterminate = True

  def check_box_1_change(self, **event_args):
    self.check_box_cycle(event_args.get("sender"))

  def check_box_2_change(self, **event_args):
    self.check_box_cycle(event_args.get("sender"))

  def check_box_3_change(self, **event_args):
    self.check_box_cycle(event_args.get("sender"))

[stucork]

This was my use case - which I’ve added to the clone:

[david.wylie]

This intrigued me :

@stucork

<script>
...
    self = self.v._anvil.element
...
</script>

I’ve not analysed that yet, but I assume that gets you close to the element you are searching for, rather than having to put your own markers in the HTML?

[david.wylie]

@stucork

This was my use case - which I’ve added to the clone:

Ah, I see, a “some selected”. I was thinking down a different track.

[stucork]

I’ve not analysed that yet, but I assume that gets you close to the element you are searching for, rather than having to put your own markers in the HTML?

absolutely - it’s a skulpt syntax
when you send an anvil component to javascript you get a skulpt object
the path v._anvil.element is the jquery object associated with that anvil component.
Removes the need for unique identifiers.

I wrote about it here:

Select specific component with javascript

And used the same idea for the tabulator and some other addons:

Tabulator Javascript Datagrid Integration - #9 by stucork
Implementing Popovers (floating forms)
AnvilAugment: Hover, Focus, Key Bindings Dependency