Problem with grid rendering with virtual scrolling after filter refreshes the data

[DLadnerParticipant]

I’m using the Grid with both virtual scrolling and server-side filtering on ASP.NET.  It works fine, except that after I apply a filter and the data is fetched from the server, the rendered grid cells show up empty. You can see the alternate row coloring, but the actual cell text is missing.  If I click on the scroll-down arrow to go down a row, then the text pops into place.

I’ve tried rebinding the grid with both
$(“#jqxgrid”).jqxGrid({ source: dataAdapter });
and
$(“jqxgrid”).jqxGrid(‘updatebounddata’);

I’m seeing identical results with both.

Here is the code I’m using:

var NeedToRefreshGrid = false; 
function BuildFilterQueryString(data)
{
 var str = '';
 for (var prop in data)
 {
   if (data.hasOwnProperty(prop))
   {
     str += prop + '=' + data[prop] + '&';
   }
 }
 return str.substr(0, str.length - 1);
 }

// prepare the data
 var source =
 {
 datatype: "xml",
 datafields:
 [
 { name: 'nursery_level_code', type:'string' },
 { name: 'description', type:'string' },
 { name: 'FullName', type:'string' },
 { name: 'baby_stageCode', type:'string' },
 { name: 'baby_stageName', type:'string' },
 { name: 'HeadResultIn', type:'string' },
 { name: 'InDate', type:'date' },
 { name: 'HeadResultOut', type:'string' },
 { name: 'OutDate', type:'date' },
 { name: 'gender', type:'string' },
 { name: 'birth_date', type:'date' },
 { name: 'entered_on', type:'date' },
 { name: 'birthing_facility_id', type:'string' },
 { name: 'birth_facility', type:'string' },
 { name: 'IDNumber', type:'string' },
 { name: 'stateCode', type:'string' },
 { name: 'stateName', type:'string' },
 { name: 'tracking_status', type:'string' },
 { name: 'tsc', type:'string' },
 { name: 'protocol_used', type:'string' },
 { name: 'responsible_facility', type:'string' },
 { name: 'SourceFacilityName', type:'string' },
 { name: 'Doctor', type:'string' },
 { name: 'next_ra', type:'string' }
 ],
 record: "Table",
 url: 'BabyList.aspx/GetBabyList',
 formatdata: function (data)
 {
 return BuildFilterQueryString(data);
 },
 filter: function ()
 {
 // update the grid and send a request to the server.
 $("#jqxgrid").jqxGrid('updatebounddata', 'filter');
 NeedToRefreshGrid = true;
 }
 };

var dataAdapter = new $.jqx.dataAdapter(source,
 {
 contentType: 'application/json; charset=utf-8',
 loadError: function (jqXHR, status, error) {
 alert("Data Load Error:" + status + "\n\n" + error + "\n\n" + jqXHR.responseText);
 }, 
 downloadComplete: function ()
 { 
 // update the totalrecords count.
 $.ajax(
 {
 url: 'BabyList.aspx/GetTotalRowsCount',
 contentType: 'application/json; charset=utf-8',
 async: false,
 success: function (data)
 {
 source.totalrecords = data.d;
 }
 });
 }
 }
 );

$("#jqxgrid").jqxGrid(
 {
 width: $("#babyList").width(),
 height: $("#babyList").height(),
 source: dataAdapter,
 theme: 'redmond',
 virtualmode: true,
 pageable: false,
 filterable: true,
 rendergridrows: function (obj)
 { 
 return obj.data;
 },
 altrows: true,
 editable: false,
 selectionmode: 'singlerow',
 columns:
 [
 { text: 'Baby Name', datafield: 'FullName', width: 250 },
 { text: 'Medical ID', datafield: 'IDNumber', width: 150 },
 { text: 'Birth Date', datafield: 'birth_date', cellsalign: 'right', width: 100 },
 { text: 'Inpatient', datafield: 'HeadResultIn', width: 100 },
 { text: 'IP Date', datafield: 'InDate', width: 100 },
 { text: 'Outpatient', datafield: 'HeadResultOut', width: 100 },
 { text: 'Action', datafield: 'stateName', width: 100 },
 { text: 'Gender', datafield: 'gender', width: 100 },
 { text: 'Nursery', datafield: 'description', width: 100 },
 { text: 'Birth Facility', datafield: 'birth_facility', width: 200 },
 { text: 'Status', datafield: 'tracking_status', width: 100 },
 { text: 'Doctor', datafield: 'Doctor', width: 100 },
 { text: 'Entered On', datafield: 'entered_on', width: 100 },
 { text: 'Source Facility', datafield: 'SourceFacilityName', width: 100 },
 { text: 'Next Appt.', datafield: 'next_ra', width: 100 },
 ]
 });

function RefreshGridAfterFilter()
 {
 //$("#jqxgrid").jqxGrid({ source: dataAdapter });
 $("jqxgrid").jqxGrid('updatebounddata');
 $("#jqxgrid").jqxGrid('scrollto', 0, 0);
 $("#jqxgrid").jqxGrid('render');
 }

$("#jqxgrid").on("bindingcomplete", function (event)
 {
 if (NeedToRefreshGrid == true)
 {
 RefreshGridAfterFilter();
 NeedToRefreshGrid = false;
 }
 });

[Peter StoevKeymaster]

Hi DLadner,

We will investigate the reported behavior. Thank you for the feedback.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[DLadnerParticipant]

Thank you for investigating it Peter. In the meantime, is there anything I can do to work around it? I’ve tried calling the “refresh”, “render”, and “refreshdata” API functions, but none of them work. I was thinking that I could try calling the same “scroll down one row” code that runs when you click on the down-arrow, but I don’t know what the function for that is.

[Author]

Posts