jQuery UI Widgets Forums Vue Add all results option in pagesizeoptions

This topic contains 5 replies, has 2 voices, and was last updated by  ronak 1 year, 3 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • ronak
    Participant

    hey, there.
    I have a jqxgrid table in vueJS.
    I want to add an all results option in :pagesizeoptions.
    below is what I am trying to do. please help

    <JqxGrid ref             = "test"
             :width           = "getWidth"
             :columnsresize   = "true"
             :pageable        = "true"
             :autorowheight   = "true"
             :autoheight      = "true"
             :columnsheight   = "55"
             :selectionmode   = "'checkbox'"
             :altrows         = "true"
             :pagesizeoptions = "['10', '25', '50', '100','All Results']"
             @bindingcomplete = "onBindingcomplete($event)"
             @cellclick       = "testfun($event)"
             :showaggregates="true" :showstatusbar="true" :pagermode="'default'"
             :sortable="true" :showsortmenuitems="false">
    </JqxGrid>
    • This topic was modified 1 year, 4 months ago by  ronak.

    ronak
    Participant

    I am trying to update a :pagesize on pagesizechanged event. but it didn’t change the page size. please help.

    <JqxGrid ref             = "test"
             :width           = "getWidth"
             :columnsresize   = "true"
             :pageable        = "true"
             :autorowheight   = "true"
             :autoheight      = "true"
             :columnsheight   = "55"
             :selectionmode   = "'checkbox'"
             :altrows         = "true"
             :pagesize="pagesize"
             :pagesizeoptions = "['10', '25', '50', '100','All Results']"
             @bindingcomplete = "onBindingcomplete($event)"
             @cellclick       = "testfun($event)"
             :showaggregates="true" :showstatusbar="true" :pagermode="'default'"
             :sortable="true" :showsortmenuitems="false">
    </JqxGrid>
    data: function () {
                return {
                    pagesize: 10
                }
            },
    onPagesizechanged(){
                    const value = this.$refs.test.getdatainformation();
                    this.pagesize = value.rowscount;
                }

    Yavor Dashev
    Participant

    Hi Ronak,

    Unfortunately the paging option doesn’t support the functionality you aim to achieve, but however there is a workaround for this.
    Here is a little code snippet for it:

    data: function () {
                return {
                    pagesize:10,
                    pagesizeoptions:[ '25', '50', '100','All'],
                    getWidth: 800,
                    dataAdapter: new jqx.dataAdapter(this.source),
                    columns: [
                        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
                        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                        { text: 'Contact Title', datafield: 'Title', width: 100 },
                        { text: 'Address', datafield: 'Address', width: 100 },
                        { text: 'City', datafield: 'City', width: 100 },
                        { text: 'Country', datafield: 'Country' }
                    ]
                }
            },
            methods: {
                onPagesizechanged: function ($event) {
                    const value = this.$refs.test.getdatainformation();
                    console.log($event.args)
    
                    if($event.args.pagesize =='10'){
                        this.$refs.test.pagesize = 150
                    }
                  
            }
            },

    Quick explanation of it when we set the pagesizeoptions like in my snippet when you select the All option it will select the default value of the pagesize which is 10 (this is the default functionality of the pager ) and the we check if the value is 10 and you can bind to this to implement the functionality you want.
    However the problem is here that you lose the option to set the grid page to 10 rows but maybe this solution may fit you.

    Please, do not hesitate to contact us if you have any additional questions.

    Best Regards,
    Yavor Dashev
    jQWidgets team
    https://www.jqwidgets.com


    ronak
    Participant

    hey, Yavor Dashev.
    Thank you for your suggestion.

    I am doing it this way now and it is working, but not in the way it should work. The table is taking too long to load. and I can’t find any after the complete event for particular this situation. below is my code. if you have any idea about this, please share it with me. thank you
    screen shot : – https://tinyurl.com/yzguarkr

    let self       = this;
                    let value      = this.$refs.test.getdatainformation();
                    let pageNumber = $('.jqx-max-size .jqx-dropdownlist-state-normal input[type=hidden]').val(); // get the clickable value via jQuery
                    let totalRows  = value.rowscount;
                   
                    this.loader = true;
    
                    setTimeout(function(){
                        if(pageNumber === '10') {
                            self.$refs.test.pagesize = 10;
                            self.loader = false;
                        }else if(pageNumber === '25'){
                            self.$refs.test.pagesize = 25;
                            self.loader = false;
                            console.log('test - 2');
                        }else if(pageNumber === '50'){
                            self.$refs.test.pagesize = 50;
                            self.loader = false;
                            console.log('test - 3');
                        }else {
                            console.log('test - 4');
                            self.$refs.test.pagesize = totalRows;
                            self.loader = false;                       
                        }
                    }, 3000);
    • This reply was modified 1 year, 4 months ago by  ronak.
    • This reply was modified 1 year, 4 months ago by  ronak.

    Yavor Dashev
    Participant

    Hi ronak,

    Please take my apologies for the late reply but this was quite a specific case.
    However one solution I made was using the pagerenderer function to create a dropdownlist and from it to select the rows count depending on the value that is selected and also it has ‘all rows’ option which displays all the rows.
    One thing to note is that the pagerenderer is overriding the default pager functionality and if you want buttons to go to the next page and etc you can create that logic yourself.More info about it here :https://www.jqwidgets.com/vue-components-documentation/documentation/jqxgrid/vue-datagrid-paging.htm?search=grid

    And the code example I made for you:

      <JqxGrid ref="myGrid"
         
                width="850" :source="source" :columns="columns" :autoheight="true" :pageable="true"
                :pagerrenderer="pagerrenderer"
                :pagesize='pagesize'
                :editable="true" :selectionmode="'singlecell'">
        </JqxGrid>
      methods: {
             
                pagerrenderer: function(){
                    let ref = this
                    
                    let rows = ref.$refs.myGrid.getdatainformation()
                   
                    let totalRows  = rows.rowscount;
                       
                    let element = $("<div style='margin-top: 5px; width: 100%; height: 100%;'></div>");
                    let dropdownList = $(

    <select name=”pages” id=”pages”>
    <option value=”10″>10</option>
    <option value=”20″>20</option>
    <option value=”50″>50</option>
    <option value=”All”>All</option>
    </select>`)

    dropdownList.width(50);
    dropdownList.on(‘change’, function ( ){
    let selectedValue = this.value
    if(selectedValue == ‘All’){
    ref.$refs.myGrid.pagesize= totalRows
    }
    else {
    ref.$refs.myGrid.pagesize= parseInt(selectedValue)
    }
    })
    dropdownList.appendTo(element);

    return element;
    }

    }
    `

    Please, do not hesitate to contact us if you have any additional questions.

    Best Regards,
    Yavor Dashev
    jQWidgets team
    https://www.jqwidgets.com

    • This reply was modified 1 year, 4 months ago by  Yavor Dashev.

    ronak
    Participant

    Hi, Yavor Dashev.
    Thank you 🙂

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.