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

Checkbox selection doesn't work correctly with cell template (grid native)

1 Answer 6 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Stefan
Top achievements
Rank 1
Stefan asked on 09 Aug 2019, 08:07 AM

As I said in the title: Checkbox selection doesn't work correctly with cell template (grid native).

Broken grid screen

The checkboxes didin't show up correctly, instead all data moved one column to the left. There is my code:

HTML:

<Grid
  ref="grid"
  :data-items="gridData"
  :columns="gridHeaders"
  :pageable="pageable"
  :skip="skip"
  :take="take"
  :page-size="pageSize"
  :total="tasks.totalElements"
  @columnreorder="columnReorder"
  :cell-render="'myTemplate'"
  :scrollable="'none'"
  :selected-field="selectedField"
>
  <template slot="myTemplate" slot-scope="{props}">
    <td :class="props.className">
      <span v-if="props.field === 'actions'">
        <VTooltip
          v-if="type !== 'user'"
          bottom
        >
          <VIcon
            slot="activator"
            style="cursor: pointer"
            @click="assignTask([props.dataItem])"
          >
            {{ assignIcon }}
          </VIcon>
          <span>{{ assignToolTip }}</span>
        </VTooltip>
        <VTooltip
          v-if="type === 'user'"
          bottom
        >
          <VIcon
            slot="activator"
            style="cursor: pointer"
            :disabled="!resolverRegistered(props.dataItem)"
            @click.stop="resolveTask(props.dataItem)"
          >
            check
          </VIcon>
          <span>Resolve</span>
        </VTooltip>
      </span>
      <span v-else>{{ getNestedValue(props.field, props.dataItem) }}</span>
    </td>
  </template>
</Grid>

Computed:

gridData() {
        if (this.tasks.content) {
          return this.tasks.content.map(item => {return {'selected': false, ...item}})
        } else {
          return []
        }
      },
      areAllSelected() {
        if (this.tasks.content) {
          return this.tasks.content.findIndex(item => item.selected === false) === -1
        } else {
          return false
        }
      },
      gridHeaders() {
        return [
          {field: 'selected', headerSelectionValue: this.areAllSelected}, ...this.headers
        ]
      }

Methods:

getNestedValue(fieldName, dataItem) {
        const path = fieldName.split('.');
        let data = dataItem;
        path.forEach((p) => {
            data = data ? data[p] : undefined;
        });
 
        return data;
      },

Data:

selectedField: 'selected',

 

Am I doing something in a wrong way? Or I have to implement those checkboxes in my own way.

I would be grateful for any help! :)

1 Answer, 1 is accepted

Sort by
0
Stefan
Top achievements
Rank 1
answered on 09 Aug 2019, 01:01 PM
I've found answer. I have to use cell in a header object to defined template for the particular cell.
Tags
Grid
Asked by
Stefan
Top achievements
Rank 1
Answers by
Stefan
Top achievements
Rank 1
Share this question
or