Show Posts
1
Bug Report / Issue with scrolling when cells have multiple lines in them
« on: February 09, 2021, 04:52:19 am »
There are two issues here. The first is that if you have a cell with a link aligned to the top of the cell and the cell has multiple lines such that some of the lines are scrolled off the bottom. Clicking on the link will shift the cell up to the point where the entire cell fits in the view. However, when this happens the link is moved from where the click occurred and the link is not followed. I am thinking that if this shift needs to occur, then the coordinates of the mouse click should be adjusted accordingly so it will fall on the same location within the cell when handled.
The second issue is that in the above case, if you have frozen columns. The shift of the cell to pull it into view only happens in either the left or right of the freeze divider and not both. This causes misaligned cells in the view.
Both of these issues can be witnessed by making a simple change to the Frozen Columns demo on your site. Below is the code with two comments showing the change:
If you run this code and scroll the view so that one of the rows is just showing the google link but not the bottom of the cell. Then click the link - you will see the cell shift up and the link is not followed. For the second issue you can do exactly the same procedure, but first change the "Number of Frozen Columns" dropdown to0 be set to 2. CLick on the link will shift only the frozen columns up but not the right side.
The second issue is that in the above case, if you have frozen columns. The shift of the cell to pull it into view only happens in either the left or right of the freeze divider and not both. This causes misaligned cells in the view.
Both of these issues can be witnessed by making a simple change to the Frozen Columns demo on your site. Below is the code with two comments showing the change:
Code: [Select]
$(function () {
var columns = [
{ title: "Order ID", dataIndx: "OrderID", render: renderOrderId }, //*** Add Renderer
{ title: "Customer Name", dataIndx: "CustomerName" },
{ title: "Product Name", dataIndx: "ProductName" },
{ title: "Unit Price", dataIndx: "UnitPrice", dataType: 'float', format: '$#,###.00' },
{ title: "Quantity", dataIndx: "Quantity", dataType: 'integer' },
{ title: "Order Date", dataIndx: "OrderDate" },
{ title: "Required Date", dataIndx: "RequiredDate" },
{ title: "Shipped Date", dataIndx: "ShippedDate" },
{ title: "ShipCountry", dataIndx: "ShipCountry" },
{ title: "Freight", align: "right", dataIndx: "Freight" },
{ title: "Shipping Name", dataIndx: "ShipName" },
{ title: "Shipping Address", dataIndx: "ShipAddress" },
{ title: "Shipping City", dataIndx: "ShipCity" },
{ title: "Shipping Region", dataIndx: "ShipRegion" },
{ title: "Shipping Postal Code", dataIndx: "ShipPostalCode", minWidth: 150 }
];
var dataModel = {
location: "remote",
dataType: "JSON",
method: "GET",
url: "/Content/invoice.json"
}
//*** RENDERER
function renderOrderId()
{
return "<a href='google.com'>google</a>";
}
var $grid = $("div#grid_freeze_columns").pqGrid({
height: 500,
autoRow: true,
dataModel: dataModel,
create: function () {
this.flex();
},
pageModel: { type: 'local', rPP: 20, rPPOptions: [1, 10, 20, 30, 40, 50, 100] },
colModel: columns,
//selectionModel: { type: 'row' },
toolbar: {
style: "text-align:center",
items: [{
type: 'select',
label: 'Number of frozen columns: ',
options: [0, 1, 2, 3],
listener: function (evt) {
this.option("freezeCols", evt.target.value);
this.refresh();
}
}]
},
numberCell: { resizable: true, width: 40, title: "#", minWidth: 25 },
title: "Shipping Orders",
resizable: true
});
});
If you run this code and scroll the view so that one of the rows is just showing the google link but not the bottom of the cell. Then click the link - you will see the cell shift up and the link is not followed. For the second issue you can do exactly the same procedure, but first change the "Number of Frozen Columns" dropdown to0 be set to 2. CLick on the link will shift only the frozen columns up but not the right side.