The hideCol method does not work on jqGrid

Encountering a problem with the hidecol method in jqGrid. Despite calling the method, nothing seems to happen.

Using version 4.5 of jqGrid.

The table is created as follows:

// Table creation using jqGrid
$('#shipTable').jqGrid({
    data: tableItems,
    datatype: 'local',
    autowidth: true,
    colNames: ['Name', 'Status', 'Ownership', 'Monitoring', 'Shiptype', 'Departure', 'ETD', 'Destination', 'ETA', 'Delta', 'SOG', 'Speed', 'HFO', 'HFO LS', 'MDO', 'MDO LS', 'RPM 24/H', 'Prop slip 24/H', 'GW 24/H', 'Next service'],
    colModel: [{
        name: 'name',
        index: 'name',
        width: 160,
        hidden: false
    }, {
        name: 'status',
        index: 'status',
        width: 70
    }],
    rowNum: 100,
    height: 400,
    scrollOffset: 30,
    sortname: 'id',
    viewrecords: true,
    sortorder: 'desc',
    gridview: true,
    caption: 'Ships',
    pager: '#pager',
    toppager: true,
    ignoreCase: false,
    onSelectRow: function(rowid) {
        // some work
    }
});

Using jQuery to create checkbox list for managing column visibility.

As a test, all checkboxes currently call this:

$("#shipTable").jqGrid('hideCol', "Name").trigger('reloadGrid');

Although this should be functional, it's not working as expected. Considering any potential conflicts with custom CSS. Any suggestions are welcomed!

Answer №1

You initially set the column with a name in lowercase (name: 'name'), but then used it with the first letter as a capital ("Name"). To resolve this issue, you should use

$("#shipTable").jqGrid("hideCol", "name");

instead of

$("#shipTable").jqGrid('hideCol',"Name").trigger('reloadGrid');

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

JQuery encountered a HTTP 404 error, signaling that the server was unable to locate anything that matched the requested URI

I am currently learning front-end development on my own and encountered an issue with implementing jQuery. You can find all the files for my site here: The problem I am facing is that there should be blog posts displayed between the header and navigation ...

AngularJS - Showing only items belonging to the same team

Currently, I am attempting to filter out all objects that belong to the same team. Each object is structured as follows: {"first_name":"Bob","last_name":"Sagat","username":"bobsagat", "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

Clicking on an element will result in the removal of

I have a specific DIV element that I want to remove when clicking on a link inside that same DIV. Below is the code snippet of what I currently have: <div id="clients-edit-wrapper"> <div class="close-wrapper"> <a href="#" class= ...

When the user clicks on an element, my JavaScript code dynamically updates the CSS property by changing the window

When a tag is clicked in HTML triggering an onclick event, the CSS property that was updated in the JavaScript does not persist. The changes appear momentarily and then disappear once the window is refreshed. Javascript: <script type="text/javascript"& ...

Set the class of the list item to "active" class

My approach to styling involves using a UL and li class to contain form selection options. I plan on hiding the radio button and using its value upon form submission. I have managed to enable checking the radio box when the <li> is clicked, but for s ...

Positioning a fixed div can result in the page being cut off on certain mobile browsers that are not

While there are numerous similar issues out there, the bug I am encountering feels unique. This issue involves a page with a div in position:fixed style, specifically affecting certain less common mobile browsers like Star Safari, DU Browser, and Tint Brow ...

Tips for keeping buttons anchored at the bottom of the page during scrolling

As a newcomer to Ionic, HTML, and CSS, I am currently exploring how to keep a button fixed while scrolling through the page. Despite specifying a fixed position in the CSS, the button does not remain fixed as intended. The button seems to be having troubl ...

Displaying an image that spans the entire width of the browser

I'm currently working on a WordPress site and have encountered an issue with the header image. I want it to span the full width of any browser window. The existing code in the parent theme is as follows: background: url("/test/wp-content/themes/Howt ...

Is AngularJS the right choice for developing this application?

Recently, I've come to the realization that I want to dive into the world of AngularJS framework after working with jQuery for several years. I have a vision of developing an application that allows users to easily modify webpage DOM using a browser- ...

Rotate each row of the table in sequence with a pause between each flip

I have a table with 3 columns and 10 rows. I would like to flip each row one by one, where each row contains data on both the front and back sides. The flipping animation should be similar to the example provided in this link, but the flipping should sta ...

After clicking on a specific href element with a designated class, trigger the display of a custom dialog styled using CSS

I recently added a unique class to certain links on my website. When these specific links are clicked, I want them to trigger a customized dialog box. My goal is to modify the CSS of this special dialog box. Only links with this particular class should ...

Overrides of variables are not always complete

After setting up my project with npm install to utilize sass overrides, I encountered an issue. Despite adjusting the $theme-colors, only part of the page reflects the change. https://i.sstatic.net/xjrsx.png I attempted the following: $theme-colors: ("p ...

What is the method for incorporating a CSRF token into BootstrapTable when using the POST data method?

How can I include a CSRF token in bootstrapTable when using the POST method for data? I am working on a project and trying to add a CSRF token in bootstrapTable. There is some information about CSRF on bootstrap-table.com. Can anyone help me with this iss ...

Twice the data fetching through ajax on popup is observed using php mysql

I've been struggling for the past two hours. Attempted : location.reload(); reset form Tried many features, but after closing my popup and reopening it or opening another ID, the previous ID data is still visible. This happens continuously for all ...

Having difficulty retrieving the PDF through a jQuery AJAX request

I am currently utilizing the FPDF library to generate PDF files. I have been successful in generating the PDF file through a hyperlink, but I am facing difficulties when trying to do the same on button click. Below is the code snippet: createReport.php ...

Transform a 3D text rotation JavaScript file into an Angular component tailored TypeScript file

I have a javascript file that rotates text in 3D format, and I need help converting it into an Angular component specific TypeScript file. You can find the codepen for the original JavaScript code here. Below are my Angular files: index.html <!doctyp ...

Sending a parameter to the load method of the Selectize jQuery extension

I have a question about using the Selectize jQuery plugin for a dropdown box. I am not very familiar with jQuery, so please bear with me if this is a simple issue. I am making an ajax call to fetch data for the dropdown, but I need to pass a variable to th ...

Enhancing Rails forms with JQuery: A guide to updating select options

In my _form2.html.erb file, I have the following script: <script type="text/javascript> $(function () { $('#toright').click(function () { var sel = document.getElementById("left"); var len = sel.options.leng ...

if jade is being inconsistent

I am currently using expressjs in my app and have the following setup: app.get('/profile',index.profile); app.get('/',index.home); Within layout.jade, I have the following code: ... if typeof(username)!=='undefined' ...

Place the two buttons in position

I have a section where I need to include two buttons. One button on the left labeled "Sunday" and one on the right labeled "misc". I want the two buttons to be evenly placed within the area, so I assigned them the same class since they are the same size. ...