Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
2225
Column text justification.
posted

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.

Parents
  • 24671
    posted

    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

Reply
  • 6279
    posted in reply to Robert

    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 

    t58669.zip
Children