jQuery Grid Plugin - jqGridForum

29/09/2010
20:25

bwiegert

New Member

Members

Forum Posts: 1

Member Since:
29/09/2010

Offline

1

I am trying to make the headers line up with the column body in the grid and can not.

I am specifying the column width in the colModel, and specifying a width property in the grid definition.

I have tried shrinkToFit to be true and false. Nothing seems to work.

When I don't specify the widths then everything lines up, but my columns

aren't the right size and don't show enough data. Any idea what I am doing wrong?

Here is my grid definition:

var namesTableGridOptions = {
	url: '${pageContext.request.contextPath}/orderentryajax/getNamelist.do?searchFilter=' + $('#searchText').val(),
	datatype: 'json',
	mtype: 'GET', 	
	jsonReader : {repeatitems: false}, 		
	height: 300,				
	width: 800, 
	shrinkToFit: false,
	rowNum: -1,							
	colNames:['Last Name', 'First and Middle Name', 'Address 1', 'Address 2', 'City', 'State', 'Zip', 'Guid'],   					 
	colModel:[
		{name:'lastName', width: '125', sortable: true},
		{name:'firstName', hidden: false, width: '175' , sortable: true},
		{name:'address1', hidden: false, width: '170', sortable: true},
		{name:'address2', sortable: true, width: '90'},  
		{name:'city', sortable: true, width: '100'},  
		{name:'state', sortable: true, width: '65'},
		{name:'postalCode', width: '75', sortable: true},
		{name:'namelistGuid', hidden: true}
		], 
	viewrecords: true,
	altRows: true,
	altclass: 'ui-jqgrid-alt-row',
	loadonce: true
};

$('#namesTable').jqGrid(namesTableGridOptions);

04/10/2010
23:47

Chad LaVigne

United States

New Member

Members

Forum Posts: 2

Member Since:
16/09/2010

Offline

2

I also encountered this issue. It appears to be a bug with the shrinkToFit option not sizing the column headers

correctly (you can even see it on the jQuery grid demos). It looks like perhaps the table header widths aren't

accounting for the left 1px border when setting the width on the <th> tags so the column headers get

progressively off by 1px. Rather than hack the jQuery grid code I just made a temporary fix until the

jQuery grid team can fix the issue. Here's the temporary fix I'm using:

function gridColumnWidthCorrection(gridId) {

   $('#gview_' + gridId + ' .ui-jqgrid-labels th').each(function(i) {
       if($(this).css('display') != 'none') {
           var widthString = $(this).css('width');
           var width = eval(widthString.substr(0, widthString.indexOf('px')));
           $(this).css('width', (width – 1) + 'px');
       }
   });
}

If anyone has a better solution using options in jQuery grid or thinks I've misdiagnosed the problem

please let me know.

Chad

05/10/2010
13:35

jackkitley

Member

Members

Forum Posts: 4

Member Since:
18/08/2010

Offline

3

Howdy,

This is some of my code that i have done in the past. The column headers match with the relevant data, it has a horizontal scrollbar too.

    jQuery(document).ready(function(){
          jQuery("#list").jqGrid({
           url:'/clubs/event_contacts_view_data',
           datatype: 'json',
           mtype: 'POST',
           colNames:[
           '<?= $lang->tr('Actions', $session->read('language')) ?>',
           '<?= $lang->tr('Profile', $session->read('language')) ?>',
           '<?= $lang->tr('company_name', $session->read('language')) ?>',
           '<?= $lang->tr('first_name', $session->read('language')) ?>',
           '<?= $lang->tr('last_name', $session->read('language')) ?>',
           '<?= $lang->tr('entry_date', $session->read('language')) ?>',
           '<?= $lang->tr('email', $session->read('language')) ?>',
           '<?= $lang->tr('phone_work', $session->read('language')) ?>',
           '<?= $lang->tr('phone_home', $session->read('language')) ?>',
           '<?= $lang->tr('phone_mobile', $session->read('language')) ?>',
           '<?= $lang->tr('fax', $session->read('language')) ?>',
           '<?= $lang->tr('source_name', $session->read('language')) ?>',
           '<?= $lang->tr('allocated_to', $session->read('language')) ?>'
           ],
           colModel :[
               {name:'Actions', index:'Actions',search:false,sortable:false, width:75},
               {name:'Profile', index:'Profile',search:false,sortable:false, width:70},
               {name:'company_name', index:'company_name', width:200},
               {name:'first_name', index:'first_name', width:200},
               {name:'u.last_name', index:'u.last_name', width:200},
               {name:'entry_date', index:'entry_date', width:150},
               {name:'email', index:'email', width:200},
               {name:'phone_work', index:'phone_work', width:200},
               {name:'phone_home', index:'phone_home', width:200},
               {name:'phone_mobile', index:'phone_mobile', width:200},
               {name:'fax', index:'fax', width:200},
               {name:'source_name', index:'source_name', width:150},
               {name:'allocated_to', index:'allocated_to', width:150}
               ],
           stateOptions: {
               storageKey: "LeadsCookie",
               columns: true,
               filters: true,
               selection: false,
               pager: true,
               order: true
           },
           pager: jQuery('#pager'),
           rowNum:<?= isset($_SESSION["jqlimit"])?$_SESSION["jqlimit"]:10?>,
           rowList:[10,20,50,100],
           sortname: 'u.last_name',
           sortorder: 'ASC',
           multiselect: true,
           viewrecords: true,
           caption: 'Leads',
           height:'auto',
           shrinkToFit:false,
           loadComplete: function(){
               setTimeout(function(){
                      $("#list").setGridWidth($("#flexicontent").width());
                      $(".ui-jqgrid-bdiv").css("overflow","auto");
                  },100);
           },
           loadError : function(xhr,st,err) { jQuery("#rsperror").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText); }
           });
           $("#list").jqGrid('navGrid','#pager',{del:false,add:false,edit:false,search:false});
           $("#list").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
           $(window).bind('resize', function() {
               $("#list").setGridWidth($("#flexicontent").width());
               $(".ui-jqgrid-bdiv").css("overflow","auto");
           }).trigger('resize');

Ignore stateoptions value. If u want the grid to fit in 100% with no scroll then set $(".ui-jqgrid-bdiv").css("overflow","none"); , also set shrinkToFit:true,

oh, $("#list").setGridWidth($("#flexicontent").width()); ---- flexicontent is a div surrounding the whole thing set to a percentage, when u resize ur screen the grid will move too.

Hope you solve it

12/10/2010
14:38

smetatag

New Member

Members

Forum Posts: 1

Member Since:
12/10/2010

Offline

4

The problem seems to appear in Firefox ony, in Chrome it is OK. The calculated widths do match

but firefox renders it wrong?!

Edit:

solved

th {

   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}