Add all results option in pagesizeoptions

[ronakParticipant]

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>

[ronakParticipant]

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 DashevParticipant]

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

[ronakParticipant]

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);

[Yavor DashevParticipant]

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

[ronakParticipant]

Hi, Yavor Dashev.
Thank you 🙂

[Author]

Posts