Header alignment issue in JQGrid

Utilizing 4.4.4 - jQuery Grid and <= jquery 1.8.2, this is how I set up my jqgrid:

    function FAGrid() {
    var url1 = 'URL';
    $("#FAList").jqGrid({
        url: url1,
        datatype: 'json',
        mtype: 'POST',
        colNames: ['rowId', 'FAID', 'Employee', 'Date<br/> Filed', 'Duration', 'Shift', 'ProjectSite', 'Contact Person', 'Purpose', 'Requested By', 'Approved By', 'Date Approved'],
        colModel: [
                    { name: 'rowId', index: 'rowId', hidden: true, width: 20 },
                    { name: 'FAID', index: 'FAID', hidden: true, editable: true, sortable: false, width: 20, align: 'center' },
                    { name: 'CompleteName', index: 'CompleteName', hidden: false, editable: true, sortable: false, width: 160, align: 'center' },
                    { name: 'FADateFiled', index: 'FADateFiled', hidden: false, editable: true, sortable: false, width: 52, align: 'center' },
                    { name: 'Duration', index: 'Duration', hidden: false, editable: true, sortable: false, width: 97, align: 'center' },
                    { name: 'ShiftDesc', index: 'ShiftDesc', editable: true, hidde: false, width: 75, align: 'center' },
                    { name: 'ProjectSite', index: 'ProjectSite', editable: true, sortable: false, width: 75, align: 'center' },
                    { name: 'FAContactPerson', index: 'FAContactPerson', editable: true, hidde: false, width: 75, align: 'center' },
                    { name: 'Purpose', index: 'Purpose', editable: true, sortable: false, width: 75, align: 'center' },
                    { name: 'FARequestedBy', index: 'FARequestedBy', editable: true, sortable: false, width: 115, align: 'center' },
                    { name: 'FAApprovedBy', index: 'FAApprovedBy', editable: true, sortable: false, width: 115, align: 'center' },
                     { name: 'FADateApproved', index: 'FADateApproved', editable: true, sortable: false, width: 75, align: 'center' }
                  ],
        pager: $('#FAPager'),
        rowNum: 5,
        rowList: [5, 10, 20],
        sortname: 'FADateFiled',
        sortorder: 'desc',
        viewrecords: true,
        imgpath: '/Content/themes/redmond/images/',
        height: '100%',
        loadComplete: function () {
            var ids = jQuery("#FAList").getDataIDs();
            var len = ids.length,
                newLine;
            if (len < 5) {
                AddNewRowToGrid(len, "#FAList");
            }
         }
    });
}

Despite adjusting the width of elements like Name in the grid, the alignment remains unchanged. What could be causing this issue - CSS, JQgrid, or something else?

https://i.sstatic.net/a2MqJ.jpg

jqueryhtmlcssjqgrid

Answer №1

I have successfully generated a local sample with added values. It is functioning correctly in my case. Can you provide more details about what you are attempting to accomplish in the loadComplete section? I have disabled the loadComplete function for now.

Below is the code snippet I am working with:

HTML

<table id="FAList"></table>
<div id="FAPager"></div>

JS

$(document).ready(function() {

var data = [
{ rowId: "1",   FAID: "2",  CompleteName: "Emp name",   FADateFiled: "08/18/2016",  Duration: "3",  ShiftDesc: "Desc",  ProjectSite: "Site",    FAContactPerson: "Contact Person",  Purpose: "Purpose", FARequestedBy: "Requester", FAApprovedBy: "Approver",   FADateApproved: "08/18/2016"
},
{ rowId: "1",   FAID: "2",  CompleteName: "Emp name1",  FADateFiled: "08/18/2016",  Duration: "3",  ShiftDesc: "Desc1", ProjectSite: "Site1",   FAContactPerson: "Contact Person1", Purpose: "Purpose1",    FARequestedBy: "Requester1",    FAApprovedBy: "Approver1",  FADateApproved: "08/18/2016"
} 
];

function FAGrid() {

    var url1 = 'URL';
    $("#FAList").jqGrid({
        //url: url1,
        //datatype: 'json',
        datatype: 'local',
        //mtype: 'POST',
        colNames: ['rowId', 'FAID', 'Employee', 'Date<br/> Filed', 'Duration', 'Shift', 'ProjectSite', 'Contact Person', 'Purpose', 'Requested By', 'Approved By', 'Date Approved'],
        colModel: [
                    { name: 'rowId', index: 'rowId', hidden: true, width: 20 },
                    { name: 'FAID', index: 'FAID', hidden: true, editable: true, sortable: false, width: 20, align: 'center' },
                    { name: 'CompleteName', index: 'CompleteName', hidden: false, editable: true, sortable: false, width: 160, align: 'center' },
                    { name: 'FADateFiled', index: 'FADateFiled', hidden: false, editable: true, sortable: false, width: 52, align: 'center' },
                    { name: 'Duration', index: 'Duration', hidden: false, editable: true, sortable: false, width: 97, align: 'center' },
                    { name: 'ShiftDesc', index: 'ShiftDesc', editable: true, hidde: false, width: 75, align: 'center' },
                    { name: 'ProjectSite', index: 'ProjectSite', editable: true, sortable: false, width: 75, align: 'center' },
                    { name: 'FAContactPerson', index: 'FAContactPerson', editable: true, hidde: false, width: 75, align: 'center' },
                    { name: 'Purpose', index: 'Purpose', editable: true, sortable: false, width: 75, align: 'center' },
                    { name: 'FARequestedBy', index: 'FARequestedBy', editable: true, sortable: false, width: 115, align: 'center' },
                    { name: 'FAApprovedBy', index: 'FAApprovedBy', editable: true, sortable: false, width: 115, align: 'center' },
                     { name: 'FADateApproved', index: 'FADateApproved', editable: true, sortable: false, width: 75, align: 'center' }
                  ],
        pager: $('#FAPager'),
        rowNum: 5,
        rowList: [5, 10, 20],
        sortname: 'FADateFiled',
        sortorder: 'desc',
        viewrecords: true,
        //imgpath: '/Content/themes/redmond/images/',
        height: '100%',
        /*loadComplete: function () {
           debugger;
           var ids = jQuery("#FAList").getDataIDs();
           var len = ids.length,
           newLine;
           //if (len < 5) {
           //    AddNewRowToGrid(len, "#FAList");
           //}
        }*/
    });
    $("#FAList")[0].addJSONData({
            total: 1,
            page: 1,
            records: data.length,
            rows: data
        });    

    }

    FAGrid();

 });

For further reference, please visit this Fiddle link.

Answer №2

Ensure that the elements in your colModel have the attribute fixed: true

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

Using a web browser control to choose a radio button and then submit the form

Currently, I am attempting to use my WebBrowser control in order to select a radio button and also click on a submit button that doesn't have any id or name attached. Below is the snippet of HTML code from the webpage: <form method="post> & ...

c#html.netwinformswebbrowser-control

Extract following text using beautiful soup

I am attempting to extract the complete address from the given HTML code snippet. html_text = "" <div><h2 class="rounded">Address</h2><div class="textwidget"><p>30 Dov Hoz<br /> Kiryat Ono&l ...

pythonhtmlweb-scrapingbeautifulsoup

The JSON response from Ajax is not coming back as anticipated

