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

    QGrid v0.0.2 has been released!!

    Useful Tips (NEW)
    5
    14
    607
    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.
    • Pratik Patel
      Pratik Patel last edited by

      @metalsadman added new props for paginations and visible columns etc.Planning to add a grouping of columns in new release

      dobbel 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel @Pratik Patel last edited by

        @Pratik-Patel Very useful and great additions!

        1 Reply Last reply Reply Quote 0
        • Pratik Patel
          Pratik Patel last edited by

          @dobbel Thanks.

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

            QGrid v0.0.5 has been released!!

            New -

            • Added Grouping of the columns feature

            Demo - https://quasar-qgrid.netlify.app/examples

            *edit: modded typo - @metalsadman

            dobbel 1 Reply Last reply Reply Quote 1
            • dobbel
              dobbel @Pratik Patel last edited by

              @Pratik-Patel

              great update!

              1 Reply Last reply Reply Quote 1
              • Hawkeye64
                Hawkeye64 last edited by

                QGrid, not QGird – be careful

                1 Reply Last reply Reply Quote 1
                • Pratik Patel
                  Pratik Patel last edited by

                  Yes, @Hawkeye64 🙂

                  1 Reply Last reply Reply Quote 0
                  • G
                    gs86 last edited by gs86

                    @Pratik-Patel i have tried using your qgrid extension but there are a few quirks i found,

                    the filter_type: ‘select’ and pagination does not seem to work with data being requested from the server, i am pasting the demo i have built, its pretty straight forward with the ajax request i am doing.

                    can you please review

                    @Hawkeye64 if you can also advise, thanks!

                    <template>
                      <div>
                        <q-grid
                          :title="`${pageTitle}s`"
                          :pagination.sync="pagination"
                          :data="data"
                          :columns="columns"
                          :columns_filter="true"
                          :draggable="true"
                          :fullscreen="true"
                          :csv_download="true"
                          :global_search="true"
                          :no-data-label="$utils.noResultsLabel"
                          :no-results-label="$utils.filterNoResultsLabel"
                          row-key="id"
                          :loading="loading"
                          :filter="filter"
                          @request="onRequest"
                          binary-state-sort
                        >
                          <template v-slot:body="props">
                            <q-tr :props="props">
                              <q-td key="id">
                                {{ props.row.id }}
                              </q-td>
                              <q-td key="roll_no">
                                {{ props.row.roll_no }}
                              </q-td>
                              <q-td key="color">
                                {{ props.row.color }}
                              </q-td>
                              <q-td key="gsm">
                                {{ props.row.gsm }}
                              </q-td>
                              <q-td key="length">
                                {{ props.row.length }}
                              </q-td>
                              <q-td key="roll_size">
                                {{ props.row.roll_size }}
                              </q-td>
                              <q-td key="gross_weight">
                                {{ props.row.gross_weight }}
                              </q-td>
                              <q-td key="net_weight">
                                {{ props.row.net_weight }}
                              </q-td>
                              <q-td key="createdAt">
                                {{ $utils.formatDate(props.row.createdAt) }}
                              </q-td>
                              <q-td key="updatedAt">
                                {{ $utils.formatDate(props.row.updatedAt) }}
                              </q-td>
                            </q-tr>
                          </template>
                        </q-grid>
                      </div>
                    </template>
                    
                    <script>
                    const strPage = "Roll";
                    
                    import { mapActions, mapState, mapGetters } from "vuex";
                    
                    export default {
                      async mounted() {
                        this.refresh();
                      },
                      computed: {
                        ...mapState("enquiry", ["arrColor"]),
                    
                        arrColorMapped() {
                          let arr = this.arrColor.map(str => {
                            return { id: str, name: str };
                          });
                          return arr;
                        },
                        pageUri() {
                          return this.pageTitle.toLowerCase().replace(" ", "_");
                        }
                      },
                      methods: {
                        async onRequest(props) {
                          const { page, rowsPerPage, sortBy, descending } = props.pagination;
                          const strFilter = props.filter;
                    
                          this.loading = true;
                    
                          let objParams = Object.assign({}, props.pagination);
                          objParams.search = strFilter;
                    
                          let objResponse;
                          try {
                            //pass status as params
                            if (this.status) {
                              objParams.status = this.status;
                            }
                            objResponse = await this.$myAxios.execute(
                              "GET",
                              `/${this.pageUri}`,
                              objParams
                            );
                          } catch (e) {
                            this.$utils.showErrorNotice(e.message);
                          } finally {
                            this.loading = false;
                          }
                    
                          if (objResponse) {
                            this.pagination.rowsNumber = objResponse.obj.count;
                            this.pagination.page = page;
                            this.pagination.rowsPerPage = rowsPerPage;
                            this.pagination.sortBy = sortBy;
                            this.pagination.descending = descending;
                            this.data = objResponse.obj.rows;
                          }
                        },
                        async refresh() {
                          this.onRequest({
                            pagination: this.pagination,
                            filter: undefined
                          });
                        }
                      },
                    
                      data() {
                        return {
                          pageTitle: strPage,
                          breadcrumbs: [
                            { id: 1, label: "Home", icon: "home", to: "/admin/dashboard" },
                            { id: 2, label: strPage, icon: "folder" }
                          ],
                          columns: [
                            {
                              name: "id",
                              required: true,
                              label: "Id",
                              align: "left",
                              field: "id",
                    
                              sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
                              sortable: true
                            },
                            {
                              name: "roll_no",
                              required: true,
                              label: "Roll #",
                              align: "left",
                              field: "roll_no",
                    
                              sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
                              sortable: true
                            },
                            {
                              name: "color",
                              label: "Color",
                              align: "left",
                              field: "color",
                              sortable: true,
                              filter_type: "select",
                              sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
                            },
                            {
                              name: "gsm",
                              label: "GSM",
                              align: "left",
                              field: "gsm",
                              sortable: true,
                              sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
                            },
                            {
                              name: "length",
                              label: "Length",
                              align: "left",
                              field: "length",
                              sortable: true,
                              filter_type: "select",
                              sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
                            },
                            {
                              name: "roll_size",
                              label: "Roll Size",
                              align: "left",
                              field: "roll_size",
                              sortable: true,
                              sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
                            },
                            {
                              name: "gross_weight",
                              label: "Gross Weight",
                              align: "left",
                              field: "gross_weight",
                              sortable: true,
                              sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
                            },
                            {
                              name: "net_weight",
                              label: "Net Weight",
                              align: "left",
                              field: "net_weight",
                              sortable: true,
                              sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
                            },
                            {
                              name: "createdAt",
                              label: "Date Created",
                              align: "left",
                              field: "createdAt",
                              sortable: true,
                              sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
                            },
                            {
                              name: "updatedAt",
                              label: "Date Updated",
                              align: "left",
                              field: "updatedAt",
                              sortable: true,
                              sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
                            }
                          ],
                          objModel: {},
                          editMode: false,
                          dialog: false,
                          printDialog: false,
                          loading: false,
                          filter: "",
                          data: [],
                          pagination: {
                            sortBy: "id",
                            descending: true,
                            page: 1,
                            rowsPerPage: 10,
                            rowsNumber: 10
                          },
                          rollsToPrint: []
                        };
                      }
                    };
                    </script>
                    
                    <style lang="scss" scoped></style>
                     
                    
                    1 Reply Last reply Reply Quote 0
                    • Hawkeye64
                      Hawkeye64 last edited by

                      @gs86 My advice is to not use anything less than v1.0.0 in production. If you’re playing with it, fine, otherwise you’re just testing.

                      1 Reply Last reply Reply Quote 0
                      • G
                        gs86 last edited by

                        @Hawkeye64 thanks for the advice, lets see if @Pratik-Patel has this working and is an easy fix we can use. i will give it a try.

                        Thanks

                        1 Reply Last reply Reply Quote 0
                        • Pratik Patel
                          Pratik Patel last edited by

                          Hi @gs86,

                          I never worked on server side pagination and filter with QTable. I have tried to implement in QGrid but no luck yet.

                          Thanks

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