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

Get rid of the margins on your Wordpress theme

Currently, my Wordpress site is using the Tesseract theme which can be found at (http:// instantiwebs . com) I am interested in removing the left/right margins on all elements, similar to what has been done on this website: . Interestingly enough, they al ...

Omitting row information from a database using php and jquery

Currently, I am in the process of developing an admin panel and I have encountered a challenge with implementing a confirm dialog before deleting certain data. To achieve this, I am utilizing a plugin known as confirmOn. Below is my current setup: HTML: ...

What could be causing my Leaflet popup to suddenly close?

My feature allows users to search for a marker and zoom to its location, triggering the popup to open. Everything is functioning correctly, except that the popup closes after the function executes. I am struggling to pinpoint what is causing the popup to c ...

What's the best way to ensure my website's footer spans the entire width of the webpage?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Elena Brown | Graphic Designer</title> <link rel="stylesheet" href="CSS/normalize.css"> <link href=' ...

I am interested in modifying the hover effect for the text letters within the material UI container when hovering over it

this is the code I am currently working with: import React, { Component } from "react"; import MobileDetect from "mobile-detect"; import { map, orderBy, flowRight as compose, isEmpty, get } from "lodash"; import { Grid, Li ...

In JavaScript, provide a boolean response to a callback function from a separate function

Working with the jQuery validate plugin involves utilizing a submitHandler callback function. This function determines whether the form submission should proceed based on its return value - false will prevent submission, while true will allow it to go thro ...

Does adjusting the background transparency in IE8 for a TD result in border removal?

I attempted to create a JSFiddle, but it was not coming together as expected. My goal is to change the color of table cells when hovered over. I have been trying to adjust the opacity of the background color for this effect, but I encountered some strange ...

Enhance your navigation bar with hover styles in React Router Dom v6

I'm having an issue with my navbar where the active styles are overriding the hover state. I want to maintain my hover state styles even on the active nav link. How can I achieve this? Here is what's currently happening: Active nav styles (look ...

When utilizing Angular 2, this message is triggered when a function is invoked from the Observable

One of my services is set up like this: @Injectable() export class DataService { constructor(protected url: string) { } private handleError(error: Response) { console.log(this.url); return Observable.throw(new AppError(error)); ...

What is the best way to add Vue dependency using CDN?

For my project which is built using Kendo, Vue, .Net, Angular and jQuery, I need to incorporate https://www.npmjs.com/package/vue2-daterange-picker. <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-c ...

JavaScript Character Set on the Dynamic Page in Delphi

Within my Delphi application, I am dynamically generating HTML content. Displaying UTF-8 encoded strings in the webpage body is not an issue for me as I use HTMLEscape to encode regular strings (ensuring all strings in the list are properly escaped). The ...

Display multiple markers on a Google Map using google-map-react library

I am currently struggling to display markers on my Google Map using the map function. I have tried various approaches but nothing seems to work. Could there be limitations that I'm not aware of, or am I overlooking something critical? I experimented w ...

Having issues with the custom listing feature in Jquery UI auto complete not functioning as expected

I am facing an issue with my implementation of jquery UI autocomplete. The autocomplete functionality is not working as expected, despite the absence of any JavaScript errors. Below is the JSON data that I am working with: {"d":"[{\"label\":&bs ...

How can I ensure that $routeProvider functions correctly within my AngularJS application?

I'm currently in the process of manually constructing a shell and trying to understand its functionality Shell Structure: - application (contains PHP files) - webroot -- app --- app.js -- templates --- main ---- login ----- login.html index.html ...

Adding tags to a URL using jQuery without causing a page refresh

I am in the process of developing a "builder" page that allows users to choose an element from a dropdown menu and create a webpage. Since we don't have access to a database for this task, I want to save the elements in the URL so it can be shared via ...

Utilize jQuery or Javascript in WinRT to transfer names between pages seamlessly

Is there a way to pass four names entered by the user on the first page to another page while navigating in a winRT app using winJS or jQuery? For example, if the four names are: 1. Akshay 2. Ashish 3. Pavitra 4. Adarsh How can this be achieved? ...

Locate each document in MongoDB that pertains to a time period of

I have been trying to fetch data for the past n days. For instance, I am interested in retrieving data from the last 3 days. However, after following a solution I found on StackOverflow, I am only able to retrieve one document instead of all the documents. ...

Utilizing GeoLocation in JavaScript: Implementing a Wait for $.ajax Response

Whenever I make an AJAX POST request to my backend server, I aim to include the latitude and longitude obtained from the navigator. However, it seems like the request is being sent in the background without waiting for the navigator to complete its task. ...

Tips for inserting an object into an array

Here's the data I received: { 0:{modifierId: 4, modifierName: 'Garlic', modifierPrice: 60 } 1:{modifierId: 1, modifierName: 'Tartar ', modifierPrice: 60} 2:{modifierId: 3, modifierName: 'Herb ', modifierPrice: 60} item ...

The error message encountered with React Easy DatePicker is: "Uncaught ReferenceError: process is not defined."

I am attempting to integrate the stylish DatePicker from https://www.npmjs.com/package/sassy-datepicker?activeTab=readme Here is my implementation : import DatePicker from "sassy-datepicker"; function App() { const [date, setDate] = useSta ...