Horizontal scrollbar on top and bottom of the grid
I have two queries:
- The top scrollbar stays even when the width of the grid content is less than the width of the grid.
- I don't know if you need me to create a new thread for this but I saw that using the Column Chooser does not acknowledge the TextWrap mode after being refresh. In the picture below, Main Fields column does not have autofit but the text wrap property is not added.
Attachment: ScrollTest_a30d44d9.zip
I am coming across another issue where the top scrollbar doesn't adjust when re-ordering is done when columns freeze is true, like shown in the image below.
Hi
Nick,
Based on the reported issue, we would like to inform you that we have updated
the frozen feature by replacing the previous three-table approach with a
single-table approach in version 24.1.41. You can find more details in
the release notes: https://blazor.syncfusion.com/documentation/release-notes/24.1.41?type=all#data-grid.
Due to these breaking changes, you may have encountered the issue. So, we
suggest using the modified code snippet and sample below to achieve your
requirements. Thank you for your understanding.
|
public async Task RefreshTopScroll() {
await JSRuntime.InvokeVoidAsync("Scroll");
} var scroll = document.getElementById('wrapper1'); var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; var content = document.getElementsByClassName('e-gridcontent')[0]; // Get content
if (scroll && content) { grid.element.insertBefore(scroll, content); // Place the scrollbar between the content and header
var wrapper1 = document.getElementById("wrapper1"); wrapper1.style.display = "block";
// Adjust width of the scrollbar wrapper document.getElementById("div1").style.width = content.firstElementChild.scrollWidth + "px";
// Bind onscroll event to the wrapper wrapper1.onscroll = function () { content.firstElementChild.scrollLeft = wrapper1.scrollLeft; // Sync wrapper1 scrollLeft with the Grid scrollLeft };
// Bind onscroll event to the content content.firstElementChild.onscroll = function () { wrapper1.scrollLeft = content.firstElementChild.scrollLeft; // Sync Grid scrollLeft with the wrapper1 scrollLeft }; } }
|
Regards,
Prathap Senthil
Attachment: DataGrid_TopScroll_784e4fe5.zip
We are unable to reproduce the reported issue . For your reference, we have attached a screenshot. To further investigate the issue, we need additional clarification from your side. Please provide the following details to help us proceed:
- Could you please share the video demonstrations of the issue with replication steps?
- To help us analyze the issue, could you provide a simple, reproducible sample that demonstrates the problem? This will allow us to identify the issue more effectively and provide a resolution. Alternatively, you could share your attempt to replicate the issue using the previous attached sample
|
|
The information you provide will be very helpful in validating the reported
query on our end and in providing a solution as quickly as possible. Thank you
for your understanding.
Based on your requirement, we suggest using the modified code snippet below in the scroll.js file to handle the scrollbar as sticky and achieve your requirement. Kindly refer to the code snippet and sample for your reference
|
function Scroll() { var scroll = document.getElementById('wrapper1'); var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; var content = document.getElementsByClassName('e-gridcontent')[0]; // Get content var headerContent = document.getElementsByClassName('e-headercontent')[0]; // Get header content if (scroll && content) { grid.element.insertBefore(scroll, content); // Place the scrollbar between the content and header
var wrapper1 = document.getElementById("wrapper1"); wrapper1.style.display = "block"; wrapper1.style.position = "sticky"; wrapper1.style.zIndex = "10";
// Function to update the top position
function updateTopPosition() { var stickyHeader = document.querySelector('.e-gridheader.e-sticky'); var topPosition = headerContent.offsetHeight;
if (stickyHeader) { topPosition = stickyHeader.getBoundingClientRect().bottom; }
wrapper1.style.top = topPosition + "px"; } // Initial call to set the top position updateTopPosition();
// Adjust width of the scrollbar wrapper document.getElementById("div1").style.width = content.firstElementChild.scrollWidth + "px";
// Bind onscroll event to the wrapper wrapper1.onscroll = function () { content.firstElementChild.scrollLeft = wrapper1.scrollLeft; // Sync wrapper1 scrollLeft with the Grid scrollLeft };
// Bind onscroll event to the content content.firstElementChild.onscroll = function () { wrapper1.scrollLeft = content.firstElementChild.scrollLeft; // Sync Grid scrollLeft with the wrapper1 scrollLeft };
// Adjust position on scroll window.addEventListener('scroll', updateTopPosition); } } |
Attachment: DataGrid_TopScroll_396dd0b.zip
