I'm sure it's simple, but I'm not figuring it out.
I have a column that I'm formatting as currency. However, all of the text is Left justified in that column. It would be a lot easier to read if all the values lined up and where right justified.
What do I do if I want to right justify a column... or center since we're on the topic.
Hi Tony,
you can use some jQuery code similar to this one below, it will do it. At the moment there isn't a way to do this by setting just a column option in the grid configuration, but it's on the list.
$("#grid1").live("iggridrendered", function (event, args) { // right-justify text in the third column args.owner.element.find("tr td:nth-child(3)").css("text-align", "right"); // or "center" });
In the context of MVC, it could be declared like:
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <script type="text/javascript"> $(document).ready(function () { $("#grid1").live("iggridrendered", function (event, args) { // right-justify text in the third column args.owner.element.find("tr td:nth-child(3)").css("text-align", "right"); }); }); </script> <%= Html.Infragistics().Grid(Model).ID("grid1").Height("250px").Columns(column =>
// rest of the grid definition
Hope it helps,
Angel
This script works great, but is there a way to specify the alignment of INDIVIDUAL columns. I see that you can use css to specify the alignment of all columns. Thanks in advance for any advice.
Sure! :)
All you need to do is hook up to the headerCellRendered event of the igGrid and in the handler consider the ui.columnKey param.Thus you can apply the text justification only to the desired columns.Here's a code sample of how to accomplish this:(I'm attaching a working HTML page that illustrates the sample code)
$("#Grid1").igGrid({ autoGenerateColumns: false, dataSource: sourceData, primaryKey: "ProjectID", columns: [ { key: "ProjectID", headerText: "Project Id", width: 100, dataType: "number" }, { key: "Name", headerText: "Name", width: 200, dataType: "string" }, { key: "StartDate", headerText: "Start Date", width: 150, dataType: "date" }, { key: "EndDate", headerText: "End Date", width: 150, dataType: "date" }, { key: "IsPostponed", headerText: "Is Postponed", width: 100, dataType: "bool" } ], headerCellRendered: function(evt, ui) { if(ui.columnKey === "Name" || ui.columnKey === "StartDate") { $(ui.th).css("text-align", "center"); } } });
Cheers!Borislav
CssClass would be an ideal property of the column object.
Is it still the case that there's no built-in left/right/center justification for igGrid columns?
Hi Dirk,Sounds like a swell idea :)However, I'm a bit skeptical about it because the igGrid's column object tends to shape the data records of the column (the headerText option being an exception of course).
From the naming convention you used, I gather that you use MVC and that's fine. Point is that this might be interpreted as CSS class for
Thus the proposed option will have a simplistic name, but its purpose will be ambiguous.Having a custom class applied to the 3 type of cells can certainly be useful and I don't think that it's that hard to accomplish using JavaScript and the grid's event(s).However if you feel that the idea for the property is a-OK, go ahead and use Feature Request form to submit it to our developers.Cheers! Borislav