{"id":835,"date":"2019-07-01T10:09:00","date_gmt":"2019-07-01T10:09:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=835"},"modified":"2025-02-26T12:22:51","modified_gmt":"2025-02-26T12:22:51","slug":"auto-generated-columns","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/auto-generated-columns","title":{"rendered":"Working with Auto-Generated Columns in the Ignite UI for Angular Grid"},"content":{"rendered":"\n<p>Ignite UI for Angular&nbsp;Grid is the fastest data grid available. It not only helps to run applications faster but also allows you as a developer to write applications faster.<\/p>\n\n\n\n<p>To see it in action, assume that you have a\u00a0 data source as shown in the code listing below:\u00a0<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">this.products\u00a0=\u00a0[\n\u00a0\u00a0\u00a0\u00a0{\u00a0Id:\u00a0'1',\u00a0Title:\u00a0'Book',\u00a0ExpiryDate:\u00a0new\u00a0Date(),\u00a0Price:\u00a035,\u00a0Rating:\u00a03.5\u00a0},\n\u00a0\u00a0\u00a0\u00a0{\u00a0Id:\u00a0'2',\u00a0Title:\u00a0'Pen',\u00a0ExpiryDate:\u00a0new\u00a0Date(),\u00a0Price:\u00a025,\u00a0Rating:\u00a04.0\u00a0},\n\u00a0\u00a0\u00a0\u00a0{\u00a0Id:\u00a0'3',\u00a0Title:\u00a0'Pencil',\u00a0ExpiryDate:\u00a0new\u00a0Date(),\u00a0Price:\u00a020,\u00a0Rating:\u00a03.2\u00a0},\n\u00a0\u00a0\u00a0\u00a0{\u00a0Id:\u00a0'4',\u00a0Title:\u00a0'Bat',\u00a0ExpiryDate:\u00a0new\u00a0Date(),\u00a0Price:\u00a0135,\u00a0Rating:\u00a04.0\u00a0},\n\u00a0\u00a0\u00a0\u00a0{\u00a0Id:\u00a0'5',\u00a0Title:\u00a0'Ball',\u00a0ExpiryDate:\u00a0new\u00a0Date(),\u00a0Price:\u00a065,\u00a0Rating:\u00a03.8\u00a0},\n];<\/pre>\n\n\n\n<p>You can render the above data in igxGrid by simply defining an instance of the igxGrid in the component\u2019s template and binding the data property to the product array. It is straightforward to add as shown in the below code listing:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;igx-grid\u00a0[data]=\"products\"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0[autoGenerate]=\"true\"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width=\"960px\">\n\u00a0&lt;\/igx-grid><\/pre>\n\n\n\n<p>By setting only data and autoGenerate properties, you should get data rendered in igxGrid as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/3348.pastedimage1561975904747v1.png\" alt=\" By setting only data and autoGenerate properties, you should get data rendered in igxGrid as shown\" title=\"By setting only data and autoGenerate properties, you should get data rendered in igxGrid as shown\"\/><\/figure>\n\n\n\n<p>Since the autoGenerate property is set to true, Ignite UI will generate columns with default properties configured. However, Ignite UI for Angular Grid has a ton of features such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Filtering<\/li>\n\n\n\n<li>Paging<\/li>\n\n\n\n<li>Sorting<\/li>\n\n\n\n<li>Column pinning<\/li>\n\n\n\n<li>Column hiding<\/li>\n\n\n\n<li>Column template<\/li>\n\n\n\n<li>Header template etc. and many more.<\/li>\n<\/ul>\n\n\n\n<p>As a developer, you may want to configure these features depending on your business requirements. There are two ways to do this:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Set the autoGenerate property to false and configure columns manually. Learn more about it <a href=\"\/blogs\/formatting-data-using-pipes\/\">here<\/a>.<\/li>\n\n\n\n<li>If columns are generated automatically, configure the above features at run time in the component class.<\/li>\n<\/ol>\n\n\n\n<p>We can configure essential features at run time when columns are initialized. Ignite UI for Angular igxGridComponent provides you an event <strong>onColumInit. <\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/8228.pastedimage1561975947274v2.png\" alt=\" at run time when columns are initialized. Ignite UI for Angular igxGridComponent provides you an event onColumInit. \" title=\"at run time when columns are initialized. Ignite UI for Angular igxGridComponent provides you an event onColumInit. \"\/><\/figure>\n\n\n\n<p>At the time of column initialization, the onColumnInit event is executed. Any business logic you wish to execute at this time, you should write inside this event. For example, we can write code to enable various features as shown in the below image:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/2843.pastedimage1561975978812v3.png\" alt=\" For example, we can write code to enable various features as shown in the below\" title=\"For example, we can write code to enable various features as shown in the below\"\/><\/figure>\n\n\n\n<p>You can handle the event in the component class, as shown in the code listing below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/4010.pastedimage1561976000815v4.png\" alt=\" can handle the event in the component class, as shown in the code listing\" title=\"can handle the event in the component class, as shown in the code listing\"\/><\/figure>\n\n\n\n<p>If you want to pin a particular column in a particular location, you can do that as follows<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public\u00a0onColumnInit(column:\u00a0IgxColumnComponent)\u00a0{\n\u00a0\u00a0\u00a0\u00a0if\u00a0(column.field\u00a0===\u00a0'Title')\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0column.pin();\n\u00a0\u00a0\u00a0\u00a0}\n}<\/pre>\n\n\n\n<p>You will find the Title column pinned to the left side as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/7633.pastedimage1561976098265v5.png\" alt=\" find the Title column pinned to the left side as shown\" title=\"find the Title column pinned to the left side as shown\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>You can hide a column at runtime while initializing by setting the hidden property value to true:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public\u00a0onColumnInit(column:\u00a0IgxColumnComponent)\u00a0{\n\u00a0\u00a0\u00a0\u00a0if\u00a0(column.field\u00a0===\u00a0'Id')\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0column.hidden\u00a0=\u00a0true;\n\u00a0\u00a0\u00a0\u00a0}\n}<\/pre>\n\n\n\n<p>&nbsp;You can also make a column editable by setting the editable property to true:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public\u00a0onColumnInit(column:\u00a0IgxColumnComponent)\u00a0{\n\u00a0\u00a0\u00a0\u00a0if\u00a0(column.field\u00a0===\u00a0'ExpiryDate')\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0column.editable\u00a0=\u00a0true;\n\u00a0\u00a0\u00a0\u00a0}\n}<\/pre>\n\n\n\n<p>When igxGrid renders, ExpiryDate column should be editable as shown in below image. You might also notice that in editing mode, Ignite UI gives you the option to edit the date type column in igxCalandar<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/5305.pastedimage1561976211740v6.png\" alt=\" Ignite UI gives you the option to edit the date type column in igxCalandar\" title=\"Ignite UI gives you the option to edit the date type column in igxCalandar\"\/><\/figure>\n\n\n\n<p>As you can see, it\u2019s very easy to configure various features in auto generated columns.&nbsp; Besides configuring features, you can also format column data to a specified output. In Angular, pipes do that. So for auto generated columns, you apply pipes using the formatter function.<\/p>\n\n\n\n<p>Let us say that you want to,<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Display ExpiryDate in specific date format<\/li>\n\n\n\n<li>Display Title in upper case<\/li>\n<\/ol>\n\n\n\n<p>For that, you can use the formatter function in onColumnInit event as shown in the below image. Here we are using toLocaleDateString to convert date output to local date format and toUpperCase to display output in uppercase.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/4747.pastedimage1561976244941v7.png\" alt=\" using toLocaleDateString to convert date output to local date format and toUpperCase to display output in uppercase.\" title=\"using toLocaleDateString to convert date output to local date format and toUpperCase to display output in uppercase.\"\/><\/figure>\n\n\n\n<p>After applying above formatter, you will find data in Title column is formatted in uppercase and data of ExpiryDate column is formatted in the local date string format.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/7462.pastedimage1561976277350v8.png\" alt=\" ExpiryDate column is formatted in the local date string format.\" title=\"ExpiryDate column is formatted in the local date string format.\"\/><\/figure>\n\n\n\n<p>You can use formatter for complex business logic as well. You can pass multiple statements as logic using the formatter arrow function. For example, for Price column, if price data is less than 50, you need to add a text \u2018Discounted\u2019 next to the price data. You can very quickly do that, as shown in the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/7462.pastedimage1561976304740v9.png\" alt=\" You can very quickly do that, as shown in the image below\" title=\"You can very quickly do that, as shown in the image below\"\/><\/figure>\n\n\n\n<p>You will get Ignite UI for Angular Grid rendered with applied formatter as shown in the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/1185.pastedimage1561976338911v10.png\" alt=\" Ignite UI for Angular Grid rendered with applied formatter as shown in the image\" title=\"Ignite UI for Angular Grid rendered with applied formatter as shown in the image\"\/><\/figure>\n\n\n\n<p>As discussed earlier, not only format the column data but also you can utilize other features also. Very smoothly, you can perform various other operations such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Setting a summary<\/li>\n\n\n\n<li>Setting filters<\/li>\n\n\n\n<li>Setting formatters<\/li>\n\n\n\n<li>Setting width<\/li>\n\n\n\n<li>Setting header value<\/li>\n\n\n\n<li>Setting header template<\/li>\n\n\n\n<li>Setting movable property<\/li>\n\n\n\n<li>Setting hidden attributes etc.<\/li>\n<\/ul>\n\n\n\n<p>We will&nbsp; cover the above features individually in other blog posts. However, it\u2019s important that you understand how to configure features when <a title=\"Ignite UI for Angular Data Grid\" href=\"\/products\/ignite-ui-angular#angular-grid\" target=\"_blank\" rel=\"noopener noreferrer\">Ignite UI for Angular Grid<\/a> columns are being initialized, as discussed in this blog.&nbsp; You can download a 30-day trial of <a href=\"\/products\/ignite-ui-angular\">Ignite UI for Angular from here<\/a>. I hope you find this post useful.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ignite UI for Angular\u00a0Grid is the fastest data grid available. It not only helps to run applications faster but also allows you as a developer to write applications faster.<\/p>\n","protected":false},"author":65,"featured_media":2390,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-835","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/835","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=835"}],"version-history":[{"count":3,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/835\/revisions"}],"predecessor-version":[{"id":2523,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/835\/revisions\/2523"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/2390"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=835"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=835"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=835"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}