Grid Header Margin NaNpx

[jon.moonParticipant]

I have a grid and have added column groups, but after doing so the top and bottom margins become set to NaNpx. Am I missing something that I should have in my config? Here’s a copy of what I have (note that this is a dynamic system, so it could be something else that is causing the issue; this is the rendered javascript code for creating the grid):

var grid = $(“#reg_grid_” + event_id);
grid.jqxGrid(
{
theme:”ui-redmond”,
width:800,
height:800,
columnsresize:true,
filterable:true,
sortable:true,
columns:[
{text:”Submitted Date”, datafield:”submitted_date”, width:120, columngroup:”Submission_Details”, alight:”left”, cellsalign:”left”},
{text:”Reg Status”, datafield:”status”, width:70, columngroup:”Submission_Details”, alight:”left”, cellsalign:”left”},
{text:”Pay Status”, datafield:”pay_status”, width:80, columngroup:”Submission_Details”, alight:”left”, cellsalign:”left”},
{text:”First Name”, datafield:”First_Name”, width:150, columngroup:”Registrant_Information”, alight:”left”, cellsalign:”left”},
{text:”Middle Name”, datafield:”Middle_Name”, width:100, columngroup:”Registrant_Information”, alight:”left”, cellsalign:”left”},
{text:”Last Name”, datafield:”Last_Name”, width:150, columngroup:”Registrant_Information”, alight:”left”, cellsalign:”left”},
{text:”Preferred Name”, datafield:”Preferred_Name”, width:100, columngroup:”Registrant_Information”, alight:”left”, cellsalign:”left”},
{text:”Address”, datafield:”Address”, width:120, columngroup:”Registrant_Information”, alight:”left”, cellsalign:”left”},
{text:”City”, datafield:”City”, width:100, columngroup:”Registrant_Information”, alight:”left”, cellsalign:”left”},
{text:”State”, datafield:”State”, width:50, columngroup:”Registrant_Information”, alight:”left”, cellsalign:”left”},
{text:”Zip”, datafield:”Zip”, width:50, columngroup:”Registrant_Information”, alight:”left”, cellsalign:”left”},
{text:”Email”, datafield:”Email”, width:100, columngroup:”Registrant_Information”, alight:”left”, cellsalign:”left”},
{text:”Gender”, datafield:”Gender”, width:50, columngroup:”Registrant_Information”, alight:”left”, cellsalign:”left”},
{text:”Birth Date”, datafield:”Birth_Date”, width:80, columngroup:”Registrant_Information”, alight:”left”, cellsalign:”left”},
{text:”Home Phone”, datafield:”Home_Phone”, width:100, columngroup:”Registrant_Information”, alight:”left”, cellsalign:”left”},
{text:”Cell Phone”, datafield:”Cell_Phone”, width:100, columngroup:”Registrant_Information”, alight:”left”, cellsalign:”left”},
{text:”Parent Name”, datafield:”Parent_Name”, width:100, columngroup:”Emergency_Info”, alight:”left”, cellsalign:”left”},
{text:”Parent Email”, datafield:”Parent_Email”, width:100, columngroup:”Emergency_Info”, alight:”left”, cellsalign:”left”},
{text:”Emergency Contact”, datafield:”Emergency_Contact_Name”, width:100, columngroup:”Emergency_Info”, alight:”left”, cellsalign:”left”},
{text:”Emergency Number”, datafield:”Emergency_Contact_Number”, width:100, columngroup:”Emergency_Info”, alight:”left”, cellsalign:”left”},
{text:”Driving ETA”, datafield:”Drive_Estimated_Arrival_Time”, width:80, columngroup:”Travel_Details”, alight:”left”, cellsalign:”left”},
{text:”Arrival Date”, datafield:”Fly_Arrival_Date”, width:80, columngroup:”Travel_Details”, alight:”left”, cellsalign:”left”},
{text:”Arrival Time”, datafield:”Fly_Arrival_Time”, width:80, columngroup:”Travel_Details”, alight:”left”, cellsalign:”left”},
{text:”Arrival Flight”, datafield:”Fly_Arrival_Flight_Number”, width:80, columngroup:”Travel_Details”, alight:”left”, cellsalign:”left”},
{text:”Departure Date”, datafield:”Fly_Departure_Date”, width:80, columngroup:”Travel_Details”, alight:”left”, cellsalign:”left”},
{text:”Departure Time”, datafield:”Fly_Departure_Time”, width:80, columngroup:”Travel_Details”, alight:”left”, cellsalign:”left”},
{text:”Departure Flight”, datafield:”Fly_Departure_Flight_Number”, width:80, columngroup:”Travel_Details”, alight:”left”, cellsalign:”left”},
{text:”Arrival Date”, datafield:”Airport_Shuttle_Arrival_Date”, width:100, columngroup:”Travel_Details”, alight:”left”, cellsalign:”left”},
{text:”Arrival Time”, datafield:”Airport_Shuttle_Arrival_Time”, width:100, columngroup:”Travel_Details”, alight:”left”, cellsalign:”left”},
{text:”Departure Date”, datafield:”Airport_Shuttle_Departure_Date”, width:100, columngroup:”Travel_Details”, alight:”left”, cellsalign:”left”},
{text:”Departure Time”, datafield:”Airport_Shuttle_Departure_Time”, width:100, columngroup:”Travel_Details”, alight:”left”, cellsalign:”left”},
{text:”Pickup Location”, datafield:”Bus_Pickup_Location”, width:100, columngroup:”Travel_Details”, alight:”left”, cellsalign:”left”},
{text:”Group Name”, datafield:”Group_Name”, width:100, columngroup:”Travel_Details”, alight:”left”, cellsalign:”left”},
{text:”Leader”, datafield:”Group_Leader_Name”, width:100, columngroup:”Travel_Details”, alight:”left”, cellsalign:”left”}
],
columngroups:[
{“text”:”Submission Details”,”align”:”center”,”name”:”Submission_Details”},
{“text”:”Registrant Information”,”align”:”center”,”name”:”Registrant_Information”},
{“text”:”Emergency Info”,”align”:”center”,”name”:”Emergency_Info”},
{“text”:”Travel Details”,”align”:”center”,”name”:”Travel_Details”}
]
});

Thanks for you help.

Jon

[Peter StoevKeymaster]

Hi jon.moon,

We cannot reproduce an issue here with the current version of jQWidgets. Prepare and share a jsfiddle.net sample which demonstrates an issue, please.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts