The functionality of reordering columns, virtual scrolling, and resizing the grid in jqgrid are not functioning properly

Implementing jqgrid with Symfony to display a datagrid has been a challenging task for me.

Thanks to Oleg's insightful response, many of the major issues have been resolved.

Below is a snippet of my code:

<link rel="stylesheet" type="text/css" media="screen" href="{{ asset('bundles/productorderlookup/css/ui-lightness/jquery-ui.css') }}" />
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset('bundles/productorderlookup/css/ui.jqgrid.css') }}" />
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset('bundles/productorderlookup/css/ui.multiselect.css') }}" />
<style type="text/css">
    span.cellWithoutBackground
    {
        display:block;
        background-image:none;
        margin-right:-2px;
        margin-left:-2px;
        height:14px;
        padding:4px;
    }
</style>
...

Having followed Oleg's suggestions discussed here, I am still encountering persistent issues.

I'm currently grappling with a few challenges: (1) [SOLVED] The virtual scroll feature remains non-functional. Despite adjusting parameters like height, width, and shrinkToFit, the issue persists. Enabling scroll:true only disables paging.

(2) [SOLVED] The sortable functionality does not operate as expected. Even after integrating essential CSS and JS files, the sorting feature continues to malfunction.

(3) [SOLVED] Additionally, gridResize feature is unresponsive. Although the cursor changes when attempting to resize, the actual resizing does not occur.

The possible reason for these glitches could be attributed to an excessive inclusion of CSS and JS files.

I would greatly appreciate any assistance or insights on resolving these matters. Thank you in advance.

Answer №1

Your posted code has a number of issues that need attention.

First and foremost, you have included jquery-1.11.3.js, followed by both jqueryui/1.8.13/jquery-ui.min.js and jqueryui/1.7.2/jquery-ui.js. Mixing multiple versions of JavaScript libraries on one page can lead to functionality breaking down. It's important to remove the outdated jQuery UI 1.7.2.

Including multiple document.ready handlers on a page is recommended only if the actions performed within are completely independent. However, in your case, the calls being made are dependent on one another. Methods like navGrid, filterToolbar, and others should be used after creating the grid. To address this, consolidate all handler contents into a single initial document.ready handler.

The usage of columnChooser outside of an onClick handler doesn't make sense. This method should be placed inside the button of the navigator toolbar and triggered within the onClick event of that button.

It's crucial to include the idPrefix option in subgrids created within subGridRowExpanded. Each subgrid must possess a unique prefix to prevent duplicate ids from occurring when multiple subgrids are opened simultaneously. A correct example would be idPrefix: "s_" + row_id + "_".

Lastly, it's advisable to avoid using scroll: true due to various restrictions affecting the use of other jqGrid features and potential implementation issues that may arise.

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

An error has occurred with Datatables: dtSettings is not defined

I have successfully implemented data-tables with fixed columns on my project. The first data-table, patients_report, is working perfectly fine. However, the second one, visitation_report, is encountering some issues. Can someone please advise me on how t ...

"Styling a play button on top of an image using CSS

Can someone please assist me in properly displaying a play button over a thumbnail using CSS in my WordPress site? I have tried various methods without success. Any guidance on where I may be going wrong would be greatly appreciated. .post-thumbnail-sid ...

Methods for adding a line to an array

I am currently working on a loop where I need to populate my array called photos: $scope.photos = []; var str = data.data.Photos; var res = str.split('|'); angular.forEach(res, function (item) { ...

Shattered raw emotion

Does anyone have any insight on how to resolve this error? I've hit a roadblock trying to figure out the issue in the message below. Here is the snippet of code: :label="` ${$t('cadastros.clientes.edit.status')}: ${cliente.status === ...

What is the best way to vertically align a pseudo element image using CSS?

After looking for similar questions, none of the answers seem to be working for my specific issue. This is what I'm struggling with: I am attempting to insert and center a decorative bracket image before and after certain content in the following man ...

Comparing JSON files in JavaScript to identify and extract only the new objects

I need a way to identify and output the newly added objects from two JSON files based on their "Id" values. It's important for me to disregard changes in object positions within the files and also ignore specific key-value changes, like Greg's ag ...

if a condition is not being properly assessed

Currently, I am working on a $.ajax call to retrieve data in JSON format. Within this JSON data, there is an element called "status." My code snippet checks if the value of `data.status` is equal to "success" and performs some actions accordingly. Despite ...

no visible text displayed within an input-label field

Currently, I have started working on a multi-step form that is designed to be very simple and clean. However, I am facing an issue where nothing is being displayed when I click on the next arrow. I am puzzled as to why it's not even displaying the te ...

The automated test locator in Angular using Protractor is failing to function

I am facing a challenge with my angular web application as there are some elements that are difficult to interact with. One specific element is a checkbox that needs to be checked during testing: ` <div class="row form-group approval_label"> < ...

Is there a way to eliminate overflow on a section of my CSS page without sacrificing the 100vh height?

My professor requested a section in my project to have its height adjusted to the viewport, however this has created a large gap between that section and the rest of my content. How can I remove the overflow and close the gap? <main> <sect ...

Error encountered: Unexpected character 'C' found at the beginning of the JSON data

Hey there, I'm new to all of this so just trying to figure it out! :) I stumbled upon a GitHub project that I really want to work on and understand in order to create my own solution. The project can be found at the following link: https://github.com ...

What's the best way to ensure that my image remains perfectly centered at the point where the background colors of my

html <body> <header> <div class="indexHeaderWall" id="headerLeftWall"> </div> <img id="profilePic" src="icons/myPicture.jpg" alt="Picture of Daniel Campo ...

Is it possible to assign a property value to an object based on the type of another property?

In this illustrative example: enum Methods { X = 'X', Y = 'Y' } type MethodProperties = { [Methods.X]: { x: string } [Methods.Y]: { y: string } } type Approach = { [method in keyof Method ...

Error: Unable to access null properties while attempting to address Readonly property error by implementing an interface

Here is the code snippet I am working with: interface State { backgroundColor: boolean; isLoading: boolean; errorOccured: boolean; acknowledgment: string; } export class GoodIntention extends React.Component<Props, State> { ... onCli ...

Exploring the Benefits of Using AJAX with Single or Multiple JavaScript Files

Here's a question for best practices. I'm working on building an AJAX application where the main page loads everything through AJAX into the content section. Should I merge all my javascript files into one that is loaded on the main page, or spli ...

does not provide an accurate response

Communication between pages can be achieved by passing email values like this: $.ajax({ type:'post', url:'email.php', data:{email: email}, success:function(msg){ alert(msg); } }); In the followi ...

Experiencing an issue with Firestore returning null instead of data in JavaScript

I have created a form that, upon submission, adds a document with the data to my Firestore database. Additionally, I have set up a real-time listener on the collection where the document is added. onSubmit={async(e) => { e.preven ...

Graphic selectors: a new take on radio buttons

I've been attempting to make this work, but it's not functioning correctly. Below is the CSS code: .input_hidden { position: absolute; left: -9999px; } .selected { background-color: #000000; } #carte label { display: inline-bl ...

Inheriting Components from Templates

Insight on Motivation There are countless situations where we may require multiple components to share the same functionalities. It is not ideal (and definitely shouldn't be done!) to simply copy child components. This is where the concept of inherit ...

There seems to be a compatibility issue between AngularJS and HTML

Here is a simple AngularJS code snippet I have written: var app=angular.module("myApp",[]); app.controller("MyController",['$scope',function($scope){ $scope.name="Asim"; $scope.f1=function(){ console.log("i am clicked"); $scope.vr="lol"; } co ...