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

Fixed navbar at the bottom of the page that transitions to static when scrolling reaches a certain location

Is it feasible to achieve this using Bootstrap v3? After conducting extensive research, it appears that a custom solution may be necessary. In essence, I am working with a navbar positioned at the bottom of the content area. Upon page load, if the navbar& ...

Is it possible to return PHP parser errors as JSON data?

I am facing an issue with my HTML page that uses a JQuery Ajax call to communicate with a PHP page and expects a JSON response. If the PHP encounters a parser error, it sends back the error message but not in the expected JSON format. This leads to a "JSON ...

Using JavaScript to dynamically calculate the sum of selected column values in Angular Datatables

I have a table set up where, if a checkbox is checked, the amounts are automatically summed and displayed at the top. However, I am encountering issues with the code below as it is not providing the exact sum values. Can anyone suggest a solution to this p ...

"Django's HttpResponse function removes double escapes from JSON data, causing issues with jQuery compatibility

I am encountering an intriguing issue with JSON and Django that I believe I've identified. The specific problem revolves around a JSON object structured like this: {"embed": "<iframe width='640' height='360' src='http://ww ...

How can I efficiently load AJAX JSON data into HTML elements using jQuery with minimal code?

I have successfully implemented a script that loads an AJAX file using $.getJSON and inserts the data into 2 html tags. Now, I want to expand the JSON file and update 30 different tags with various data. Each tag Id corresponds to the key in the JSON strin ...

extracting ng-repeat values and passing them to the controller

I have created a form that dynamically increases whenever the user clicks on the add sale button Here is the HTML code: <fieldset data-ng-repeat="choice in choices"> <div class="form-group"> <label for="name"> Qu ...

What methods can I use to extract a filename from a URL?

I'm currently struggling to extract just the filename from a URL in an attempt to make an AJAX call. Unfortunately, I can't seem to get the text formatting right. While it seems like it should be a simple task, I must be missing something importa ...

Enhance the <div> with interactive content through dynamic updates on click within the same element

I am currently developing an Editor-Menu for a website administration. When I open admin.php, the Editor-Menu should be loaded into the #ausgabe div using the code $('#ausgabe').load('./admin-ajax/ajax2.php'). This functionality is work ...

Error message "Undefined is not a function" occurred while using jQuery's .replace and scrollTop functions

I'm having issues with the scroll function in my code. It doesn't seem to be able to locate the ids in my HTML, even though I can't figure out why. I had a previous version that worked perfectly fine (unfortunately, I didn't save it D:) ...

What is the best way to place a header in a specific location on a

As I continue working on my project, I am facing a challenge in positioning the headings in specific places. My ultimate goal is to achieve a look similar to Figure 1 for my headings. [Figure 1][1] However, as of now, my layout resembles Figure 2. I find ...

Is it possible to generate a "pop-up" window upon clicking on the register button?

As a backend programmer, I'm looking to create a popup window that appears in front of the current window when users click "register", eliminating the need for redirection to another page. I believe you understand the concept. How can I achieve this? ...

What is the best method for incorporating CSS into an Angular application's embedded PowerBI report, which is displayed

Is there a way to incorporate external CSS or another method to apply styles to a PowerBI report embedded in an Angular application as an iframe? Specifically, I want to remove the scrollbar to ensure that the report seamlessly fits within the angular page ...

"Revolutionizing Social Media Interaction with jQuery Ajax Like System

Trying to incorporate Facebook 'like' and 'dislike' functionality using jQuery has been quite a challenge for me. One issue I've encountered is that when the ajax call is made, it triggers a loading animation which persists even af ...

Dynamic data in highcharts pie charts allows for the customization and selection of colors

I am working with a pie chart that looks like this { type : 'pie', data : [], //dynamic data goes here center : [50, 15 ], size : 80, showInLegend : false, dataLabels : enabled: true, } Now, I am interested in changing the color of ...

Serialize the selected options in a form from multiple select boxes

I have several select boxes on the webpage, each starting with the same prefix in their name attribute. My goal is to iterate through all select boxes on the page that start with SELECT___, retrieve the name of the select box and the selected option value, ...

Another ajax function implemented for a different form is experiencing technical issues

I have two forms with different IDs (form_sign and form_login) and I am using AJAX to submit them. The form_sign is working fine, but the other form is not functioning properly. When I tried to display an alert after submitting the form_login function, it ...

Tips for accessing array information with JQuery Ajax

I am looking to utilize an AJAX jQuery function to call a CodeIgniter controller function and display the result in array form. Specifically, I want to populate different text fields with values from this array. How can I achieve this using jQuery AJAX in ...

Creating a sidebar navigation in HTML and CSS to easily navigate to specific sections on a webpage

Here's a visual representation of my question I'm interested in creating a feature where scrolling will display dots indicating the current position on the page, allowing users to click on them to navigate to specific sections. How can I achieve ...

How to Efficiently Organize OpenAI AI Responses Using TypeScript/JavaScript and CSS

I'm using a Next.js framework to connect to the OpenAI API, and I've integrated it seamlessly with an AI npm package. The functionality is incredible, but I've encountered an issue regarding line breaks in the responses. You can find the AI ...

jQuery fails to recognize the pressing of the "left" key within an input field

Here is my code: $('input').live('keypress', function(event) { if (event.keyCode === 37) console.log("left key pressed"); else console.log("some other key press"); }); For a live demo, please visit http://jsfiddle.net/4RKeV/ A ...