Applying Custom Filtering With remote data leaves empty rows in grid

[ExlordParticipant]

        var columns = @Html.Raw(ViewBag.columns);
        var datafields= @Html.Raw(ViewBag.dataFields);
        var url = '@ViewBag.url';
        var lastGridUrl = url;
        var source;
        var gridOptions;
        var dataadapter;
        var _grid;
        var dateFrom;
        var dateFromHidden;
        var dateTo;
        var dateToHidden;
        var removeFilterBtn;
        var exportForm;

// prepare the data
  source = {
    datatype: "json",
    datafields: datafields,
    url: url,
    // update the grid and send a request to the server.
    filter: function () {
      _grid.jqxGrid('updatebounddata', 'filter');
    },
    // update the grid and send a request to the server.
    sort: function () {
      _grid.jqxGrid('updatebounddata', 'sort');
    },
    root: 'Rows',
    beforeprocessing: function (data) {
      source.totalrecords = data.TotalRows;
    },
    id: 'Id',
  };
  gridOptions = {
    filterable: true,
    sortable: true,
    autoheight: true,
    pageable: true,
    virtualmode: true,
    width: '100%',
    showfilterrow: true,
    rtl: true,
    autoshowfiltericon: true,
    columnsresize: true,
    selectionmode: 'checkbox',
    rendergridrows: function (obj) {
      return obj.data;
    },
    columns: columns,
  };
  dataadapter = new $.jqx.dataAdapter(source, {
    loadError: function (xhr, status, error) {
      console.error(error);
    },
    beforeSend(jqXHR, settings) {
      if (window.lastGridUrl)
        lastGridUrl = settings.url;
    }
  });

$(document).ready(function(){                       
            _grid = $("#jqxgrid");
            _grid.jqxGrid(gridOptions);
            _grid.jqxGrid('localizestrings', jqxGridLocalizationObj);
            _grid.jqxGrid('source', dataadapter);
        });

        function applyFilter(){

            var filtergroup = new $.jqx.filter();
            var filter_and_operator = 0;
            var hasFilter = false;

            var date = dateFromHidden.val().trim();
            if(date && date.length){
                var filter = filtergroup.createfilter('datefilter', date, 'GREATER_THAN_OR_EQUAL');
                filtergroup.addfilter(filter_and_operator, filter);
                hasFilter = true;
            }

            date = dateToHidden.val().trim();
            if(date && date.length){
                var filter = filtergroup.createfilter('datefilter', date, 'LESS_THAN_OR_EQUAL');
                filtergroup.addfilter(filter_and_operator, filter);
                hasFilter = true;
            }

            if(hasFilter){
                _grid.jqxGrid('addfilter', 'RequestDate', filtergroup);
                _grid.jqxGrid('applyfilters');
                removeFilterBtn.show();
            }
        }

Hi,
My initial grid load 3 rows from server.
When applyFilter() is called the data is filtered correctly from the server and returns 1 row of data.
The grid showing that 1 row BUT also there is still 2 empty rows in the grid. How can i get rid of those empty rows?

[ExlordParticipant]

Anyone?
I just noticed the the pager is not getting updated either, it still thinks that the grid has the full set of the rows!!!

[ExlordParticipant]

Wooooops sorry the problem was on my server side filtering, I was getting the total row count before applying the filters :D, that was messing up the pager …,

But this is still a bug, if my data contains only 1 row after filtering the grid should NOT create extra empty rows just because totalRowsCount says so!

[HristoParticipant]

Hello Exlord,

I would like to suggest you look at this demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverfiltering_paging_and_sorting.htm?light
(if everything is correctly set, it cannot produce such issue – with empty rows)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts