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
Borislav, your code snippet above seems to only set the column *headers* for me.
I changed the function to apply the css to "ui.td", but it doesn't seem to work. Am I missing something?
Having a hard time with this one. The DOM for this grid is pretty hairy.
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
Thanks, Bobby, that's exactly what I needed.
Glad to help out :)
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.