My attempts to make a basic ajax call are failing; var getPrevious = function(){ console.log('ajaxing'); $.ajax({ type: 'GET', dataType: "json", url: 'http://'+DOMAIN+'/previous', ...

javascriptjqueryajax

Is it possible to submit both a file and JSON data in one POST request using jQuery AJAX?

Need assistance with sending a POST request using jQuery Ajax to upload a file and some JSON data. Here is the code snippet: var logoImg = $('input[name="logoImg"]').get(0).files[0]; var formData = new FormData(); formData.append('logo&apos ...

jqueryajaxpostupload

How do I activate validation within bootstrap4 using bootstrap-validate?

I am working with a validation form in Bootstrap4 that displays an error message when less than 5 characters are entered. If I enter 5 or more characters, I want to show a green check-mark and border around that specific input field. <div class="con ...

javascriptjquerycssbootstrap-4bootstrap-validate

Incorporating photos within the layout of a Twitter Bootstrap grid

Looking to showcase images like the ones found here: https://i.stack.imgur.com/eD4GD.jpg These images are original and come in various sizes. I want a hover effect that includes blur, fogging effects, and text placed in the middle of the picture. Check ou ...

htmlcssimagetwitter-bootstrap

Steps for refreshing the jQuery FullCalendar appointment once the event has been successfully created

Can you tell me the specific event or method name that needs to be called or handled in order to update an existing event in the calendar when clicked on? The full calendar can be found at ...

jquery

Checkbox click event not triggering properly

I am facing challenges in triggering an onclick event for the "Elevation" checkboxes located at the URL provided above. <input type="checkbox" value="A" id="elevation_A" onclick="changeElevation(this.value);" /> For some reason, the "changeElevati ...

javascriptjqueryhtml

Prevent form submission when processing is in progress

I've got this code working perfectly: $(function() { $("input,textarea").jqBootstrapValidation({ preventSubmit: true, submitError: function($form, event, errors) { // additional error messages or events ...

javascriptjqueryformsvalidation

Mobile Chrome allows users to utilize the IFrame player API for enhanced video

Currently, I am working on creating a mobile website where I plan to include some YouTube videos using the IFrame player API (https://developers.google.com/youtube/iframe_api_reference). My main goal is to have the video start playing only after the user ...

javascripthtmlgoogle-chromemobileyoutube

How to position text in the center of a video using CSS

My attempt to center the name of my blog on top of a video background was not successful, even though I tried positioning it absolutely with 50% from the top. Can someone assist me in vertically and horizontally centering the text over the video? Here is ...

htmlcssvideotext

Create a function to produce a list of dates within two specified date ranges using JavaScript

Looking for assistance as a beginner in JavaScript. Can anyone guide me on how to generate a list of dates between dateA and dateB? For instance: dateA = 07/01/2013 dateB = 07/01/2014 Desired outcome: 07/01/2013, 07/02/2013, 07/03/2013, 07/04/2013...a ...

javascriptjquerydatedatepickerrange

You can move freely between classes A and B, as well as classes A and C, but there is no transition allowed between

A Brief Overview... Take a look at the HTML structure below: <div class="wrapper"> <div class="item above"></div> <div class="item active"></div> <div class="item below"></div> <div class="item ...

htmlcsscss-transitionscss-transforms

Utilizing PHP and JavaScript in a multi-page setting

Apologies for the length of this post in advance. I've been struggling with a coding issue for quite some time now and haven't been able to find a solution. To provide more context and help to those who might assist me, I'm including most of ...

javascriptphpjqueryajax

How can I confirm that all elements have been properly reset to their original positions prior to making any further adjustments to them?

In need of some creative brainstorming, I'm working on a website design featuring ten overlapping cards. When the mouse hovers over a card, it expands while others move away. My goal is for each card to return to its original position once the cursor ...

javascripthtmlcssdom

Issues with the alignment of card-footer in Bootstrap 5 card components

Looking to enhance the website for the electronics store I am employed at, I have encountered a challenge while constructing cards using Bootstrap 5. Initially, the cards varied in height until I managed to resolve the issue by setting the card height to 1 ...

htmlcssbootstrap-5

Ways to conceal all components except for specific ones within a container using JQuery

My HTML structure is as follows: <div class="fieldset-wrapper"> <div data-index="one">...</div> <div data-index="two">...</div> <div data-index="three">...</div> < ...

javascripthtmljquery

Pressing the "Enter" key will submit the contents of

Hello, I have recently created a new chat box and everything seems to be working fine. However, I am facing an issue with submitting a message when I press enter (to go to the function Kucaj()). Can anyone provide assistance with this problem? I tried ad ...

javascriptphpjquery

What strategies can I use to streamline this array update function code?

Looking to simplify my updated array function. The update function involves updating and comparing values in an array. The comparison will be done within the fruit_temp. For example, data in fruit_temp's fruit_db_id corresponds to an existing id in th ...

javascriptjqueryarrays

Contrast between action="" and action="#" attributes in HTML

There are two ways I've come across for setting a form's action attribute. #1. Using an empty string as the action attribute value: action="" #2. Specifying a hash symbol (#) as the action attribute value: action="#" What distingishes these ...

phphtmlforms