Print Page - How to format a datagrid column header

Title: How to format a datagrid column header
Post by: Kevin on September 15, 2014, 04:03:57 PM

I'm trying to format one of my datagrid's column header but I'm having no luck in getting this done. So for example;

Code:

<table id='rep'>  
   <thead>  
      <tr>
         <th data-options="field:'tripStart',width:120,align:'left'">Trip Start</th>  
         <th data-options="field:'speed1',width:60,align:'right'">1-120km/h</th>  
         <th data-options="field:'speed2',width:60,align:'right'" style="background-color: #FF0000">121-180km/h</th>  
         <th data-options="field:'cost',width:80,align:'right'">Cost</th>  
      </tr>  
   </thead>  
</table>

I need to have the 3rd column header displayed with a red background. The table rows are displayed per normal with no special formatting, it's only the column header.

Is this possible?

Title: Re: How to format a datagrid column header
Post by: stworthy on September 15, 2014, 07:56:24 PM

After created datagrid successfully, find the specified header cell and change its css style.

Code:

var dg = $('#rep');
dg.datagrid();
var td = dg.datagrid('getPanel').find('div.datagrid-header td[field="speed2"]');
td.css('background-color','#ff0000');

Title: Re: How to format a datagrid column header
Post by: Kevin on September 15, 2014, 09:27:09 PM

Thanks very much stworthy. As always, you come to the rescue. I did have to make 1 small change - I removed the line with;
dg.datagrid();

With it in, my datagrid would reload the rows when it executed this line.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Kevin on September 15, 2014, 04:03:57 PM