Question

I want to align my html table columns in left but the table is dynamically coming to ui from json using wijgrid of wijmo ui (jquery library)…..I know how to align rows of table but I don’t know how to align header columns which could be fix in wijgrid (I am not sure).

I have tried below code which is working fine with rows alignment but not working with header align.

My code:

$("#userlist").wijgrid({ 

ensureColumnsPxWidth:true,

columns: [ 

{headerText: "UserId", dataType:"string",width:"8%",
                                                             cellFormatter: function (args) {

if (args.row.type & $.wijmo.wijgrid.rowType.data) {

args.$container
.css("text-align", "center")

return false;

} }
                                                                                                                                      },
]                                                     }); 

Please tell me the solutions…..Thanks Tina!!

Answer 1

Change your if statement to check for header rowType instead of data. (or take out the check altogether if you want both header and data rows to be centered.

if (args.row.type & $.wijmo.wijgrid.rowType.header) { ... }

I would suggest using CSS instead though. Then you won’t be rendering styles on every cell. A pure CSS solution would be best. You can do that like so:

<style type="text/css">
    .wijmo-wijgrid .wijmo-wijgrid-headerrow .wijmo-c1basefield
    {
        text-align: left;
    }
    .wijmo-wijgrid .wijmo-wijgrid-headerrow .wijmo-wijgrid-headertext
    {
        padding: 0.5em 0.25em;
    }
</style>