No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Selecting on a single CheckBox in Table selects all rows.

    Help
    3
    4
    911
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • F
      fenchai last edited by

      I am new to JS and Quasar so please pardon my ignorance.

      We can clearly see here that only 1 item is selected but visually all boxes are checked.
      940045c1-a281-4b15-a25d-eb9dbe883c23-image.png

      initially, I was thinking maybe row-key="name" is incorrect? but I have no idea how to test if this is correct or not.

      Below is the entire Page for the table.

      <template>
        <div>
          <q-table
            ref="mainTable"
            class="my-sticky-virtscroll-table"
            style="height: 800px"
            :data="data"
            :columns="columns"
            row-key="name"
            :selected-rows-label="getSelectedString"
            selection="multiple"
            :selected.sync="selected"
            virtual-scroll
            :pagination.sync="pagination"
            :virtual-scroll-sticky-size-start="48"
            :rows-per-page-options="[0]"
            :filter="filter"
            flat
            bordered=""
            @focusin.native="activateNavigation"
            @focusout.native="deactivateNavigation"
            @keydown.native="onKey"
          >
            <template v-slot:top-left>
              <q-input
                ref="mainSearchInput"
                debounce="0"
                v-model="filter"
                label="Búsqueda"
                filled
                bottom-slots
                clearable=""
                style="width:500px"
              >
                <template v-slot:hint
                  >Puede hacer búsquedas online con commandos.</template
                >
              </q-input>
            </template>
      
            <template v-slot:body-cell-qty="props">
              <q-td :props="props">
                <q-badge
                  :class="'(props.value < 1000) ? bg-red : bg-green'"
                  :label="props.value"
                />
              </q-td>
            </template>
      
            <template v-slot:body-cell-code="props">
              <q-td :props="props">
                <q-badge
                  :class="'!props.value ? bg-orange : bg-red'"
                  :label="props.value"
                />
              </q-td>
            </template>
          </q-table>
          <div class="q-mt-md">Selected: {{ JSON.stringify(selected) }}</div>
          <br />
        </div>
      </template>
      
      <script>
      import path from "path";
      import { remote } from "electron";
      
      export default {
        data() {
          return {
            navigationActive: false,
            filter: "",
            selected: [],
            pagination: {
              rowsPerPage: 0
            },
            columns: [
              {
                name: "code",
                required: true,
                label: "Código",
                align: "left",
                // field: row => row.name,
                field: "CODIGO",
                format: val => `${val}`,
                sortable: true
              },
              {
                name: "description",
                align: "left",
                label: "Descipción",
                field: "DESCRIPCION",
                sortable: true
              },
              { name: "qty", label: "Qty", field: "INVENT", align: "right" },
              { name: "codAlt", label: "Cod Alt", field: "COD.ALT.", align: "left" },
              {
                name: "desAlt",
                label: "Desc Alt",
                field: "DESC.ALT.",
                align: "left"
              },
              {
                name: "groups",
                label: "Grupo",
                field: "GRUPO",
                align: "left"
              },
              { name: "price", label: "Precio", field: "PRECIO", align: "right" },
              {
                name: "discount20",
                label: "20 %",
                field: "PRECIO",
                align: "right",
                sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
              }
            ],
            data: []
          };
        },
      
        methods: {
          getSelectedString() {
            return this.selected.length === 0
              ? ""
              : `${this.selected.length} record${
                  this.selected.length > 1 ? "s" : ""
                } selected of ${this.data.length}`;
          },
      
          activateNavigation() {
            this.navigationActive = true;
          },
      
          deactivateNavigation() {
            this.navigationActive = false;
          },
      
          onKey(evt) {
            if (
              this.navigationActive !== true ||
              [33, 34, 35, 36, 38, 40].indexOf(evt.keyCode) === -1 ||
              this.$refs.mainTable === void 0
            ) {
              return;
            }
      
            evt.preventDefault();
      
            switch (evt.keyCode) {
              case 36: // Home
                page = 1;
                index = 0;
                break;
              case 35: // End
                page = lastPage;
                index = rowsPerPage - 1;
                break;
              case 33: // PageUp
                page = currentPage <= 1 ? lastPage : currentPage - 1;
                if (index < 0) {
                  index = 0;
                }
                break;
              case 34: // PageDown
                page = currentPage >= lastPage ? 1 : currentPage + 1;
                if (index < 0) {
                  index = rowsPerPage - 1;
                }
                break;
              case 38: // ArrowUp
                if (currentIndex <= 0) {
                  page = currentPage <= 1 ? lastPage : currentPage - 1;
                  index = rowsPerPage - 1;
                } else {
                  index = currentIndex - 1;
                }
                break;
              case 40: // ArrowDown
                if (currentIndex >= lastIndex) {
                  page = currentPage >= lastPage ? 1 : currentPage + 1;
                  index = 0;
                } else {
                  index = currentIndex + 1;
                }
                break;
            }
      
            if (page !== this.pagination.page) {
              this.pagination = {
                ...this.pagination,
                page
              };
      
              this.$nextTick(() => {
                const { computedRows } = this.$refs.mainTable;
                this.selected = [
                  computedRows[Math.min(index, computedRows.length - 1)]
                ];
              });
            } else {
              this.selected = [computedRows[index]];
            }
          }
        },
      
        mounted() {
          // get file path
          const filePath = path.join(
            remote.app.getPath("home"),
            "/Dropbox/Sync/inventarioHL.json"
          );
      
          // load the File System to execute our common tasks (CRUD)
          var fs = require("fs");
      
          // read file content
          const fsData = fs.readFileSync(filePath, "utf-8");
      
          // parse text into json
          var jsonData = JSON.parse(fsData);
      
          // add entire data to table
          this.data = jsonData;
      
          // for (const x in jsonData) {
          //   console.log(x);
          // }
      
          console.log(jsonData[0]);
      
          // focus on q-input
          this.$refs.mainSearchInput.$el.focus();
        }
      };
      </script>
      
      <style lang="sass">
      .my-sticky-virtscroll-table
        /* height or max-height is important */
        height: 310px
      
        /* specifying max-width so the example can
          highlight the sticky column on any browser window */
        max-width: 1300px
      
        td:first-child
          /* bg color is important for td; just specify one */
          background-color: #fafafa !important
      
        tr th
          position: sticky
          /* higher than z-index for td below */
          z-index: 2
          /* bg color is important; just specify one */
          background: #fafafa
      
        /* this will be the loading indicator */
        thead tr:last-child th
          /* height of all previous header rows */
          top: 48px
          /* highest z-index */
          z-index: 3
        thead tr:first-child th
          top: 0
          z-index: 1
        tr:first-child th:first-child
          /* highest z-index */
          z-index: 3
      
        td:first-child
          z-index: 1
      
        td:first-child, th:first-child
          position: sticky
          left: 0
      </style>
      
      T 1 Reply Last reply Reply Quote 0
      • T
        tof06 @fenchai last edited by

        @fenchai said in Selecting on a single CheckBox in Table selects all rows.:

        initially, I was thinking maybe row-key=“name” is incorrect? but I have no idea how to test if this is correct or not.

        You’re right. It’s incorrect 🙂
        It seems that you don’t have a name field in your data. Try with row-key="codigo"

        1 Reply Last reply Reply Quote 1
        • F
          fenchai last edited by

          Thank you again lol. You solved 2 of my posts already 🙂 @tof06
          unfortunately I don’t know how to change post as solved and site is not allowing me to edit post title either.

          1 Reply Last reply Reply Quote 0
          • metalsadman
            metalsadman last edited by metalsadman

            @fenchai go on your first post, click the options to your right, you can edit the title (prefixing [Solved] if it is), delete the topic etc… please avoid making similar threads next time. thx.

            1 Reply Last reply Reply Quote 0
            • First post
              Last post