CODEWITHSUNDEEP
cxjs
Pavel
Pavel

Reputation: 35

Is it possible to bind a selection to an array with multiple PropertySelection

I would like to have a grid with multiple selection and checkboxes and I would like to bind the selection to the store. The example at Grid with Multiple Selection suggests it is possible. However, it doesn't seem to work for me.

Below is a modified code from the example, that doesn't work:

class PageController extends Controller {
 init() {super.init();

 this.store.set(
   "$page.records",
    Array.from({ length: 10 }).map(() => ({
    fullName: casual.full_name,
    selected: false})));
 }
}

export const App = (
  <cx>
    <div controller={PageController}>
      <Grid
        records:bind="$page.records"
        columns={[
          {
            field: "selected",
            style: "width: 1px",
            items: (
              <cx>
                <Checkbox value:bind="$record.selected" unfocusable />
              </cx>
            )
          },
          { header: "Name", field: "fullName", sortable: true }
        ]}
        selection={{
          type: PropertySelection,
          bind: "$page.selection",
          multiple: true
        }}
        sorters:bind="$page.sorters"
      />
      <Repeater records-bind="$page.selection">
        <Text value={computable("$record", r => JSON.stringify(r))} />
        <br />
      </Repeater>
    </div>
  </cx>
);

If I modify the selection in following way, the binding works:

 selection={{
          keyField: "fullName",
          type: KeySelection,
          bind: "$page.selection",
          multiple: true
        }}

But, this way does not select the checkboxes

Upvotes: 1

Views: 53

Answers (1)

Marko
Marko

Reputation: 5454

When you're using PropertySelection information about selection is stored within grid records. That's why checkboxes work.

If you want to use KeySelection you have to override checkbox value to read and write data from the selection object.

<Checkbox 
  value={{
    get: computable('$record.id','$page.selection', (id, selection) => selection?.indexOf(id) >= 0),
    set: (value, { store }) => {
        let id = store.get('$record.id');
        if (value) 
          store.update('$page.selection', selection => [...selection, id]);
        else
          store.update('$page.selection', selection => selection.filter(r => r != id);
     }
  }}
/>

Upvotes: 1

Related Questions