Vue 2 - Flexgrid: How to create pageSize select dropdown?

Posted by: eric.devwise on 4 February 2019, 1:06 am EST

  • Posted 4 February 2019, 1:06 am EST

    I have a flexgrid with pagination working, and on fetching:

      mounted(){
    console.log(supplier);
    // Get All Products From Clicked Supplier Name
    axios.get('/get_supplier_products/'+supplier)
    .then((response) => {
    (this.data = new wjCore.CollectionView(response.data.supplier_products,{
    pageSize:50
    }))
    .then(this.poNumber = response.data.poNumber);
    });
    },


    I created a <select> for pageSize that looks like:

              <select name="test" id="pageSize">
    <option :value="data.pageSize = 25">25</option>
    <option value=50>50</option>
    <option value=100>100</option>
    </select>


    The binding of the first option's :value works, however how would I continue to bind the next two options of 50 and 100? If I try, it gives me an infinite loop error.

    Here is all of my code:

    <template>
    <el-container>
    <el-header>
    <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item><a href="/createpo">Supplier List</a></el-breadcrumb-item>
    <el-breadcrumb-item>Product list</el-breadcrumb-item>
    </el-breadcrumb>
    </el-header>
    <el-main>
    <div class="toolBar">
    <!-- Search Input -->
    <div>
    <el-input
    type="text"
    class="gobalSearchBar"
    id="filter"
    clearable
    placeholder="search">
    <i slot="prefix" class="el-input__icon el-icon-search"></i>
    </el-input>
    </div>
    <el-button class="exportExcel saveBtn" type="info" @click="saveColumnLayout()">Save Column Layout</el-button>
    <el-button class="exportExcel loadBtn" type="primary" @click="loadColumnLayout()">Load Column Layout</el-button>
    <!-- Export As Excel -->
    <el-button class="exportExcel" type="primary" icon="el-icon-document" @click="exportExcel()">Export Excel</el-button>
    <!-- Create PO Instructions-->
    <el-alert
    title="Create a PO:"
    type="info"
    description="Fill in Order Qty(s) and Click Create PO Button"
    show-icon
    :closable="false">
    </el-alert>
    <div class="savePo">
    <el-button type="info" v-show="!save" @click="savePo">Save PO</el-button>
    <el-button type="success" v-show="save" @click="updatePo">Update PO</el-button>
    </div>
    <!-- Save PO To DB -->
    </div>

    <!-- MODAL CONTAINING PO FORM -->
    <!-- <el-dialog :title="getFormNum" :visible.sync="dialogFormVisible">
    <el-form :model="form">
    <el-form-item label="Quantity" :label-width="formLabelWidth">
    <el-input tyep="number"></el-input>
    </el-form-item> -->
    <!-- <wj-flex-grid></wj-flex-grid> -->
    <!-- </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogFormVisible=false">Create PO</el-button>
    </span>
    </el-dialog> -->
    <!-- END OF MODAL -->

    <!-- DataTable Grid -->
    <wj-flex-grid
    class="grid"
    id="theGrid"
    control="grid"
    :initialized="initGrid"
    :items-source="data"
    :allow-sorting="true"
    selection-mode="Row"
    header-visibility="All">

    <!-- Dynamic Columns -->
    <!-- <wj-flex-grid-column
    :col="col"
    v-for="col in columns"
    :key="col.id"
    width="*"
    :allow-sorting="true"
    :binding="col.binding"
    :header="col.header"
    :data-type="col.type">
    </wj-flex-grid-column> -->

    <wj-flex-grid-column binding="supplier" header="Supplier" dataType="1" :data-map="supplier" :is-read-only="true"></wj-flex-grid-column>
    <wj-flex-grid-column binding="sku" header="Sku"></wj-flex-grid-column>
    <wj-flex-grid-column binding="title" header="Title" :is-read-only="true"></wj-flex-grid-column>
    <wj-flex-grid-column binding="url" header="Image" :is-read-only="true"></wj-flex-grid-column>
    <wj-flex-grid-column binding="order_qty" header="Order Qty"></wj-flex-grid-column>
    <wj-flex-grid-column binding="asin" header="Asin"></wj-flex-grid-column>
    <wj-flex-grid-column binding="condition" header="Condition"></wj-flex-grid-column>
    <wj-flex-grid-column binding="sales-rank" header="Sales Rank"></wj-flex-grid-column>
    <wj-flex-grid-column binding="product-group" header="Product Group"></wj-flex-grid-column>
    <wj-flex-grid-column binding="total-quantity" header="Total Qty"></wj-flex-grid-column>
    <wj-flex-grid-column binding="sellable-quantity" header="Sellable Qty"></wj-flex-grid-column>
    <wj-flex-grid-column binding="unsellable-quantity" header="Unsellable Qty"></wj-flex-grid-column>
    <wj-flex-grid-column binding="inv-age-0-to-90-days" header="Inventory Age 0 to 90 Days"></wj-flex-grid-column>
    <wj-flex-grid-column binding="inv-age-91-to-180-days" header="Inventory Age 91 to 180 Days"></wj-flex-grid-column>
    <wj-flex-grid-column binding="inv-age-181-to-270-days" header="Inventory Age 181 to 270 Days"></wj-flex-grid-column>
    <wj-flex-grid-column binding="inv-age-271-to-365-days" header="Inventory Age 271 to 365 Days"></wj-flex-grid-column>
    <wj-flex-grid-column binding="inv-age-365-plus-days" header="Inventory Age 365 Plus Days"></wj-flex-grid-column>
    <wj-flex-grid-column binding="units-shipped-last-24-hrs" header="Units Shipped Last 24 Hrs"></wj-flex-grid-column>
    <wj-flex-grid-column binding="units-shipped-last-7-days" header="Units Shipped Last 7 Days"></wj-flex-grid-column>
    <wj-flex-grid-column binding="units-shipped-last-30-days" header="Units Shipped Last 30 Days"></wj-flex-grid-column>
    <wj-flex-grid-column binding="units-shipped-last-90-days" header="Units Shipped Last 90 Days"></wj-flex-grid-column>
    <wj-flex-grid-column binding="units-shipped-last-180-days" header="Units Shipped Last 180 Days"></wj-flex-grid-column>
    <wj-flex-grid-column binding="units-shipped-last-365-days" header="Units Shipped Last 365 Days"></wj-flex-grid-column>
    <wj-flex-grid-column binding="weeks-of-cover-t7" header="Weeks Of Cover T7"></wj-flex-grid-column>
    <wj-flex-grid-column binding="weeks-of-cover-t30" header="Weeks Of Cover T30"></wj-flex-grid-column>
    <wj-flex-grid-column binding="weeks-of-cover-t90" header="Weeks Of Cover T90"></wj-flex-grid-column>
    <wj-flex-grid-column binding="weeks-of-cover-t180" header="Weeks Of Cover T180"></wj-flex-grid-column>
    <wj-flex-grid-column binding="weeks-of-cover-t365" header="Weeks Of Cover T365"></wj-flex-grid-column>
    <wj-flex-grid-column binding="num-afn-new-sellers" header="Num AFN New Sellers"></wj-flex-grid-column>
    <wj-flex-grid-column binding="num-afn-used-sellers" header="Num AFN Used Sellers"></wj-flex-grid-column>
    <wj-flex-grid-column binding="currency" header="Currency"></wj-flex-grid-column>
    <wj-flex-grid-column binding="your-price" header="Your Price"></wj-flex-grid-column>
    <wj-flex-grid-column binding="sales-price" header="Sales Price"></wj-flex-grid-column>
    <wj-flex-grid-column binding="num-afn-new-sellers" header="Num AFN New Sellers"></wj-flex-grid-column>
    <wj-flex-grid-column binding="lowest-afn-new-price" header="Lowest AFN New Price"></wj-flex-grid-column>
    <wj-flex-grid-column binding="lowest-afn-used-price" header="Lowest AFN Used Price"></wj-flex-grid-column>
    <wj-flex-grid-column binding="lowest-mfn-used-price" header="Lowest MFN Used Price"></wj-flex-grid-column>
    <wj-flex-grid-column binding="qty-to-be-charged-ltsf-12-mo" header="Qty To Be Charged LTSF 12 MO"></wj-flex-grid-column>
    <wj-flex-grid-column binding="qty-in-long-term-storage-program" header="Qty In Long Term Storage Program"></wj-flex-grid-column>
    <wj-flex-grid-column binding="qty-with-removals-in-progress" header="Qty with Removals In Progress"></wj-flex-grid-column>
    <wj-flex-grid-column binding="projected-ltsf-12-mo" header="Projected LTSF 12 MO"></wj-flex-grid-column>
    <wj-flex-grid-column binding="per-unit-volume" header="Per Unit Volume"></wj-flex-grid-column>
    <wj-flex-grid-column binding="is-hazmat" header="Is Hazmat"></wj-flex-grid-column>
    <wj-flex-grid-column binding="in-bound-quantity" header="In Bound Qty"></wj-flex-grid-column>
    <wj-flex-grid-column binding="asin-limit" header="ASIN Limit"></wj-flex-grid-column>
    <wj-flex-grid-column binding="inbound-recommend-quantity" header="Inbound Recommend Qty"></wj-flex-grid-column>
    <wj-flex-grid-column binding="qty-to-be-charged-ltsf-6-mo" header="Qty To Be Charged LTSF 6 MO"></wj-flex-grid-column>
    <wj-flex-grid-column binding="projected-ltsf-6-mo" header="Projected LTSF 6 MO"></wj-flex-grid-column>
    <wj-flex-grid-column binding="status-detail" header="Status Detail"></wj-flex-grid-column>
    <wj-flex-grid-column binding="height" header="Height"></wj-flex-grid-column>
    <wj-flex-grid-column binding="length" header="Length"></wj-flex-grid-column>
    <wj-flex-grid-column binding="width" header="Width"></wj-flex-grid-column>
    <wj-flex-grid-column binding="sumdimmensions" header="Sum Dimmensions"></wj-flex-grid-column>
    <wj-flex-grid-column binding="weight" header="Weight"></wj-flex-grid-column>
    <wj-flex-grid-column binding="packaage" header="Package"></wj-flex-grid-column>
    <wj-flex-grid-column binding="itemsSold" header="Items Sold"></wj-flex-grid-column>
    <wj-flex-grid-column binding="prices" header="Prices"></wj-flex-grid-column>
    <wj-flex-grid-column binding="sales" header="Sales" format="c"></wj-flex-grid-column>
    <wj-flex-grid-column binding="currentPrice" header="Current Price" format="c"></wj-flex-grid-column>
    <wj-flex-grid-column binding="averageItemPrice" header="Average Item Price" format="c"></wj-flex-grid-column>
    <wj-flex-grid-column binding="maximumSoldPrice" header="Maximum Sold Price" format="c"></wj-flex-grid-column>
    <wj-flex-grid-column binding="minimumSoldPrice" header="Minimum Sold Price" format="c"></wj-flex-grid-column>
    <wj-flex-grid-column binding="itemsReturned" header="Items Returned"></wj-flex-grid-column>
    <wj-flex-grid-column binding="returnPercentage" header="Return Percentage"></wj-flex-grid-column>
    <wj-flex-grid-column binding="earnings" header="Earnings" format="c"></wj-flex-grid-column>
    <wj-flex-grid-column binding="averageEarningPerItem" header="Average Earning Per Item" format="c"></wj-flex-grid-column>
    <wj-flex-grid-column binding="marginPercentage" header="Margin Percentage"></wj-flex-grid-column>
    <wj-flex-grid-column binding="supplier_sku" header="Supplier Sku"></wj-flex-grid-column>




    <!-- Each Column Has A Filter -->
    <wj-flex-grid-filter></wj-flex-grid-filter>

    </wj-flex-grid>

    <!-- Pagination -->
    <div class="btn-group">
    <button type="button" class="btn btn-default"
    @click="data.moveToFirstPage()"
    :disabled="data.pageIndex <= 0">
    <span class="fas fa-fast-backward"></span>
    </button>
    <button type="button" class="btn btn-default"
    @click="data.moveToPreviousPage()"
    :disabled="data.pageIndex <= 0">
    <span class="fas fa-step-backward"></span>
    </button>
    <button type="button" class="btn btn-default" disabled style="width:100px">
    {{data.pageIndex + 1}}/{{data.pageCount}}
    </button>
    <button type="button" class="btn btn-default"
    @click="data.moveToNextPage()"
    :disabled="data.pageIndex >= data.pageCount - 1">
    <span class="fas fa-step-forward"></span>
    </button>
    <button type="button" class="btn btn-default"
    @click="data.moveToLastPage()"
    :disabled="data.pageIndex >= data.pageCount - 1">
    <span class="fas fa-fast-forward"></span>
    </button>
    <select name="test" id="pageSize">
    <option :value="data.pageSize = 25">25</option>
    <option value=50>50</option>
    <option value=100>100</option>
    </select>
    </div>
    </el-main>
    </el-container>
    </template>

    <script>

    import * as wjCore from 'wijmo/wijmo'
    import * as wjGrid from 'wijmo/wijmo.grid'
    import * as wjInput from 'wijmo/wijmo.input'
    import 'wijmo/wijmo.vue2.input'
    import 'wijmo/wijmo.vue2.grid.filter'
    import 'wijmo/wijmo.vue2.grid.grouppanel'
    import { CollectionView } from 'wijmo/wijmo';
    import * as wjGridXlsx from 'wijmo/wijmo.grid.xlsx'



    export default {
    name: 'PoProducts',
    data () {
    let dataMapTable = [
    { value: 1, text: "Haines" },
    { value: 2, text: "Marjam" },
    { value: 3, text: "Pearl Abrasives" },
    { value: 4, text: "Milwaukee" },
    { value: 5, text: "Orgill" },
    { value: 6, text: "NuHeat" },
    { value: 7, text: "Diablo" },
    { value: 8, text: "Simpson Strong Tie" }
    ]
    return {
    grid: null,
    data: new wjCore.CollectionView(),
    supplier: new wjGrid.DataMap(dataMapTable, "value", "text"),
    columns: [],
    rows: [],
    po: new wjCore.CollectionView(),
    poNumber: 0,
    poColumns: [],
    poFormData: [],
    save: false
    // dialogFormVisible: false,
    // form: {
    // name: ''
    // },
    // formLabelWidth: '80px'
    }
    },
    mounted(){
    console.log(supplier);
    // Get All Products From Clicked Supplier Name
    axios.get('/get_supplier_products/'+supplier)
    .then((response) => {
    (this.data = new wjCore.CollectionView(response.data.supplier_products,{
    pageSize:50
    }))
    .then(this.poNumber = response.data.poNumber);
    });
    },

    methods: {
    initGrid(grid) {

    grid.autoSizeColumns();

    this.grid = grid;

    grid.cellEditEnded.addHandler((s, e) => {
    if (e.panel.columns[e.col].binding != "order_qty") {
    return;
    }

    let poData = [];
    let row = e.panel.rows[e.row];
    console.log("Sku associated with row: ", row.dataItem.sku + " qty is: " + row.dataItem.order_qty);

    // Add or remove row sku & qty to and from poFormData array
    e.panel.rows.forEach(row => {
    if(row.dataItem.order_qty != undefined) {
    if(row.dataItem.order_qty > 0) {
    poData.push({po_number: this.poNumber, supplier: row.dataItem.supplier, supplier_sku: row.dataItem.supplier_sku, seller_sku: row.dataItem.sku, price: row.dataItem.currentPrice, qty: row.dataItem.order_qty});
    } else {
    poData.splice(row, 0);
    }
    }
    });
    this.poFormData = poData;
    console.log(this.poFormData);
    });

    // format top left to display edit icon
    grid.formatItem.addHandler((s,e)=>{
    if(s.topLeftCells == e.panel){
    e.cell.innerHTML = '<span class="wj-glyph-pencil col-picker-icon" style="color: orange"></span>';
    }
    });

    // create the column picker
    var theColumnPicker = new wjInput.ListBox(document.createElement('div'), {
    itemsSource: grid.columns,
    checkedMemberPath: 'visible',
    displayMemberPath: 'header',
    lostFocus: function () {
    wjCore.hidePopup(theColumnPicker.hostElement);
    }
    });
    wjCore.addClass(theColumnPicker.hostElement, 'col-picker');

    // show column picker
    let ref = grid.hostElement.querySelector('.wj-topleft');
    grid.hostElement.addEventListener('mousedown', function (e) {
    if (wijmo.hasClass(e.target, 'col-picker-icon')) {
    wjCore.showPopup(theColumnPicker.hostElement, ref, false, true, false);
    theColumnPicker.focus();
    e.preventDefault();
    }
    }, true);
    },
    saveColumnLayout() {
    var grid = wijmo.Control.getControl("#theGrid");
    localStorage['columns'] = grid.columnLayout;
    this.$message({
    message: 'Column layout saved.',
    type: 'success'
    })
    },
    loadColumnLayout() {
    var grid = wijmo.Control.getControl("#theGrid"),
    columnLayout = localStorage['columns'];
    if (columnLayout) {
    grid.columnLayout = columnLayout;
    }
    },
    savePo() {
    axios.post('/create_temp_po', this.poFormData)
    .then(response => {
    if(response.status == 200) {
    this.poSent()
    return this.save = true;
    }
    })
    .catch(function (error) {
    alert(error);
    });
    },
    updatePo() {
    axios.post('/updatePo', this.poFormData)
    .then(response => {
    if(response.status == 200) {
    this.poSent()
    }
    })
    .catch(function (error) {
    alert(error);
    });
    },
    poSent() {
    this.$notify({
    title: 'Success',
    message: 'PO has been saved',
    type: 'success'
    });
    },
    poError() {
    this.$notify({
    title: 'Error',
    message: 'PO could not be saved',
    type: 'error'
    });
    },

    exportExcel: function() {
    if(this.grid){
    wjGridXlsx.FlexGridXlsxConverter.save(this.grid, null, 'sample.xlsx');
    }
    }
    }
    }
    </script>

    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    .el-main .wj-control {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: auto;
    }
    .toolBar {
    display: flex;
    align-items: baseline;
    }
    .el-alert {
    margin-left: 20px;
    max-width: 500px;
    }
    .wj-cell.no-padding-cell {
    padding: 0px!important;
    }
    .el-input {
    min-width: 300px;
    }
    .exportExcel {
    margin: 0 0 0 20px;
    margin-bottom: 20px;
    }
    .saveBtn {
    background: transparent;
    color: #555;
    border-color: #555;
    outline: none;
    }
    .loadBtn {
    background: transparent;
    color: royalblue;
    border-color: royalblue;
    outline: none;
    }
    .savePo {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    }
    .grid {
    height: auto;
    max-height: 600px;
    }

    h1, h2 {
    font-weight: normal;
    }
    ul {
    list-style-type: none;
    padding: 0;
    }
    li {
    display: inline-block;
    margin: 0 10px;
    }
    .fa-fast-forward,
    .fa-step-forward,
    .fa-fast-backward,
    .fa-step-backward {
    color: #333;
    }
    </style>
    <style>
    /*.wj-state-multi-selected{
    background: rgba(0,0,0,0.4) !important;
    }
    .wj-state-selected{
    background: green !important;
    } */
    /* div[wj-part="div-valuses"]{
    max-height:200px;
    } */
    </style>



  • Replied 5 February 2019, 1:40 am EST

    Hi Eric,

    Please give us sometime to look into this. We shall get back to you on this tomorrow.
  • Replied 5 February 2019, 1:46 am EST

    Sure and thank you!
  • Replied 5 February 2019, 7:39 am EST

    Hello Eric,

    For this, you need to use v-model to update value and watch to update CollectionView pageSize property.

    For reference, please refer to the following demo sample:
    https://stackblitz.com/edit/vue-y6rcv7?file=index.js

    Hope it helps!

    ~Manish
  • Replied 12 February 2019, 7:47 pm EST

    Thanks! One question:

    I want to set the initial pageSize to 50. I have tried doing this in the mounted() and also in data { pageSize: 50 }. Which one of these is correct?

    Finally, I see it inits to 50 however the pageCount does not reflect correctly until selecting a pageSize option and then selecting pageSize option 50 again.

    To show I've included 3 screenshots:

    A - Inital pageSize 50 but no pageCount working
    B - Select another option and then select 50 again
    C - Now pageSize is 50 and pageCount works


  • Marked as Answer

    Replied 13 February 2019, 1:06 am EST

    Hi Eric,

    From the description, it seems like, you might have forgotten to initialize the pageSize when new collectionView is assigned to this.data.
    Please make sure that if the collectionView instance is changed then pageSize is copied correctly to the new collectionView instance as well.
    You may also refer to the following updated sample:
    https://codesandbox.io/s/ko1m2k4nwv
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels