Virtualmode and individual pagesizeoptions

[MarcoParticipant]

Hello,

I am using a grid with virtualmode. The data is retrieved via AJAX call. The grid is displayed almost fine, almost. I have different page size options which are working well up to the forelast page. Switching to the last page has the affect that the paging bar disappears. According to web developer tools of Firefox 31.0 the paging bar with the ID “pagerjqxgrid” is still there, but I can’t see it anymore. I threw out already almost everything from our source code to replace it with the source code of the for virtual data (demos/jqxgrid/virtualdata.htm), but without any success.
So here’s my source code

     // prepare the data
      var source = {
        data: collectValues("#div_extended_search", collectValues("#div_simple_search")),
        datatype: "json",
        datafields: [{ name: 'ID' }, { name: 'Code' }, { name: 'Name' }, { name: 'EditLink'}],
        type: "post",
        root: 'rows',
        url: '@Url.Action("jqxGrid")',
        sort: function () {
          $("#jqxgrid").jqxGrid('updatebounddata', 'sort');
        },
        beforeprocessing: function (returndata) {
          source.totalrecords = returndata.row_count;
        }
      };

      var dataAdapter = new $.jqx.dataAdapter(source);
      var linkrenderer = getLinkRenderer();
      var dataAdapter = new $.jqx.dataAdapter(source);
      $("#jqxgrid").on('pagechanged', function () {
        var datainfo = $("#jqxgrid").jqxGrid('getdatainformation');
        var paginginfo = datainfo.paginginformation;
      });
      $("#jqxgrid").jqxGrid({
        height: '100%',
        width: 850,
        autoheight: true,
        pagesizeoptions: ['10', '15', '20', '25', '50', '100'],
        source: dataAdapter,
        virtualmode: true,
        pageable: true,
        rendergridrows: function (obj) {
          return obj.data;
        }, 
        columns: [
				{ text: 'ID', datafield: 'ID', width: 50, hidden: true },
				{ text: 'Code', datafield: 'Code', width: 100 },
				{ text: 'Name', datafield: 'Name' },
				{ text: 'Bearbeiten', width: 100, cellsrenderer: linkrenderer, dataField: 'EditLink' }
			]
      });

      $("#jqxgrid").on("sort", function (event) {

        var sortinformation = event.args.sortinformation;
        var sortdirection = sortinformation.sortdirection.ascending ? "ascending" : "descending";
        if (!sortinformation.sortdirection.ascending && !sortinformation.sortdirection.descending) {
          sortdirection = "null";
        }
      });
      

Any ideas how I can solve this issue?
Best regards
Marco

[Peter StoevKeymaster]

Hello Marco,

Why do you set “height” to “100%” and then set autoheight to true? You should use either the one or another.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[MarcoParticipant]

That was because the pager bar is cut off, and I still couldn’t find out, why. So this was an acceptable workaround. The image shown below illustrates the described behavior.

[MarcoParticipant]

Ooops, editing only 2 times possible. So here’s another link to see the image.

Kind regards
Marco

[Peter StoevKeymaster]

Hi Marco,

Would you be able to share a jsfiddle.net sample for that behavior so we or someone else would be able to help you?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts