Column Alignment "center"

[bertbeckMember]

How can I center a column header or column data (would like to be able to do these separately).
I tried using:

.jqx-grid-cell {text-align:center}
.jqx-grid-column-header {text-align:center}

But this did not work – I assume because the cell is a span and is floated.

Bert

[Peter StoevKeymaster]

Hi Bert,

To center the cells and columns, you can create custom renderers for the cells and columns.

For example:

            var dataAdapter = new $.jqx.dataAdapter(source);
            var cellsrenderer = function (row, column, value) {
                return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
            }
            var columnrenderer = function (value) {
                return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';       
            }
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                columns: [
                  { text: 'First Name', dataField: 'firstname', renderer: columnrenderer, cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { text: 'Product', dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
                ]
            });

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[kuberasamratParticipant]

How do I center align the column name in the header?

[Peter StoevKeymaster]

Hi kuberasamrat,

You can take a look at this sample: alignment.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts