right align dynamic column of datatype number in iggrid

Question

I am using Ignite UI grid.

The columns is dynamically build from the database like this:-

 $.post('/Main/GetColumns',function(data){

      $("#mygrid").igGrid({
                         columns: data,
                         width: "100%",
                         height: "100%", 
                         })
  });

The problem is that i dont know which of the column will be of datatype number since data is comming from database for columns and i have to right align the numeric columns.

The only code i have found is

args.owner.element.find("tr td:nth-child(3)").css("text-align", "right");

to set 3rd column as right align. Since i dont know the column order, i am only left to check for datatype and right align the column,

Is there any way to align column on basis of datatype or any other method to do this?

Damyan Petev · Accepted Answer · 2015-09-15T14:12:44.057

5

The data type if the column is used for it's representation(formatting) and editing behavior, but there's no extra markup generated that you can use to target with styling.

However, you are building column definitions server side, where you know exactly what type each column is while creating its definition, no?

Update: It's been a while since the original answer and for future reference you can use the columnCssClass to apply your class to the actual TD rather than the template. The latter is still a valid option for advanced tinkering.

Easiest way I can think of is through Column templates - this way you can add whatever styling / formatting to the columns. For example, based of whatever logic you need, you return some columns as:

{
    key: 'status',
    dataType: 'bool',
    headerText: 'Status',
    template: '<div class="rightAlign"> ${status} </div>'
}

You apply "text-align:right;" though the class and skip adding template for columns that should be with default look. Since this definition is generated on the server (imagine my example uses Node.js :P ) you can have those templates static, or create them differently each time - it's up to you.

JSFiddle: http://jsfiddle.net/damyanpetev/wsZ8c/

Note: Make sure you use a block (div,p) in this case as you need something that will take up the entire grid cell in order to align text inside.

If that solution doesn't fit, you will have to go through columns and apply styling on the client in a similar way you were thinking of.

edited Sep 15 '15 at 14:12

answered Nov 12 '13 at 18:39

Damyan Petev

1,585
7
10

Well explained.:) worked like a charm....was struggling for this for a long time. – abc123 Nov 13 '13 at 04:03
@Damyan Petev: How to do the same for header texts? i want too change the alignment in header texts also, based on some condition – Vivek Vardhan Jan 08 '15 at 11:41
1

Excellent answer, but it really shows how poor the ig-grid stuff is (that they don't provide an optional "text-align" element for each "column"). @Vivek: Here's the reluctant CSS hack you have to do, to center a header string, http://www.infragistics.com/community/forums/t/85884.aspx No...they didn't provide a simple way to do that, either... – Mike Gledhill Sep 15 '15 at 13:07
@mike-gledhill Styling is CSS job, so changing the default alignment with override is not really a hack. As for per-column overrides, both answers are somewhat old, so I updated above with column class option and there's an equivalent for the header as well. It'll still be the exact same style to set, just targeting a different class and not global. – Damyan Petev Sep 15 '15 at 14:19
@Damyan (Infragistics employee)... Yes, these are hacks. Have a look at a decent, Angular-friendly, free control like ng-grid. There, you can just give a CSS classname to a particular column, rather than messing around with templates, and having to quote the field name a second time. Seriously, ig-grid is an appalling piece of work, and the Angular samples on your website all (deliberately) use hard-coded Northwind data, rather than showing to developers how difficult it is to use in real web apps. – Mike Gledhill Sep 16 '15 at 13:34
@Damyan: I should point out, I've burned many, many hours trying to get ig-grid working, and even when your colleague has nudged me in the right direction, he's slipped in a hard-coded primary key value to cheat to get his example to work (see the samples posted in http://www.infragistics.com/community/forums/p/101720/487473.aspx#487473) You desperately need decent, real-world examples. For example, ig-hierarchical-grid works fine with Angular data.. oh, as long as that data is already loaded (or hardcoded) when the page first loads. Hopeless... – Mike Gledhill Sep 16 '15 at 14:03

score 0 · Answer 2 · edited Mar 27 '14 at 13:43

Here is how I dynamically align the text in the columns in the infragistics igHierarchicalGrid according to their data types:

$("#grid1").on("iggriddatarendered", function (event, args) {

        var columns = $("#grid1").igHierarchicalGrid("option", "columns");
         //var RDate = $("#grid1").igHierarchicalGrid("getCellValue", 1, 1);
        var columnIndex = 0;
        var trtd = 2;
        for (var idx = 0; idx < columns.length; idx++) {
            if (columns[idx].dataType == "number" || columns[idx].dataType == "double")
                args.owner.element.find("tr td:nth-child(" + trtd + ")").css("text-align", "right");
            if (columns[idx].dataType == "string" || columns[idx].dataType == "date")
                args.owner.element.find("tr td:nth-child(" + trtd + ")").css("text-align", "left");

            columnIndex++;
            trtd = columnIndex + 2; 
        }
    });

As you see I am starting with vartd = 2 and this is because there are 2 elements in the table (I use hierachcical grid) before the columns in the grid are available. You must debug and investigate if in your case the columns of the grid are coming after the second DOM element or after the first.

score 0 · Answer 3 · answered Aug 28 '20 at 07:44

In easy way you can add css into columnCssClass property and applied into grid where you were define column information

Style:

<style>
        .right-align {
            text-align: right;
        }

        .left-align {
            text-align: left;
        }

        .center-align {
            text-align: center;
        }
</style>

and grid code snippet:

{ headerText: 'Option', key: "Option", dataType: "string", width: "10%", hidden: true },
{ headerText: 'ID', key: "Program_Id", dataType: "string", width: "10%", columnCssClass: "right-align" },
{ headerText: 'Desc', key: "Program_Des", dataType: "string", width: "10%", columnCssClass: "left-align" },
{ headerText: 'Status', key: "program_Status", dataType: "Bool", width: "10%", columnCssClass: "center-align" },

right align dynamic column of datatype number in iggrid

3 Answers3