Navigating Using Keyboard in Grid Does Not Fully Show First Column After Sticky Columns
Environment
Product | Kendo UI Grid |
---|---|
Version | 2023.3.1114 |
Description
When navigating using the keyboard in the Grid component, the first column after sticky columns does not fully show.
Solution
To address this issue, you can follow these steps:
- Bind to the
keypress
event of thediv#grid
element. - Check if the current target of the
tab
keypress event has the IDCustomerID
. - Scroll the Grid dynamically to show the first column.
Here is an example of how you can implement this workaround:
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").keyup(function(e){
if($(e.target).is("#CustomerID") && e.shiftKey === true && e.code === "Tab") {
$(".k-grid-content").animate({ scrollLeft: -100} );
}
})
if (kendo.support.browser.msie !== true) {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipName: { type: "string" },
ShipCity: { type: "string" },
ShipAddress: { type: "string" },
RequiredDate: { type: "date" }
}
}
},
pageSize: 30
},
navigatable:true,
editable: "incell",
height: 540,
sortable: true,
reorderable: true,
groupable: true,
resizable: true,
filterable: true,
columnMenu: true,
pageable: true,
columns: [{
field: "OrderID",
title: "Order ID",
sticky: true,
width: 150
},
{
field: "CustomerID",
title: "Customer ID",
stickable: true,
width: 250
},
{
field: "ShipName",
title: "Ship Name",
stickable: true,
width: 350
}, {
field: "ShipCountry",
title: "Ship Country",
stickable: true,
width: 300
}, {
field: "ShipAddress",
title: "Ship Address",
stickable: true,
width: 300
}, {
field: "ShipCity",
title: "Ship City",
stickable: true,
width: 300
}, {
field: "ShipPostalCode",
title: "Ship Postal Code",
stickable: true,
width: 300
},
{
field: "ShipVia",
title: "Ship Via",
stickable: true,
width: 250
},
{
field: "RequiredDate",
title: "Required Date",
template: '#= kendo.toString(RequiredDate, "dd/MM/yyyy") #',
stickable: true,
width: 250
}
]
});
} else {
$("#grid").html("Sticky columns are not supported in IE!")
}
});
</script>