Struggling to make JQgrid 4.5.2 frozen columns function correctly - headers are the only part that seems to be moving

After attempting to resolve the issue on my own by reviewing similar questions, such as this one => why doesn't Jqgrid frozen column seem to work with filter rows and filter heading?

However, it seems that the grid has been updated since then because I am unable to call the complete method (or perhaps I am doing something incorrectly).

Currently, only a copy of the headers are moving and not the data. The height of the headers is also incorrect, but I presume that's because I rotate the headers and adjust the height afterward in JavaScript. It is pretty much out-of-the-box except for rotating the headers, but even without it, the frozen columns are not working.

I have provided a clean code example to make assisting me easier. In my scenario, I also use some custom code to rotate my headers, yet the frozen columns still do not work.

Any assistance would be greatly appreciated :)

The HTML

<html>
... (content truncated for brevity)
</html>

The generated data JavaScript function with correct data loading and fixed headers


... (JavaScript code truncated for brevity)

My custom CSS to rotate the headers


.VerticalHeader
{
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg);  
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    margin-top:-40px;
    position: relative;
    font-size: 0.8em;

}

.VerticalHeaderIE  
{
    text-align:left;
    width:150px;
    height:50px;
    margin-top:-40px;
    margin-left: 20px;
    background-color: #EDEDED;

    zoom: 1;
}

Answer №1

I suggest adding this line

$(gridId).triggerHandler("jqGridAfterGridComplete");

after calling

$(gridId).jqGrid('setFrozenColumns');
. For more information, refer to my bug report with recommendations here. Additionally, the fix for post 4.5.2 has already been implemented in the jqGrid main code (check here). The upcoming version of jqGrid should address this issue.

A quick tip regarding your code: avoid using addRowData in a loop to populate a grid with datatype: "local". Instead, assign an id property to each item in the data array and utilize the data: data option of jqGrid. This method allows you to initialize the jqGrid with the data supplied. If you enable the gridview: true option, this approach will be much more efficient. Refer to this answer for further insights.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arrange the divs vertically by utilizing flexbox styling

My goal is to use flexbox to vertically align three div blocks. Even though I can successfully align them horizontally, I am facing issues with vertical alignment. What could be the mistake in my approach? .banner { padding- ...

Is there a way to manipulate CSS to update automatically when new content is loaded via ajax?

I need help with customizing the CSS for 4 image links on my website. Each link is represented by a small image in its normal state and a larger image when hovered over. The content for each link is loaded using ajax. My question is how can I modify the C ...

Reordering Divs in Bootstrap 3 Specifically for Small Screens

Just getting started with my first responsive design project, and I'm wondering if it's possible to achieve something like this using Bootstrap 3. The goal is to switch from the current layout: https://i.stack.imgur.com/lABXp.jpg To https://i. ...

Is it possible to attach a CSS file specifically to just one React component?

Is there a way to restrict the CSS styling in my Home.js component so that it does not affect any other components? I have a separate CSS file for each component, but when I apply the styling from one file to Home.js, it ends up affecting everything else ...

Numerous CSS class attributes

I have been experimenting with creating my own custom progress bar using CSS. While the HTML5 <progress value="10" max="100"></progress> element could work, I prefer to create it from scratch. In my CSS code, I have defined the .progressbar c ...

How can I extract echoed information from PHP after submitting form data through jQuery Ajax?

I am looking to transfer a file from an input form to a php script using ajax and handle the response echoed by my php script. Here is my HTML form: <form id="fileUploadForm" method="POST" enctype="multipart/form-data"> <input name="fileToU ...

MathJax only functions properly on Firefox Browser; for all other browsers, it fails to work as intended

I have integrated MathJax into a website that I designed. Everything works perfectly fine on Firefox, but there seems to be an issue with MathJax input when I try to open the site on Opera, for example. Here is the code snippet that is causing problems on ...

Associating specific information with individual elements utilizing HTML text box

Seeking guidance on implementing annotations feature for a scatter-plot using d3.js v3. My goal is to show a text-box upon clicking each data point, then display that entered text as a tool-tip specific to that data point. Here's how I'm approach ...

Columns of varying widths, with a solid border separating each one

I am working on a layout with a fluid width left column and a fixed width right column. My challenge is to add a border that spans the entire height of the tallest column. Below is a simplified version of my current setup: .left { width: 100%; fl ...

Tips for minimizing excess white space in Shiny applications

Encountering an issue with plot output in Shiny. When using standard ggplots, the output is correct without any extra white margins. However, when utilizing the "ggmap" package (which also produces ggplot-type outputs), white margins suddenly appear. (Ple ...

Utilize page variables to activate audio clips upon clicking

Can someone assist me with a script that activates an audio clip when five icons on a page are clicked? The image of the icons can be found below: https://i.stack.imgur.com/mBC6o.png Here is the HTML code: <div class="slide overlay-container" id="int ...

The Javascript style.opacity function eliminates the leading zero from the input string

In my application, users have the ability to change the color of the background but not the pattern. They can adjust the background behind the pattern and the opacity of the pattern. Users are prompted to input a percentage, which is actually a number betw ...

I am working with three columns and I am looking to keep the center column fixed in place while scrolling

Check out this CSS snippet: #container { margin: 0 auto; width: 1200px; } #col1 { float: left; width: 700px; } #col2 { float: left; width: 100px; padding: 0 17px; } #col3 { float: left; width: 400px; } I am trying t ...

404 Error: Unable to Locate Post Route

I've been trying to send a POST request to a specific route, but for some reason it's not working and keeps giving me a 404 Not Found error. Here is the code snippet for the route: app.post('/case/new', (req, res) => { Case.creat ...

Challenge with CSS Box Shadow

Hey there, I've been attempting to add a shadow effect to a box inside another box but I'm struggling to achieve the desired outcome. <div class="box effect2"> <div class="box effect2"> Box inside a box <div> &l ...

In a grid layout created with CSS, the fourth member in every row appears to be misaligned

I have 16 boxes, and they are divided into 4 groups. There is an alignment issue in my code where the 4th member of each row drops down to the next line. I am looking to keep the 4 groups of boxes in a single row without any of them dropping down to the ...

JQuery selector is successfully working while vanilla JavaScript is not functioning as expected

This problem is unique because I am experiencing issues with querySelector and querySelectorAll in my JavaScript code. While JQuery works fine, vanilla JS does not work as expected. I would appreciate any insights on why this might be happening. Thank you ...

The function $.getJSON() seems to be non-responsive

I've been struggling to solve this issue for quite some time now. The users.json file that I am using can be found in the "JSON" folder alongside the other files. The alert("Before") is functioning properly, but I'm facing difficulty with getting ...

In search of a highly efficient webservices tutorial that provides comprehensive instructions, yielding successful outcomes

I've reached a point of extreme frustration where I just want to break things, metaphorically speaking, of course. For the past week, I've been trying to learn how to create a web service using C# (whether it's WCF or ASMX, I don't rea ...

Issue with fortawesome icon: relative and absolute positioning not functioning as expected

I have utilized a diamond symbol from the Fort Awesome icon collection and noticed that when I target the i tag in my CSS, the icon becomes highlighted (see screenshot attached). However, I am encountering issues with relative and absolute positioning not ...