We are having a problem with the horizontal scrolling on both igGrid and igHierarchicalGrid.
Dragging the scrollbar has no effect and using the arrows requires multiple clicks - holding down mouse key has no effect.
If we enter a height for the grid this fixes the problem - but get a large blank area on grids with a small amount of data.
Can you advise?
Thanks
Hi ecatenate,
If you have any further questions, please feel free to contact us.
Elana. Thanks for your reply.
This seems to be an issue with IE9.
IE10, Firefox and Chrome are OK.
IE9 scrollbar movement keeps sticking when trying to drag or hold down side arrows.
Need to put a height on grid to remove problem.
Hi ecatenate ,
I am not sure what may cause this issue. Which browser do you use and what is the operating system that you use for testing?
Thanks in advance.
Version
12.2.20122.2127
Sample code with problem. Can be igGrid or igHierarchicalGrid.
Grids with no editing on grid dont have problem.
$.ig.loader(
function() { $(
"#GridTable").igGrid({columns: [
{ headerText:"Haulier", key: "HaulierRef", width: "60px", dataType: "string" },
{ headerText:"Haulier Name", key: "HaulierName", width: "110px", dataType: "string" },
{ headerText:"Address1", key: "Address1", width: "100px", dataType: "string" },
{ headerText:"Address2", key: "Address2", width: "100px", dataType: "string" },
{ headerText:"Address3", key: "Address3", width: "100px", dataType: "string" },
{ headerText:"Address4", key: "Address4", width: "100px", dataType: "string" },
{ headerText:"Postcode", key: "Postcode", width: "60px", dataType: "string" },
{ headerText:"VAT", key: "VAT", width: "50px", dataType: "string" },
{ headerText:"Contact", key: "Contact", width: "100px", dataType: "string" },
{ headerText:"Phone", key: "Phone", width: "60px", dataType: "string" },
{ headerText:"Fax", key: "Fax", width: "60px", dataType: "string" },
{ headerText:"CostUplift", key: "CostUplift", width: "50px", dataType: "string" },
{ headerText:"Day Rates", key: "OnStop", width: "50px", dataType: "bool", format: "checkbox" },
{ headerText:"Comments", key: "Comments", width: "150px", dataType: "string" },
{ headerText:"Email", key: "Email", width: "100px", dataType: "string" },
{ headerText:"Transfer No", key: "TransferNo", width: "70px", dataType: "string" },
{ headerText:"Transfer Expiry Date", key: "TransferNoExpiryDate", width: "80px", dataType: "date" },
{ headerText:"Carrier No", key: "Carrier", width: "100px", dataType: "string" },
{ headerText:"Carrier Expiry Date", key: "CarrierNoExpiryDate", width: "80px", dataType: "string" },
{ headerText:"Int Haulier", key: "InternalHaulier", width: "60px", dataType: "bool", format: "checkbox" },
{ headerText:"Self Billing", key: "SelfBilling", width: "60px", dataType: "bool", format: "checkbox" },
{ headerText:"Self Billing Ref", key: "SelfBillingRef", width: "70px", dataType: "string"},
{ headerText:"Allow Stored Tare", key: "AllowStoreTare", width: "60px", dataType: "bool", format: "checkbox" },
{ headerText:"Inactive", key: "Inactive", width: "50px", dataType: "bool", format: "checkbox" },
{ headerText:"Info", key: "GridInfo", width: "70px", dataType: "string" }
],
width:"1200px",
height:"800px",
dataSource: URL,
responseDataKey:"Records",
responseDataType:"json",
responseTotalRecCountKey:"servertotalcount",
renderCheckboxes:true,
rowsRendered: rowsRendered,
autoGenerateColumns:false,
primaryKey:"HaulierRef",
features: [
{
name:'Paging',
type:'remote',
pageSize: 25,
recordCountKey:"servertotalcount",
pageSizeUrlKey:"pageSize",
pageIndexUrlKey:"page",
pageSizeChanging:function(evt, ui) {
page = 0;
filterExpr ="";
groupExpr ="";
sortColumn ="";
}
},
name:'Sorting',
firstSortDirection:'descending',
columnSorting: columnSorting_handler
name:"Filtering",
allowFiltering:true,
caseSensitive:false,
type:"remote",
mode:"advanced",
dataFiltering: dataFiltering_handler,
columnSettings: [
{ columnKey:"GridInfo", allowFiltering: false }
]
name:"GroupBy",
emptyGroupByAreaContent:"Drag a column here to group by",
modalDialogHeight: 100,
groupedColumnsChanging: groupedColumnsChanging_handler,
{ columnKey:"HaulierRef", allowGrouping: true },
{ columnKey:"HaulierName", allowGrouping: true },
{ columnKey:"Address1", allowGrouping: true },
{ columnKey:"Address2", allowGrouping: true },
{ columnKey:"Address3", allowGrouping: true },
{ columnKey:"Address4", allowGrouping: true },
{ columnKey:"Postcode", allowGrouping: true },
{ columnKey:"VAT", allowGrouping: true },
{ columnKey:"Contact", allowGrouping: true },
{ columnKey:"Phone", allowGrouping: true },
{ columnKey:"Fax", allowGrouping: true },
{ columnKey:"CostUplift", allowGrouping: true },
{ columnKey:"OnStop", allowGrouping: true },
{ columnKey:"Comments", allowGrouping: true },
{ columnKey:"Email", allowGrouping: true },
{ columnKey:"TransferNo", allowGrouping: true },
{ columnKey:"TransferNoExpiryDate", allowGrouping: true },
{ columnKey:"Carrier", allowGrouping: true },
{ columnKey:"CarrierNoExpiryDate", allowGrouping: true },
{ columnKey:"InternalHaulier", allowGrouping: true },
{ columnKey:"SelfBilling", allowGrouping: true },
{ columnKey:"SelfBillingRef", allowGrouping: true },
{ columnKey:"AllowStoreTare", allowGrouping: true },
{ columnKey:"Inactive", allowGrouping: true}]
name:"Updating",
startEditTriggers:"dblclick",
enableAddRow: createAccess,
editCellStarted:function(evt, ui) {
switch (ui.columnKey) {
case 'HaulierRef':
if (ui.rowAdding)
ui.editor.igEditor('option', 'readOnly', false);
else
ui.editor.igEditor('option', 'readOnly', true);
break;
case 'Inactive':
ui.editor.igEditor(
'option', 'readOnly', false);
case 'InternalHaulier':
'option', 'disabled', true);
default:
if ((ui.columnKey != "Inactive" && editAccess == false) || (ui.columnKey == "Inactive" && deleteAccess == false))
'option', 'readOnly', true);
if (ui.columnKey == "GridInfo") {
'option', 'value', '');
enableDeleteRow:
false,
enableDataDirtyException:
editRowEnding: editRowEndingHaulier,
rowDeleting: deletingRowHaulier,
columnSettings: [{
columnKey:
"HaulierRef",
editorOptions:
maxLength: 10,
required:
true,
validatorOptions:
true
"Inactive",
readonly:
//disabled: true
"InternalHaulier",
readOnly:
"HaulierName",
editorType:
"text",
maxLength: 50,
"Address1",
maxLength: 25,
,
"Address2",
"Address3",
"Address4",
"Postcode",
maxLength: 8,
"VAT",
maxLength: 100,
"Contact",
maxLength: 20,
"Phone",
maxLength: 12,
"Fax",
"Email",
"CostUplift",
"numeric",
validation:
editorOptions: { maxLength: 6, decimalSeparator:
"." }
"Comments",
maxLength: 200,
"TransferNo",
"TransferNoExpiryDate",
"datepicker",
false
"Carrier",
"CarrierNoExpiryDate",
} ]
});