I recently upgraded to IgniteUI 18.2.83.
I have used the AppendRowsOnDemand feature for a long time and I have found that some users are unable to scroll down and load more records if their browser is zoomed in or out to a certain level. Once I set their browser's zoom level back to normal it usually fixes the problem. However, in this new version of IgniteUI I now have some users who cannot scroll down to load more records no matter what. I do not have this problem when I use the system, but some of my other users do.
Has anyone run into this problem before? I am using jquery 3.4.1 because my system admins have recently required me to move to the newest version of the jquery library.
Here is a sample of how I configure the AppendRowsOnDemand feature in my grid:
{ name: "AppendRowsOnDemand", type: "remote", recordCountKey: "TotalRowCount", chunkIndexUrlKey: "ChunkIndex", chunkSizeUrlKey: "ChunkSize", chunkSize: 30, loadTrigger: "auto" }
Hello Jack,
Thank you for posting in our forum.
Do the users perhaps have zoom applied on the system level? For example on Windows from their Display settings -> Scale and Layout settings, there’s an option to set bigger scale in %.
Could you also check the following:
I’m looking forward to your reply.
Regards,
Maya Kirova
I checked their Windows display settings and their zoom is set to the default value of 100%.
All of the users who report this behavior are currently using Chrome version 77.0.3865.120 on a Windows PC.
I have had users report this issue in the past when I was using jQuery 1.11 so it is not exclusive to jQuery 3.4.1.
I am currently using jQuery UI version 1.12.1.
Could you check and let me know the exact grid version? You can check by executing the following code in the console:
$.ui.igGrid.version
Also does this occur only when the feature type is remote?
Is there something else special about the environment on which it reproduces vs the environments where it does not? For example, are perhaps some of the environments touch enabled? Do they have different screen resolutions?
I wasn’t able to reproduce the issue where you cannot scroll down even if the browser zoom is the default one (100%), with jQuery 3.4.1 and jQuery UI 1.12.1 on Chrome - Version 77.0.3865.120 (Official Build) (64-bit) .
While the fact that it does not work when zoomed is indeed an issue, I’m not sure it is the exact same one as the one you have encountered now (with no zoom).
As such it would help if you can share as much information as possible on the environment where it reproduces, the exact version of the grid and if possible the full grid definition so that we can try to replicate the scenario as closely as possible in order to ensure it can be correctly addressed.
The grid version is 18.2.83.
I checked each of the computers that are reporting this issue and they are all on Windows using the same version of Chrome and they are all using 1920x1080 resolution.
Something that might be worth noting is that they are all using multiple monitors.
Here is the entire code snippet that defines my grid:
function initializeHoursGrid() { var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; // get the current date var current_date = new Date(); // calculate which month was last month var last_month = current_date.addMonths(-1).getMonth() + 1; // reset to the current date current_date = new Date(); // calculate which month was two months ago var two_months_ago = current_date.addMonths(-2).getMonth() + 1; // reset to the current date current_date = new Date(); // calculate which month was three months ago var three_months_ago = current_date.addMonths(-3).getMonth() + 1; // reset to the current date current_date = new Date(); // calculate which month was four months ago var four_months_ago = current_date.addMonths(-4).getMonth() + 1; var userTypeID = ($("#LBLUserTypeID").val()); var optionWindowWidth; //provide "Return Hours" button to "Lead Technicians" and higher if (userTypeID >= 550) { var optionString = "<button type=\"button\" class=\"hidden background-control-button ${RowBackgroundClass}\"></button>" + "<span style=\"" + ($("#LBLUserTypeID").val() >= userTypes.leadTechnician || $("#LBLUserID").val() == users.christian ? "display: inline-block;" : "display: none;") + "\"><button type=\"button\" class=\"btn btn-danger btn-sm\" title=\"Delete this Hour Entry\" onclick=\"deleteHours('${ID}');\"><i class=\"fa fa-trash-o\"></i></button> </span>" + "<button type=\"button\" class=\"btn btn-info btn-sm\" title=\"Edit this entry\" onclick=\"getDataForOneHourEntry('${ID}');\"><i class=\"fa fa-edit\"></i></button> " + "<button type=\"button\" class=\"btn btn-primary btn-sm\" title=\"Return Hour Entry\" onclick=\"returnHours('${ID}');\"><i class=\"fa fa-refresh\"></i></button> " + "<button type=\"button\" class=\"btn btn-success btn-sm\" style=\"${PayContractorStyle}\" title=\"Pay a Contractor for this entry\" onclick=\"promptUserToPayContractor('${ID}');\"><i class=\"fa fa-money\"></i></button>"; optionWindowWidth = '120px' } else { var optionString = "<button type=\"button\" class=\"hidden background-control-button ${RowBackgroundClass}\"></button>" + "<span style=\"" + ($("#LBLUserTypeID").val() >= userTypes.leadTechnician || $("#LBLUserID").val() == users.christian ? "display: inline-block;" : "display: none;") + "\"><button type=\"button\" class=\"btn btn-danger btn-sm\" title=\"Delete this Hour Entry\" onclick=\"deleteHours('${ID}');\"><i class=\"fa fa-trash-o\"></i></button> </span>" + "<button type=\"button\" class=\"btn btn-info btn-sm\" title=\"Edit this entry\" onclick=\"getDataForOneHourEntry('${ID}');\"><i class=\"fa fa-edit\"></i></button> " + //"<button type=\"button\" class=\"btn btn-success btn-sm\" title=\"Change Billing Info for this entry\" onclick=\"getBillingInfoForOneHourEntry('${ID}');\"><i class=\"fa fa-dollar\"></i></button> " + "<button type=\"button\" class=\"btn btn-success btn-sm\" style=\"${PayContractorStyle}\" title=\"Pay a Contractor for this entry\" onclick=\"promptUserToPayContractor('${ID}');\"><i class=\"fa fa-money\"></i></button>"; optionWindowWidth = '100px' } // calculate the height of the grid var window_height = window.innerHeight * 0.65; // initialize the default filter for the "employee" field var default_filter_employee = []; // if it's a high level user, then get their filtering/sorting preferences if ($("#LBLUserTypeID").val() > userTypes.clientSystemAdmin) { default_filter_employee = [{ cond: "me" }]; } $("#GRIDHours").igGrid({ columns: [ { headerText: "Options", key: "Options", dataType: "string", width: optionWindowWidth, unbound: true, template: optionString }, { headerText: "ID", key: "ID", dataType: "string", hidden: true }, { headerText: "Date", key: "EntryDate", width: "90px", dataType: "date" }, { headerText: "Client", key: "ClientName", width: "160px", dataType: "string" }, { headerText: "ETV Employee", key: "UserName", width: "115px", dataType: "string" }, { headerText: "Type", key: "HourType", dataType: "string" }, { headerText: "HourTypeID", key: "HourTypeID", dataType: "number", hidden: true }, { headerText: "Qty", key: "Hours", width: "60px", dataType: "number" }, { headerText: "Total ($)", key: "Price", width: "70px", dataType: "number" }, { headerText: "Notes", key: "Notes", dataType: "string", template: "<p class='grid-fixed-row-height'>${Notes}</p>" }, { headerText: "Billable", key: "Billable", width: "75px", dataType: "bool" }, { headerText: "Billed", key: "Billed", width: "60px", dataType: "bool" }, { headerText: "Overtime", key: "OverTime", width: "85px", dataType: "bool" }, { headerText: "Expedited", key: "Expedited", dataType: "bool", hidden: true }, { headerText: "On Site", key: "OnSite", width: "70px", dataType: "bool" }, { headerText: "Invoice #", key: "InvoiceNumber", width: "90px", dataType: "string" }, { headerText: "Created", key: "CreatedTS", width: "100px", dataType: "date", hidden: true }, { headerText: "Ticket #", key: "TicketNumber", width: "100px", dataType: "string" }, { headerText: "Barcode", key: "Barcode", width: "100px", dataType: "string" }, { headerText: "PayContractorStyle", key: "PayContractorStyle", dataType: "string", hidden: true }, { headerText: "RowBackgroundClass", key: "RowBackgroundClass", dataType: "string", hidden: true } ], features: [ { name: "Tooltips", visibility: "overflow", showDelay: 0, hideDelay: 0 }, { name: "AppendRowsOnDemand", type: "remote", recordCountKey: "0.TotalRowCount", chunkIndexUrlKey: "ChunkIndex", chunkSizeUrlKey: "ChunkSize", chunkSize: 30, loadTrigger: "auto" }, { name: "Updating", enableAddRow: false, editMode: "none", enableDeleteRow: false, columnSettings: [ { columnKey: "Options", editorOptions: { readOnly: true, type: "string", disabled: true } }, { columnKey: "ID", editorOptions: { readOnly: true, type: "string", disabled: true } }, { columnKey: "EntryDate", editorOptions: { readOnly: true, type: "string", disabled: true } }, { columnKey: "ClientName", editorOptions: { readOnly: true, type: "string", disabled: true } }, { columnKey: "UserName", editorOptions: { readOnly: true, type: "string", disabled: true } }, { columnKey: "HourType", editorOptions: { readOnly: true, type: "string", disabled: true } }, { columnKey: "HourTypeID", editorOptions: { readOnly: true, type: "number", disabled: true } }, { columnKey: "Hours", editorOptions: { readOnly: true, type: "number", disabled: true } }, { columnKey: "Price", editorOptions: { readOnly: true, type: "number", disabled: true } }, { columnKey: "Notes", editorOptions: { readOnly: true, type: "string", disabled: true } }, { columnKey: "InvoiceNumber", editorOptions: { readOnly: true, type: "string", disabled: true } }, { columnKey: "TicketNumber", editorOptions: { readOnly: true, type: "string", disabled: true } }, { columnKey: "PayContractorStyle", editorOptions: { readOnly: true, type: "string", disabled: true } } ] }, { name: "Filtering", allowFiltering: true, caseSensitive: false, type: "remote", mode: "simple", filterDialogContainment: "window", filterExprUrlKey: "filter", columnSettings: [ { columnKey: "Options", allowFiltering: false }, { columnKey: "ID", allowFiltering: false }, { columnKey: "EntryDate", allowFiltering: true, customConditions: { thisMonth: { labelText: "This Month", expressionText: "thisMonth", requireExpr: false }, lastMonth: { labelText: "Last Month", expressionText: "lastMonth", requireExpr: false }, twoMonthsAgo: { labelText: monthNames[two_months_ago - 1], expressionText: monthNames[two_months_ago - 1], requireExpr: false }, threeMonthsAgo: { labelText: monthNames[three_months_ago - 1], expressionText: monthNames[three_months_ago - 1], requireExpr: false }, fourMonthsAgo: { labelText: monthNames[four_months_ago - 1], expressionText: monthNames[four_months_ago - 1], requireExpr: false }, lastYear: { labelText: "Last Year (" + (((new Date()).getYear() - 1) + 1900) + ")", expressionText: "lastYear", requireExpr: false }, thisYear: { labelText: "This Year (" + ((new Date()).getYear() + 1900) + ")", expressionText: "thisYear", requireExpr: false } }, conditionList: ["thisMonth", "lastMonth", "twoMonthsAgo", "threeMonthsAgo", "fourMonthsAgo", "lastYear", "thisYear"], }, { columnKey: "UserName", allowFiltering: true, customConditions: { me: { labelText: "Me", expressionText: "me", requireExpr: false }, technicians: { labelText: "Technicians", expressionText: "technicians", requireExpr: false }, techniciansPlus: { labelText: "Technicians (include Jacky and Pete)", expressionText: "techniciansPlus", requireExpr: false }, programmers: { labelText: "Programmers", expressionText: "programmers", requireExpr: false }, web: { labelText: "Web", expressionText: "web", requireExpr: false } }, conditionList: ["contains", "doesNotContain", "me", "technicians", "techniciansPlus", "programmers", "web"], defaultExpressions: default_filter_employee }, { columnKey: "ClientName", allowFiltering: true, conditionList: ["contains", "doesNotContain"] }, { columnKey: "HourType", allowFiltering: true, conditionList: ["contains", "doesNotContain"] }, { columnKey: "HourTypeID", allowFiltering: true }, { columnKey: "Hours", allowFiltering: true, conditionList: ["greaterThan", "lessThan", "equals"] }, { columnKey: "Price", allowFiltering: true, conditionList: ["greaterThan", "lessThan", "equals"] }, { columnKey: "On Loan", allowFiltering: true, conditionList: ["true", "false"] }, { columnKey: "Billable", allowFiltering: true, conditionList: ["true", "false"] }, { columnKey: "Billed", allowFiltering: true, conditionList: ["true", "false"] }, { columnKey: "OverTime", allowFiltering: true, conditionList: ["true", "false"] }, { columnKey: "Expedited", allowFiltering: true, conditionList: ["true", "false"] }, { columnKey: "OnSite", allowFiltering: true, conditionList: ["true", "false"] }, { columnKey: "InvoiceNumber", allowFiltering: true, conditionList: ["contains", "doesNotContain"] }, { columnKey: "TicketNumber", allowFiltering: true, conditionList: ["contains", "doesNotContain"] }, { columnKey: "Barcode", allowFiltering: true, conditionList: ["contains", "doesNotContain"] } ], dataFiltered: function (evt, ui) { var filteringExpressions = $("#GRIDHours").data("igGrid").dataSource.settings.filtering.expressions; var filteredHoursSum = getTotalNumberOfHoursBasedOnFilteringConditions(filteringExpressions); $("#TXTTotalHoursShown").val(filteredHoursSum); } } ], dataRendered: function (evt, ui) { console.log("data rendered event fired"); // apply default filters if this flag indicates that they have not been applied yet if ($("#LBLMainGridDefaultFilterFlag").val() === "true") { applyDefaultFilters(); console.log("default filters applied"); } // indicate that the default filters have been applied already $("#LBLMainGridDefaultFilterFlag").val("false"); var filteringExpressions = $("#GRIDHours").data("igGrid").dataSource.settings.filtering.expressions; var filteredHoursSum = getTotalNumberOfHoursBasedOnFilteringConditions(filteringExpressions); $("#TXTTotalHoursShown").val(filteredHoursSum); colorCodeGrid(); }, responseDataKey: "0.d", autoCommit: true, width: "auto", height: window_height + "px", autoGenerateColumns: false, renderCheckboxes: true, primaryKey: "ID", dataSource: $("#LBLAppSettings_BaseURL").val() + "/GetHours.ashx" }); }
Since that is not the latest SR version, could you try updating to the latest one - 18.2.99? You can download the latest version under: https://www.infragistics.com/my-account/keys-and-downloads by selecting the 18.2 and then the Service releases tab, where the service releases are listed. Latest one is from 2 Oct.
Also if possible could you check if this issue reproduces in a simpler scenario on the user machines which have encountered this issue?
For example, in the following online sample: https://www.igniteui.com/grid/append-rows-on-demand, which loads data locally.
Here’s also a jsFiddle with the mentioned versions of jQuery and jQuery UI as well as the latest version or 18.2, which you can also test : http://jsfiddle.net/1fgxry3b/
Let me know if the affected environments can reproduce the issue in one or all of those scenarios.