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.
This worked for me:
, { headerText:"Sale Amt", key: "TotalSale", dataType: "decimal", width: "68px", format: "currency", template: "<div style='font-size: 8pt; text-align: right;'>${TotalSale}</div>" }
Please would someone assist me with right aligning the contents of columns 5,6,7 and 8
I have tried everything without success.
@using Infragistics.Web.Mvc@model IQueryable<SA.SysFin.Web.ViewModels.Client.ClientLoanList>
@{ViewBag.Title = "Client Account List";}
<!-- Infragistics Specific Jcript and CSS bundles-->@Scripts.Render("~/bundles/infragisticsjs")@Styles.Render("~/bundles/infragisticscss")
<script src="~/Infragistics/js/infragistics.loader.js"></script>@(Html.Infragistics().Loader().ScriptPath(Url.Content("~/Infragistics/js/")).CssPath(Url.Content("~/Infragistics/css/")).Resources("igGrid").Render())
<script type="text/javascript">$(document).ready(function () {$("#clientLoanList").live("iggriddatarendered", function (event, args) { // right-justify text in the fifth column args.owner.element.find("tr td:nth-child(5)").css("text-align", "right"); });
});</script>
<div>@(Html.Infragistics().Grid(Model.AsQueryable()) .ID("clientLoanList") .Width("100%") .PrimaryKey("Id") .AutoGenerateColumns(false) .Columns(columns => { columns.For(x => x.Id).DataType("string").Hidden(true); columns.For(x => x.AccountNo).DataType("int").Width("10%"); columns.For(x => x.GoodsDescription).DataType("string").Width("30%"); columns.For(x => x.AgreementType).DataType("string").Width("12%"); columns.For(x => x.Balance).DataType("decimal").Width("12%").Format("0.00"); columns.For(x => x.Arrears).DataType("decimal").Width("12%").Format("0.00"); columns.For(x => x.NextInstDate).DataType("date").Width("12%").Format("yyyy-MM-dd"); columns.For(x => x.NextInstAmount).DataType("decimal").Width("12%").Format("0.00"); }) .Features(features => { features.Paging().PageSize(10).PrevPageLabelText("Previous").NextPageLabelText("Next"); features.Sorting().Mode(SortingMode.Single).ColumnSettings(settings => settings.ColumnSetting().ColumnKey("Name").AllowSorting(true)); features.Selection().Mode(SelectionMode.Row).MultipleSelection(false); }) .DataBind() .Render())</div>
Many thanks in advance.
Glad to help out :)
Thanks, Bobby, that's exactly what I needed.
Hi Grant,
Yeah - the DOM of the grid is fickle (mostly in order to squeeze out performance in as many scenarios as possible).The main idea is that you need an event of the grid after which the grid's data records are already appended to the DOM and there are a couple that can do you good - rowsRendered and dataRendered.
The next logical step is to try and apply the text justification and you will need to use :nth-child() to grab the TDs of only those columns you need like so:
rowsRendered: function(evt, ui) { $("#" + ui.owner.id() + ">tbody:eq(0)").children('tr').children('td:nth-child(2)').css("text-align", "center"); }
There's trick here though - nth-child is the only jQuery (CSS actually) function that's not zero-based so you will need to be careful in order to match the indices of your columns. For example in the snippet above I'm styling the 2nd column - Name.Actually using nth-child in order to style columns of a table is the way to go regardless if you're working with a regular HTML table or a JavaScript-powered one.I've also prepared a jsFiddle based off my previous sample so you can see the change in action: http://jsfiddle.net/BorislavTraykov/2je9m/3/PS: I'd like to note that I'm deliberately using the children function to get the TRs and then TDs - this is extremely important to do if you start dealing with a hierarchical grid at some point as find() will just start traversing child grids like a pro and leave you with lousy results.Hope this helps,Bobby