Ignite UI Dock Managerhttps://www.infragistics.com/community/blogs/b/infragisticsen-USTelligent Community 10 Non-ProductionWhat’s New in 20.1: Ultimate UI for Xamarinhttps://www.infragistics.com/community/blogs/b/infragistics/posts/what-s-new-in-20-1-ultimate-ui-for-xamarinTue, 02 Jun 2020 19:01:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:8668ca27-4a11-4984-8ea5-62d5038a6e26Brian Lagunas0<p><span class="TextRun SCXW20575013" lang="EN-US">We&rsquo;re proud to announce the following new features and improvements in</span><span class="TextRun SCXW20575013" lang="EN-US">&nbsp;Infragistics Ultimate UI for</span><span class="TextRun SCXW20575013" lang="EN-US">&nbsp;Xamarin in this 20.1 release. With enhanced grid and charting features, Infragistics Ultimate UI for Xamarin&nbsp;</span><span class="TextRun SCXW20575013" lang="EN-US">helps you build great mobile apps faster than ever. </span><span class="TextRun SCXW20575013" lang="EN-US">Here are the newest features and improvements you can use in your Xamarin apps today.</span></p>
<h1><span>Data Grid</span></h1>
<p>The data grid is probably the most important control an app can have. So, it&#39;s no surprise that we are continuously improving our data grid.&nbsp; In this 20.1 release, the Xamarin data grid gets column pinning and column summaries.&nbsp; Let&#39;s dig into the details of these two additional data grid features.</p>
<h3><span>Column Pinning</span><span>&nbsp;</span></h3>
<p>Column pinning... that basically says it all.&nbsp; This simple, yet difficult to implement feature, adds the ability for a&nbsp;column, or multiple columns, to be pinned to the left-hand or right-hand side of the&nbsp;data&nbsp;grid.&nbsp; &nbsp;Pinning a column is as simple as setting&nbsp;the&nbsp;<strong>Pinned&nbsp;</strong>property on the column.</p>
<p><pre class="ui-code" data-mode="text">&lt;ig:TextColumn HeaderText=&quot;First Name&quot; PropertyPath=&quot;FirstName&quot; Pinned=&quot;Left&quot;/&gt; </pre></p>
<p><span>The&nbsp;</span><b><span>P</span></b><b><span>inned</span></b><span>&nbsp;property has three options:</span><span>&nbsp;</span></p>
<ul>
<li><span>Left - enabling Left will position pinned columns to the left-hand side of the grid</span><span>&nbsp;</span></li>
<li><span>Right - enabling Right will position pinned columns to the right side of the grid.</span><span>&nbsp;</span></li>
<li><span>None - enabling None will unpin a column and reposition its default placement within the grid.</span><span>&nbsp;</span></li>
</ul>
<p>Optionally, you can programmatically pin and unpin columns using the new&nbsp;<strong>PinColumn</strong>&nbsp;method.&nbsp;As expected, the columns that are not pinned&nbsp;will still maintain horizontal scrolling.</p>
<p><img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/0702.GridPinning.jpg" /></p>
<h3><span>Column Summaries</span><span>&nbsp;</span></h3>
<p>Summaries are another one of those features that are extremely difficult to implement, yet provide the ability to aggregate your data in a very simplistic way. To use summaries in the Infragistics Xamarin Data Grid, simply add a collection of&nbsp;<strong>ColumnSummaryDecriptions</strong>&nbsp;to the grid&rsquo;s&nbsp;<strong>SummaryDescriptions</strong>&nbsp;property, and be sure to set the grid&rsquo;s&nbsp;<strong>SummaryScope</strong>&nbsp;property to its appropriate value.</p>
<p><span>The grid supports&nbsp;</span><span>four</span><span>&nbsp;summary settings that you can configure using the&nbsp;</span><b><span>S</span></b><b><span>ummaryScope</span></b><span>&nbsp;property</span><span>:</span><span>&nbsp;</span></p>
<ul>
<li><span>Root</span><span>&nbsp;&ndash; This&nbsp;</span><span>will&nbsp;</span><span>place the summary&nbsp;</span><span>area&nbsp;</span><span>at the bottom of the grid.</span><span>&nbsp;</span></li>
<li><span>Sections</span><span>&nbsp;&ndash; (Groups)&nbsp;</span><span>This will place&nbsp;</span><span>a</span><span>&nbsp;summary&nbsp;</span><span>area</span><span>&nbsp;within the scope of grouped records. When using this value, the&nbsp;</span><b><span>GroupSummaryDisplayMode</span></b><span>&nbsp;i</span><span>s</span><span>&nbsp;used to control the location of the summary&nbsp;</span><span>area</span><span>&nbsp;within the scope of the grouped record.</span><span>&nbsp;</span></li>
<li><span>Both</span><span>&nbsp;&ndash; adds a summary to both the grid, and to each grouped record.</span><span>&nbsp;</span></li>
<li><span>None</span><span>&nbsp;&ndash; no summary area is added</span><span>&nbsp;</span></li>
</ul>
<p><span></span></p>
<p><span><pre class="ui-code" data-mode="text">&lt;ig:XamDataGrid SummaryScope=&quot;Root&quot; &gt;
&lt;ig:XamDataGrid.SummaryDescriptions&gt;
&lt;ig:ColumnSummaryDescription PropertyPath=&quot;Product&quot; Operand=&quot;Count&quot; /&gt;
&lt;/ig:XamDataGrid.SummaryDescriptions&gt;
&lt;/ig:XamDataGrid&gt; </pre></span></p>
<p><span>When using the&nbsp;</span><span>SummaryScope.</span><b><span>Sections</span></b><span>&nbsp;scope,&nbsp;</span><span>the&nbsp;</span><b><span>GroupSummaryDisplayMode</span></b><span>&nbsp;</span><span>property&nbsp;</span><span>is used to control the location of the summary area within the scope of the grouped record.&nbsp; The&nbsp;</span><b><span>GroupSummaryDisplayMode</span></b><span>&nbsp;has&nbsp;</span><span>five</span><span>&nbsp;options</span><span>:&nbsp;</span><span>&nbsp;</span></p>
<ul>
<li><span>List</span><span>&nbsp;&ndash; summaries are listed inline of the group&nbsp;</span><span>header</span><span>&nbsp;</span></li>
<li><span>Cells</span><span>&nbsp;</span><span>&ndash;</span><span>&nbsp;</span><span>summaries are listed as values in the corresponding cells</span><span>&nbsp;and aligned with their column</span><span>&nbsp;</span></li>
<li><span>RowTop</span><span>&nbsp;&ndash; places a summary area at the top of the group</span><span>&nbsp;</span></li>
<li><span>RowBottom</span><span>&nbsp;&ndash; places the summary area at the bottom of the group</span><span>&nbsp;</span></li>
<li><span>None</span><span>&nbsp;&ndash; no summaries shown.</span><span>&nbsp;</span></li>
</ul>
<p><pre class="ui-code" data-mode="text">&lt;ig:XamDataGrid SummaryScope=&quot;Sections&quot; GroupSummaryDisplayMode=&quot;RowTop&quot; &gt; </pre></p>
<p><span>It is</span><span>&nbsp;also possible to create custom summaries</span><span>&nbsp;by implementing a class that derives from&nbsp;</span><b><span>SummaryCalculator</span></b><span>&nbsp;and providing an instance of your custom summary calculator in the&nbsp;</span><span>ColumnSummaryDescription.</span><b><span>ProvideCalculator</span></b><span>&nbsp;event.</span><span>&nbsp;</span></p>
<p><span><img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/8244.GridSummaries.jpg" /></span></p>
<h1><span>Category Chart</span><span>&nbsp;</span></h1>
<p>Besides data grids, charts are another important control in mobile applications. They help visualize your data in a way that helps your end-user best interpret their data to make business critical decisions. Here are the newest features we added to the Category Chart.</p>
<h3><span>Callout Layer</span><span>&nbsp;</span></h3>
<p><span>With the Callouts Annotation, you can annotate important data points in the chart or even customize values in callout boxes based on your logic.</span></p>
<p><span>&nbsp;<img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/2867.category_5F00_chart_5F00_callouts.PNG" /></span></p>
<h3><span>Crosshairs Layer</span><span>&nbsp;</span></h3>
<p><span>You can configure crosshairs to display as horizontal line, vertical line or both lines at the location of the mouse cursor. In addition, the Crosshairs Annotation can show values of data points at the location of the mouse cursor and render these values in&nbsp;</span><span>colored boxes over the X-Axis and Y-Axis labels.</span><span>&nbsp;</span></p>
<p><span>&nbsp;<img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/2867.category_5F00_chart_5F00_crosshair.PNG" /></span></p>
<h3><span>Final Value Layer</span><span>&nbsp;</span></h3>
<p><span>Final Values annotation show values of the last data point in your data source(s). This annotation is rendered as a colored box for each data source over the Y-Axis labels.</span><span>&nbsp;</span></p>
<p><span>&nbsp;<img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/0310.category_5F00_chart_5F00_final_5F00_value.PNG" /></span></p>
<h3><span>Highlight Layer</span><span>&nbsp;</span></h3>
<p><span>The Category Chart can display two new highlight layers when a user hovers over plotted data points.</span><span>&nbsp;The&nbsp;</span><span>Highlight Layer renders a vertical rectangle that stretches from the start to end of the category that is closest to the mouse cursor. This rectangle is filled with semi-transparent gray color by default.</span><span>&nbsp;The&nbsp;</span><span>Item Highlight Layer renders a vertical rectangle for each data item in a category that is closest to the mouse cursor. This rectangle is filled with semi-transparent color that matches color of the series by default.</span><span>&nbsp;</span></p>
<p><span>&nbsp;<img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/0310.category_5F00_chart_5F00_highlight.png" /></span></p>
<h3><span>Tooltip Layer</span><span>&nbsp;</span></h3>
<p><span>The Category Chart has a new&nbsp;ToolTipType&nbsp;property that adds two new types of tooltips:</span><span>&nbsp;</span></p>
<ul>
<li><span>Category Tooltip which renders the combined tooltips for all series in data category</span></li>
<li>Item Tooltip which renders individual tooltip for each series in data category.<span>&nbsp;</span></li>
</ul>
<p><span>&nbsp;<img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/4034.category_5F00_chart_5F00_tooltip.png" /></span></p>
<h1><span>Data Chart</span><span>&nbsp;</span></h1>
<p><span>You may or may not know this, but the Category Chart is built on top of our extremely rich and power Data Chart control. This means that in order for the Category Chart to have a feature, it must be implemented in the base Data Chart control. This is why the features for the Category Chart and Data Chart are so similar. Specifically, in the 20.1 release, the Callout Layer and the Final Value Layer features are identical for both the Category Chart and the Data Chart,</span></p>
<h3><span>Callout Layer</span><span>&nbsp;</span></h3>
<p><span>Callouts Layer is a new feature of Data Chart that you can use to annotate important data points or display their values. Callouts Layer can target multiple data series or individual data series. Also, you can customize appearance of these callout layers and bind callout labels to data items or calculate changes between consecutive data points.</span><span>&nbsp;</span></p>
<p><span>&nbsp;<img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/4034.datachart_2D00_callout_2D00_layer.png" /></span></p>
<h3><span>Final Value Layer</span><span>&nbsp;</span></h3>
<p><span>Final Values Layer is a new annotation layer that shows values of the last data point in your data source(s). This annotation is rendered as a colored box for each data source over the Y-Axis labels.</span><span>&nbsp;</span></p>
<p><span><img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/7658.datachart_2D00_finalvalue_2D00_layer.png" /></span></p>
<h1>Let&rsquo;s Wrap this Baby Up!</h1>
<p>As I always like to point out, if you have ideas about new features we should bring to our controls, important issues we need to fix, or even brand new controls you&rsquo;d like us to introduce, please let us know by posting them on our<span>&nbsp;</span><a class="mchNoDecorate" href="/community/ideas" rel="noopener noreferrer" target="_blank">Product Ideas</a><span>&nbsp;</span>website.&nbsp; Follow and engage with us on Twitter via<span>&nbsp;</span><a class="mchNoDecorate" href="http://twitter.com/infragistics" rel="noopener noreferrer" target="_blank">@infragistics</a>. You can also follow and contact me directly on Twitter at<span>&nbsp;</span><a class="mchNoDecorate" href="http://twitter.com/brianlagunas" rel="noopener noreferrer" target="_blank">@brianlagunas</a>.&nbsp; Also, make sure to connect with our various teams via our<span>&nbsp;</span><a class="mchNoDecorate" href="/community/forums/" rel="noopener noreferrer" target="_blank">Community Forums</a><span>&nbsp;</span>where you can interact with Infragistics engineers and other customers.&nbsp;</p>
<p>If you are not using our Xamarin controls yet, remember that a<span>&nbsp;</span><a class="mchNoDecorate" href="/products/ultimate" rel="noopener noreferrer" target="_blank">free evaluation download is only a click away</a>.</p>
<p>Lastly, when you do build something cool with our controls, please make sure to let me know.</p><div style="clear:both;"></div><img src="https://www.infragistics.com/community/aggbug?PostID=523611&AppID=943&AppType=Weblog&ContentType=0" width="1" height="1">Mobileultimate ui for xamarinFor DevelopersInfragistics UltimateIgnite UI for Angular 9.1.0 Releasehttps://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-for-angular-9-1-0-releaseTue, 02 Jun 2020 05:55:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:4c63f2a9-749f-4794-9932-3687453218bcRadoslav Mirchev0<p><span>Newest Release of Ignite UI for Angular&mdash;Version 9.1</span><span>&nbsp;</span></p>
<p><span>While we have the most complete set of enterprise-grade, Angular-native components on the market, we</span><span>&nbsp;continue to&nbsp;</span><span>listen to</span><span>&nbsp;</span><span>you</span><span>&nbsp;and</span><span>&nbsp;we</span><span>&nbsp;follow trends in the market.&nbsp;</span><span>&nbsp;</span><span>In our latest Angular release, version 9.1,&nbsp;</span><span>w</span><span>e&rsquo;ve</span><span>&nbsp;not only</span><span>&nbsp;made the fastest data grid and charts, faste</span><span>r, we&rsquo;ve also</span><span>&nbsp;made it easier to work with data</span><span>&nbsp;and</span><span>&nbsp;visualize it with one click</span><span>&mdash;while&nbsp;</span><span>keep</span><span>ing</span><span>&nbsp;everything customizable and&nbsp;</span><span>visually appealing</span><span>.&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></p>
<p><span>In addition</span><span>, we&rsquo;ve added components for layout, action</span><span>s</span><span>&nbsp;</span><span>management,</span><span>&nbsp;and date/time management as well as</span><span>&nbsp;</span><span>a handful of</span><span>&nbsp;great sample applications, theming and directives for convenience. We&rsquo;ll discuss these in this blog, but&nbsp;</span><span>I wanted to call out two</span><span>&nbsp;new components</span><span>&nbsp;that are major advancements in</span><span>&nbsp;our journey to</span><span>&nbsp;web modernization:</span><span>&nbsp;</span></p>
<ul>
<li><span><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/dock-manager.html">Dock Manager</a> </span></li>
</ul>
<p><span>This&nbsp;</span><span>powerful&nbsp;</span><span>new tool&nbsp;</span><span>makes it easier for you to b</span><span>uild&nbsp;</span><span>m</span><span>ulti-</span><span>w</span><span>indow,&nbsp;</span><span>m</span><span>ulti-</span><span>s</span><span>creen&nbsp;</span><span>a</span><span>pps in any&nbsp;</span><span>f</span><span>ramework</span><span>.&nbsp;</span><span>Take complex layouts and split them into smaller, easier-to-manage panes. Infragistics&#39; Dock Manager offers a complete windowing experience, just like the desktop, but in the web</span><span>. Example from the <a href="//angularsite/components/general/framework-and-features/data-analysis.html">Dock Manager and Data Analysis Tool Sample application</a>:</span></p>
<p><span><img alt=" " height="579" src="/community/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/6371.DockDATv1.gif" width="901" /></span></p>
<ul>
<li><span><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/grid/keyboard_navigation.html">Grid Keyboard Navigation</a> </span></li>
</ul>
<p><span>We&rsquo;ve made it easier for you to</span><span>&nbsp;</span><span>i</span><span>mprove&nbsp;</span><span>u</span><span>sability,&nbsp;</span><span>a</span><span>ccessibility and ARIA&nbsp;</span><span>c</span><span>ompliance</span><span>&nbsp;with the new Grid Keyboard Navigation.&nbsp;</span><span>Na</span><span>vigate web pages using only a keyboard by reducing the number of tab stops and exposing new keyboard shortcuts.</span><span>&nbsp;</span><span>A</span><span>lso known as A</span><span>ctive Element Navigation,&nbsp;</span><span>this control m</span><span>akes it easier to improve usability and ensure accessibility for all users, regardless of how they are navigating pages.</span><span>&nbsp;</span></p>
<ul>
<li><a href="/community/blogs/b/jason_beres/posts/removing-trial-watermark-from-npm-packages">Moving from Trial to Licensed Ignite UI NPM Packages</a></li>
</ul>
<p><span>Now let&rsquo;s dive into some of the details.</span><span>&nbsp;</span></p>
<p><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/date_range_picker.html"><b><span>Range Date Picker</span></b></a><b><span> </span></b><span>&nbsp;</span></p>
<p><span>We</span><span>&rsquo;ve now added&nbsp;</span><span>the&nbsp;Igx&nbsp;Date Range Picker component to our existing</span><span>&nbsp;</span><span>calendar</span><span>&nbsp;and</span><span>&nbsp;date&nbsp;</span><span>editor</span><span>.&nbsp;</span><span>Th</span><span>is new&nbsp;</span><span>component&nbsp;</span><span>allows</span><span>&nbsp;you to select a range of dates from a calendar UI or editable input fields. It is&nbsp;</span><span>a</span><span>&nbsp;&ldquo;</span><span>must</span><span>&nbsp;have</span><span>&rdquo;</span><span>&nbsp;for every booking or scheduling application scenario.</span><span>&nbsp;</span><span>The component&nbsp;</span><span>also&nbsp;</span><span>provides an advanced setup exposing two editable input fields</span><span>.</span><span>&nbsp;You can find more details&nbsp;</span><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/date_range_picker.html"><span>here</span></a><span>.</span><span>&nbsp;</span></p>
<p><img alt=" " height="426" src="/community/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/2541.RangeDatePickerGIF.gif" width="905" /></p>
<p><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/grid/keyboard_navigation.html"><b><span>Keyboard Navigation Enhancement</span></b></a><span>&nbsp;</span></p>
<p><span>As we mentioned&nbsp;</span><span>above briefly, our new Grid Keyboard Navigation&nbsp;</span><span>adds</span><span>&nbsp;new functionality to our Ignite UI for Angular&nbsp;</span><span>k</span><span>eyboard</span><span>&nbsp;navigation</span><span>.</span><span>&nbsp;</span><span>Keyboard navigation is tricky: o</span><span>n the one hand</span><span>&nbsp;the</span><span>&nbsp;more complex the product become,&nbsp;</span><span>the&nbsp;</span><span>more complex the&nbsp;</span><span>navigation becomes</span><span>.&nbsp;</span><span>O</span><span>n the other hand</span><span>,</span><span>&nbsp;we like to keep things simple. That is why we have enhanced our keyboard navigation with</span><span>&nbsp;a</span><span>&nbsp;new user interface pattern</span><span>,&nbsp;</span><span>or &ldquo;active</span><span>&nbsp;element navigation&quot;</span><span>, which is</span><span>&nbsp;lightweight,&nbsp;</span><span>and offers&nbsp;</span><span>better ARIA support - no focus trap</span><span>,&nbsp;</span><span>reduced number of tab stops, better grid performance and new features integration.</span><span>&nbsp;</span></p>
<p><span>Modern web pages and applications are managed as a collection of standalone components and may contain hundreds of </span><a href="https://www.w3.org/TR/wai-aria-practices/#layoutGrid"><span>tab stops</span></a><span>. According </span><a href="https://www.w3.org/TR/wai-aria-practices/#kbd_generalnav#kbd_generalnav"><span>Fundamental Keyboard Navigation Conventions</span></a><span> section of W3C&rsquo;s </span><span><b>WAI-ARIA Authoring Practices 1.1,</b></span><span> the tab sequence should include only one focusable element of a </span><a href="https://www.w3.org/TR/wai-aria-practices/#kbd_generalnav"><span>Composite UI Component</span></a><span>. You can see the contradiction, aren&rsquo;t you? We found a way to keep both the optimal user experience and the WAI-ARIA guidance. We have organized the grid in five such </span><a href="https://www.w3.org/TR/wai-aria-practices/#kbd_generalnav"><span>Composite UI Component</span></a><span>, hence&nbsp;</span><span>five tab</span><span>&nbsp;stops:</span><span>&nbsp;</span></p>
<ul>
<li><span>Toolbar/ Group by Area if existing</span><span>&nbsp;</span></li>
<li><span>Header row container. The first cell of the header row will become active.</span><span>&nbsp;</span></li>
</ul>
<ul>
<li><span>Tbody</span><span>. The first </span><span>igxCell</span><span>(0,0) of the body container will become active. </span><span>&nbsp;</span></li>
<li><span>The first cell in the Column Summary will become active (if summaries are enabled).</span><span>&nbsp;</span></li>
<li><span>Pager UI. Items per page drop-down will become active.</span><span>&nbsp;</span></li>
</ul>
<p><span>Well I only scratch the surface of the topic, but for the detailed description you could visit&nbsp;</span><span>the</span><span>&nbsp;blog post on the <a href="/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility-">topic</a>.</span><span>&nbsp;</span></p>
<p><span>That brings along changes on Tab navigation behavior:</span><span>&nbsp;</span></p>
<ul>
<li><span>You cannot use `tab` key to navigate between the cells in the </span><span>IgxGrid</span><span>. The navigation is performed only with arrow keys. </span><span>&nbsp;</span></li>
<li><span>With `tab` key you can only navigate to the next editable cell (Only when the cell is in edit mode). When the last editable cell (of the row) is reached, the navigation will continue to next row&#39;s editable cell. If the last editable cell is reached, the tab navigation will continue with the next focusable tab stop element. </span><span>&nbsp;</span></li>
</ul>
<p><span>As it comes to performance, removing cell focus and blur handlers and reducing navigation services gives a boost to the grid overall performance.&nbsp;</span><span>Again</span><span>&nbsp;more details and metrics you can find in the What&#39;s new: <a href="/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility-">Grid Keyboard Navigation with Richer&nbsp;</a></span><span><a href="/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility-">ARIA Compliance blog post</a>&nbsp;</span><span>or in&nbsp;</span><span>our</span><span>&nbsp;</span><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/grid/keyboard_navigation.html"><span>documentation</span></a><span>.</span><span>&nbsp;</span></p>
<p><span>For a more in-depth look at this exciting component, read our <a href="/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility-">Grid Keyboard Navigation</a></span><a href="/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility-"><span>&nbsp;blog</span></a><span>.</span><span>&nbsp;</span></p>
<p><img alt=" " height="514" src="/community/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/5265.KB-TAB-Stops.gif" width="901" /></p>
<p><span><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/grid/keyboard_navigation.html#header-navigation">Header Navigation Implementation</a> </span></p>
<p><span>&nbsp;In concert with</span><span>&nbsp;enhancements to</span><span> &quot;</span><span>a</span><span>ctive</span><span>&nbsp;element navigation&quot;, header keyboard navi</span><span>gation is now fully functional.&nbsp;</span><span>The full list of key combinations&nbsp;</span><span>are</span><span>&nbsp;</span><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/grid/keyboard_navigation.html#header-navigation"><span>here</span></a><span>.</span><span>&nbsp;</span></p>
<p><span></span></p>
<p><span><img alt=" " height="514" src="/community/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/4617.KB-Header.gif" width="902" />&nbsp;</span></p>
<p><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/splitter.html"><b><span>Splitter</span></b></a><span>&nbsp;</span></p>
<p><span>The Ignite UI for Angular Splitter component provides the ability to create layouts, split into multiple, vertically or horizontally arranged panes that may be resized, expanded, and collapsed. These interactions are performed&nbsp;</span><span>through&nbsp;</span><span>by ex</span><span>posing the&nbsp;</span><span>UI&nbsp;</span><span>exposed&nbsp;</span><span>in the splitter bars between the panes. Code snippets and documentation are&nbsp;</span><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/splitter.html"><span>here</span></a><span>.</span><span>&nbsp;</span></p>
<p><span></span></p>
<p><span><img alt=" " height="328" src="/community/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/7331.SplitterGIF.gif" width="901" />&nbsp;</span></p>
<p><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/grid/row_pinning.html"><b><span>Row Pinning</span></b></a><span>&nbsp;</span></p>
<p><span>Row Pinning is not a feature that you see&nbsp;</span><span>everyday</span><span>&nbsp;in an angular grid. Pinning a row is another feature that makes working with data easier. It is enabled in both directions - top&nbsp;</span><span>or</span><span>&nbsp;</span><span>bottom. Once a row is pinned, it remains in the&nbsp;</span><span>Tbody</span><span>&nbsp;of the grid as a ghost row. The ghost row is a not editable copy of a pinned one that appears in its original place in the scrollable area of the grid. Full documentation for the row pinning is&nbsp;</span><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/grid/row_pinning.html"><span>here</span></a><span>.</span><span>&nbsp;</span></p>
<p><span></span></p>
<p><span><img alt=" " height="476" src="/community/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/1055.RowPinning.gif" width="903" />&nbsp;</span></p>
<p><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/action-strip.html"><b><span>Action Strip Component</span></b><span>&nbsp;</span></a></p>
<p><span>&nbsp;As mentioned earlier the Ignite UI for Angular product is becoming more complex and feature rich. That comes with difficult decisions how to make user friendly UI and still to have &quot;copy&quot;, &quot;paste&quot;, &quot;edit&quot;, &quot;pin&quot;, &quot;share&quot;, &quot;</span><span>delete</span><span>&quot; and others actions visible and not overwhelming your screen. The&nbsp;</span><span>igx</span><span>-action-strip provides a template area for one or more actions. It is highly flexible and customizable. It can be instanced on a cell, on a row or just on any container.&nbsp;</span><span>It</span><span>&nbsp;comes</span><span>&nbsp;as</span><span>&nbsp;</span><span>a</span><span>&nbsp;</span><span>container, overlaying its parent&nbsp; and displaying action buttons om mouse over event</span><span>, but it can be configured as a&nbsp;</span><span>drop down</span><span>&nbsp;menu or even combined approach where primary actions will show as an icon for ease of access, while all secondary actions are listed in a drop-down. You can find all the details in the&nbsp;</span><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/action-strip.html"><span>Action Strip topic</span></a><span>.</span><span>&nbsp;</span></p>
<p><span></span>Action strip component instanced in a container:</p>
<p><span><img alt=" " height="324" src="/community/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/0407.ActionStrip.gif" width="901" /></span></p>
<p><span>Drop-down menu option:</span></p>
<p><span><img alt=" " height="324" src="/community/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/3122.ActionStripMenu.gif" width="901" /></span></p>
<p><span>Action strip component in a row context of a grid:</span></p>
<p><span><img alt=" " height="461" src="/community/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/3122.ActionStripGrid.gif" width="900" />&nbsp;</span></p>
<p><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/grid/column_pinning.html"><b><span>Column&nbsp;</span></b><b><span>F</span></b><b><span>reezing/Pinning on the&nbsp;</span></b><b><span>R</span></b><b><span>ight </span></b></a><span>&nbsp;</span></p>
<p><span>Column freezing is not a&nbsp;</span><span>unicorn as the row pinning.&nbsp;</span><span>However,</span><span> pinning on the left (start) side is the most common approach. Now we have the option for Column freezing/Pinning on the right (end)[link] which provides you with more layout options for your application. </span><span>Column pinning topic is updated with the&nbsp;</span><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/grid/column_pinning.html#pinning-position"><span>Pinning Position section</span></a><span>.</span><span>&nbsp;</span></p>
<p><span></span></p>
<p><span><img alt=" " height="352" src="/community/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/1563.ColumnPinningRight.gif" width="902" />&nbsp;</span></p>
<p><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/grid/column_selection.html"><b><span>Column Selection</span></b></a><span>&nbsp;</span></p>
<p><span>Column Selection is another feature that is unique for Ignite UI for Angular. Working on DAT</span><span>&nbsp;</span><span>(</span><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/general/framework-and-features/data-analysis.html"><span>Data Analysis Tool</span></a><span>) we realized that selecting entire column with a single click is a must. It emphasizes the importance of a&nbsp;</span><span>particular column</span><span>&nbsp;by focusing the header cell(s) and everything below. The feature comes with a rich API that allows for manipulation of the selection state and data extraction. More details are available in the&nbsp;</span><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/grid/column_selection.html"><span>documentation topic</span></a><span>.</span><span>&nbsp;</span></p>
<p><span><img alt=" " height="341" src="/community/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/5287.ColumnSelection.gif" width="902" />&nbsp;</span></p>
<p><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/general/framework-and-features/framework-and-features.html#rtl-support"><b><span>RTL&nbsp;</span></b><b><span>S</span></b><b><span>upport</span></b></a><b><span>&nbsp;</span></b><b><span>E</span></b><b><span>nhancements</span></b><b><span> </span></b><span>&nbsp;</span></p>
<p><span>Providing full RTL support for all our components is a big and important project for Ignite UI.</span><span>&nbsp;To Do list is shrinking with every major release</span><span>. In 9.1 we are&nbsp;</span><span>removing&nbsp;</span><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/circular_progress.html"><span>Circular Progress Indicator</span></a><span>&nbsp;and&nbsp;</span><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/slider/slider.html"><span>Slider</span></a><span>&nbsp;</span><span>from that list.&nbsp;</span><span>Additional information could find in the&nbsp;</span><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/general/framework-and-features/framework-and-features.html#rtl-support"><span>RTL support documentation</span></a><span>.</span><span>&nbsp;</span><span>&nbsp;</span></p>
<p><a href="//angularsite/components/general/cli-overview.html"><b><span>Angular Schematics </span></b><b><span>9.1.510 </span></b><b><span>&amp; Ignite UI CLI </span></b><b><span>5.1.0</span></b></a><span>&nbsp;</span></p>
<p><span>With Ignite UI for Angular 9.1.0, we released the </span><a href="https://github.com/IgniteUI/igniteui-cli/releases/tag/v5.1.0"><span>Ignite UI CLI 5.1.0</span></a><span> together with @igniteui/angular-schematics version 9.1.510. This updates </span><span>includes</span><span>&nbsp;changes to the Angular templates and also new functionality related to the new licensed package. In&nbsp;</span><span>addition,</span><span> we have created two blogs that will help you use the capabilities that our schematics and CLI expose, and understand the way we that have created them. </span><span>&nbsp;</span></p>
<ul>
<li><a href="/community/blogs/b/engineering/posts/angular_2d00_schematics_2d00_ignite_2d00_ui"><span>Create Projects with Angular Schematics for Ignite UI</span></a><span> </span><span>&nbsp;</span></li>
<li><a href="/community/blogs/b/engineering/posts/angular-schematics-for-libraries"><span>Angular Schematics for Libraries: Keeping Your Projects Up-to-Date</span></a><span>&nbsp;</span></li>
</ul>
<p><span>Furthermore&nbsp;I would like to point out that Angular&nbsp;9.0.0, we released the </span><a href="https://github.com/IgniteUI/igniteui-cli/releases/tag/v5.0.0"><span>Ignite UI CLI 5.0.0</span></a><span> as well, the tool that helps you to easily scaffold projects in Angular, React and jQuery. Our CLI project has split into 4 more purposeful packages: igniteui-cli, @igniteui/cli-core, @igniteui/angular-templates and @igniteui/angular-schematics. The Ignite UI schematics are integrated in the Ignite UI for Angular product and helps you add it to a project created with Angular CLI and add components from our bundle. Please read more about this in the </span><a href="/products/ignite-ui-angular/angular/components/general/cli-overview.html"><span>Angular Schematics and Ignite UI CLI</span></a><span> topics and in the </span><a href="https://github.com/IgniteUI/igniteui-cli/releases/tag/v5.0.0"><span>changelog</span></a><span> of version 5.0.0. </span><span>&nbsp;</span></p>
<p><span>You can always refer to&nbsp;</span><span>our</span><span> </span><a href="/products/ignite-ui-angular/angular/components/general/cli-overview.html"><span>Angular Schematics and Ignite UI CLI</span></a><span> topics or review the updates we&rsquo;ve made.</span><span>&nbsp;</span></p>
<p><span><img alt=" " height="483" src="/community/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/8802.CLI.gif" width="644" />&nbsp;</span></p>
<p><a href="//angularsite/components/themes/index.html"><b><span>Styling &amp; Theming</span></b></a><span>&nbsp;</span></p>
<p><span>Styling and theming</span><span>&nbsp;</span><span>is&nbsp;an essential part of our product. We had invested&nbsp;</span><span>considerable</span><span>&nbsp;tim</span><span>e and effort&nbsp;</span><span>to refactor&nbsp;</span><span>the design of our samples.</span><span>&nbsp;</span><span>At the end we have 35 updated samples&nbsp;</span><span>on&nbsp;</span><span>our</span><span>&nbsp;</span><a href="/products/ignite-ui-angular/angular/components/grid/grid.html"><span>samples browser</span></a><span>.</span><span>&nbsp;</span><span>&nbsp;</span></p>
<ul>
<li><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/themes/global-theme.html#overview"><span>Legacy support for&nbsp;</span><span>CSS variable</span></a><span>&nbsp;- now&nbsp;</span><span>igx</span><span>-legacy-support is&nbsp;</span><span>set to&nbsp;</span><i><span>&ldquo;false&rdquo;&nbsp;</span></i><span>by default.&nbsp;</span><span>This will allow styling of components without the need to use Sass in your project.&nbsp;</span><span>However,</span><span>&nbsp;if you are to include support for IE11 you&nbsp;</span><span>should set it to&nbsp;</span><i><span>&ldquo;true&rdquo;</span></i><span>.</span><span>&nbsp;</span></li>
<li><span>Scrollbars theming</span><span>&nbsp;- Small,&nbsp;</span><span>insignificant</span><span>&nbsp;enhancement at first glance but&nbsp;</span><span>noticeable</span><span>&nbsp;final touch to Ignite UI theming</span><span>.</span><span>&nbsp;</span><span>Hav</span><span>ing&nbsp;</span><span>default</span><span>&nbsp;scrollbars while switching between light&nbsp;</span><span>and</span><span>&nbsp;dark theme&nbsp;</span><span>could take&nbsp;</span><span>your</span><span>&nbsp;eyes out and it is quite annoying.&nbsp;</span><span>Take that example, the difference is&nbsp;</span><span>noticeable</span><span>:</span><span>&nbsp;</span></li>
</ul>
<p><span>&nbsp;<img alt=" " height="485" src="/community/resized-image/__size/800x400/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/2161.Scrollbars.png" width="862" /></span></p>
<p><a href="/resources/sample-applications/task-planner-application"><b><span>Task Manager Sample Application</span></b></a><span>&nbsp;</span></p>
<p><span>We have a new sample application for you. It is created to demonstrate the editing capabilities of the&nbsp;</span><span>IgxGrid</span><span>&nbsp;and as a show case for real life scenario application</span><span>. In&nbsp;</span><span>fact,</span><span>&nbsp;it turned out to be very capable tool for managing tasks which I myself started to use. Next step in the development is to add option for integration with G</span><span>itHub</span><span> </span><span>and add some more features.</span><span>&nbsp;</span></p>
<p><span>&nbsp;<img alt=" " height="485" src="/community/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/1067.TaskPlannerGIF.gif" width="822" /></span></p>
<p><span>&nbsp;</span></p>
<p><a href="/resources/sample-applications/angular-covid-19-dashboard"><b><span>COVID-19 Dashboard Application</span></b></a><span>&nbsp;</span></p>
<p><span>COVID-19 Dashboard has started as an internal exercise. There is a hot topic that everyone should </span><span>follow.</span><span> You see new dashboards&nbsp;</span><span>popping</span><span>&nbsp;up&nbsp;</span><span>every day</span><span>&nbsp;and we have the controls - what would be the effort to build up, such a board from the scratch? And the result was amazing, it took merely several hours</span><span>&nbsp;</span><span>to have the </span><a href="/resources/sample-applications/angular-covid-19-dashboard"><span>COVID-19 Dashboard</span></a><span> ready. Well, visual design and styling took a bit more, but design is always subjective topic. You could follow Hristo, step by step in building the dashboard in his blog post: </span><a href="/community/blogs/b/infragistics/posts/create-covid_2d00_19-dashboard"><span>How to Create an Angular Covid-19 Dashboard in Hours</span></a><span>.</span><span>&nbsp;</span></p>
<p><span></span></p>
<p><span><img alt=" " height="416" src="/community/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/2134.Covid191.gif" width="903" />&nbsp;</span></p>
<p><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/general/framework-and-features/data-analysis.html"><b><span>Dock Manager &amp; Data Analysis</span></b><b><span>&nbsp;</span></b><b><span>Sample&nbsp;</span></b><b><span>App</span></b></a><span>&nbsp;</span></p>
<p><span>The</span><span> </span><span>Data Analysis Sample application is not</span><span>&nbsp;a</span><span>&nbsp;new</span><span>&nbsp;one</span><span>. It was part of our Ignite UI 9.0 release.&nbsp;</span><span>At the time w</span><span>hen</span><span>&nbsp;we started&nbsp;</span><span>working on its&nbsp;</span><span>design,</span><span>&nbsp;however,</span><span>&nbsp;we had one major&nbsp;</span><span>obstacle &ndash; we were limited by the brow</span><span>ser. We wished to</span><span>&nbsp;</span><span>have</span><span>&nbsp;the desktop experience of multi</span><span>-</span><span>&nbsp;</span><span>window layout</span><span>&nbsp;and with the&nbsp;</span><span>release of the Infragistics&nbsp;</span><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/dock-manager.html"><span>Dock Manager</span></a><span>&nbsp;</span><span>our&nbsp;</span><span>wis</span><span>h</span><span>&nbsp;came true</span><span>.&nbsp;</span><span>Now we have&nbsp;</span><span>everything&nbsp;</span><span>a complete feature set</span><span>&ndash; pane navigator, docking, floating panes, pinning,</span><span>&nbsp;and</span><span>&nbsp;tab groups</span><span>...</span><span>&nbsp;</span><span>The c</span><span>ombination</span><span>&nbsp;</span><span>of&nbsp;</span><span>between&nbsp;</span><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/dock-manager.html"><span>Dock Manager</span></a><span>&nbsp;and&nbsp;</span><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/general/framework-and-features/data-analysis.html"><span>DAT (Data Analysis Tool)</span></a><span>&nbsp;results in&nbsp;</span><span>a&nbsp;</span><span>one</span><span>&nbsp;beautiful and powerful sample application.</span><span>&nbsp;</span></p>
<p><span></span></p>
<p><span><img alt=" " height="583" src="/community/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/7824.DockDATv3.gif" width="902" />&nbsp;</span></p>
<p><b><span>Settable&nbsp;</span></b><b><span>I</span></b><b><span>gx</span></b><b><span>-grid&nbsp;</span></b><b><span>H</span></b><b><span>eader</span></b><b><span>&nbsp;</span></b><b><span>T</span></b><b><span>itle</span></b><span>&nbsp;</span></p>
<p><span>One little&nbsp;</span><span>feature that could s</span><span>a</span><span>ve you a lot of&nbsp;</span><span>irritation</span><span>.&nbsp;</span><span>Developing real life scenario application with our own product&nbsp;</span><span>is&nbsp;</span><span>real dogfooding.</span><span> </span><span>It makes you to realize that s</span><span>imple things like setting the header title different from the &ldquo;header&rdquo;&nbsp;</span><span>value could really&nbsp;</span><span>get</span><span>&nbsp;your goat</span><span>.</span><span>&nbsp;With Ignite UI 9.1 this issue</span><span>&nbsp;is resolved.&nbsp;</span><span>Now you could</span><span>&nbsp;set&nbsp;</span><span>independently</span><span>&nbsp;header and tit</span><span>le value.</span><span>&nbsp;</span><span>You could find the details in our <a href="https://github.com/IgniteUI/igniteui-angular/issues/6940">git&nbsp;repository</a></span><span>.&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></p>
<p><a href="//angularsite/components/combo.html"><b><span>Combo&nbsp;</span></b><b><span>Update</span></b></a><span>&nbsp;</span></p>
<p><span>Here the new feature is directed to the user experience on mobile devices.&nbsp;</span><span>Currently when c</span><span>ombo&#39;s list of items is opened, the control automatically puts the focus on the search input. For mobile users this will cause a keyboard to show, making scrolling through the list of items more tedious</span><span>. We have added an&nbsp;</span><span>optional</span><span>&nbsp;input to solve that issue.&nbsp;</span><span>You can find more details&nbsp;</span><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/combo.html"><span>here</span></a><span>.</span><span>&nbsp;</span></p>
<p><b><span>Directives</span></b><span>&nbsp;</span></p>
<p><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/date_time_editor.html"><b><span>Date Time Editor</span></b></a><span>&nbsp;</span></p>
<p><span>The Ignite UI for Angular Date Time Editor Directive allows the user to set and edit the date and time in a chosen input element. The user can edit the date or time portion, using an editable masked input. Additionally, one can specify a desired display and input format, as well as min and max values to utilize validation. In the&nbsp;</span><a href="https://infragistics.com/products/ignite-ui-angular/angular/components/date_time_editor.html"><span>topic</span></a><span>&nbsp;you can find more details on the implementation.</span><span>&nbsp;</span></p>
<hr />
<p><b><span>Final Thoughts and Resources</span></b><span>&nbsp;</span></p>
<p><span>As you can see, we&rsquo;ve added a lot of new features and components in Ignite</span><span>&nbsp;UI for Angular 9.1, including</span><span>&nbsp;components for layout, action</span><span>&nbsp;management</span><span>, and date/time management as well as a handful of great sample applications, theming and directives for convenience.</span><span>&nbsp;</span></p>
<p><span>We offer an Angular toolkit with the most depth and breadth in the industry</span><span>, including Angular-native components and enterprise-grade</span><span>. And we are responsive to your needs, continually listening and enhancing Ignite UI for Angular.</span><span>&nbsp;</span></p>
<p><span>But at Infragistics we consider that just releasing the best of breed UI components is not enough.</span><span>&nbsp;We also would like to share with you why we are proud of our work.</span><span>&nbsp;</span><span>One way we hig</span><span>hlight our additional value is through regular blogs that</span><span>&nbsp;offer you useful tips and tricks,&nbsp;</span><span>deeper insights,&nbsp;</span><span>how-</span><span>to&#39;s</span><span>, and much more.</span><span>&nbsp;Here are a few of the Angular-related blogs that you might find useful:</span><span>&nbsp;</span></p>
<ul>
<li><span>&nbsp;</span><a href="/community/blogs/b/infragistics/posts/building-a-crud-enabled-angular-application-with-ignite-ui-for-angular-and-cdata-api-server"><span><b>CRUD-enabled Angular Application&nbsp;</b></span><b><span>and CDATA API Server</span></b></a></li>
</ul>
<p><span>Topic of the blog is how to build an Angular application with Ignite UI For Angular, implementing full CRUD (Create, Read, Update, Delete) operations against an OData RESTful API, created with API Server.</span><span>&nbsp;You can find how to:</span><span>&nbsp;</span></p>
<ul>
<li><span>Go through the&nbsp;</span><span>API Server</span><span>&nbsp;installation and setup.</span><span>&nbsp;</span></li>
<li><span>Build a&nbsp;</span><span>REST API</span><span>&nbsp;from the local SQL instance of Northwind database</span><span>&nbsp;</span></li>
<li><span>Consume and visualize the data in an Angular application built with&nbsp;</span><span>Ignite UI for Angular</span><span>&nbsp;</span></li>
<li><span>Demonstrate how to add&nbsp;</span><span>full CRUD capabilities to the&nbsp;</span><span>igxGrid</span><span>&nbsp;to consume the API</span><span>&nbsp;</span></li>
</ul>
<p><span><img alt=" " height="443" src="/community/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/0081.CDATA.gif" width="901" /></span></p>
<ul>
<li><a href="/community/blogs/b/engineering/posts/angular-schematics-for-libraries"><b><span>Angular Schematics for Libraries: Keeping Your Projects Up-to-Date</span></b></a><span>&nbsp;</span></li>
</ul>
<p><span>You can find more about our open source Angular component&nbsp;</span><span>library</span><span>&nbsp;and Angular schematics.</span><span>&nbsp;How to enjoy their benefits from running a simple ng new to creating complex schematics that automate workflow and project setup</span><span>&nbsp;</span></p>
<ul>
<li><a href="/community/blogs/b/engineering/posts/angular_2d00_schematics_2d00_ignite_2d00_ui"><b><span>Create Projects with Angular Schematics for Ignite UI</span></b></a><span>&nbsp;</span></li>
</ul>
<p><span>Three minutes read how to get advantage of&nbsp;</span><a href="https://github.com/IgniteUI/igniteui-cli"><span>Ignite UI CLI</span></a><span>&nbsp;and schematics</span><span>&nbsp;in a few simple steps. Th</span><span>e only&nbsp;</span><span>prerequisites</span><span>&nbsp;that you need are&nbsp;</span><a href="https://nodejs.org/en/download/"><span>NodeJS</span></a><span>&nbsp;</span><span>and&nbsp;</span><a href="https://cli.angular.io/"><span>Angular CLI</span></a><span>.</span><span>&nbsp;</span></p>
<p><span>&nbsp;<img alt=" " src="/community/resized-image/__size/800x400/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/2055.Schematics.png_2D00_774x578.png" /></span></p>
<ul>
<li><a href="/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility-"><b><span>Improving Usability, Accessibility and ARIA Compliance with Grid Keyboard Navigation</span></b></a><span>&nbsp;</span></li>
</ul>
<p><span>Keyboard navigation, improving usability, accessibility, Active element navigation..</span><span>.&nbsp;</span><span>I will say no more on that topic and let you to dive in&nbsp;</span><span>yourselves.</span><span>&nbsp;</span></p>
<ul>
<li><a href="/community/blogs/b/infragistics/posts/create-covid_2d00_19-dashboard"><b><span>How to Create an Angular Covid-19 Dashboard in Hours</span></b></a><span>&nbsp;</span></li>
</ul>
<p><span>You want to build viable web application just in hours with Ignite UI for Angular? That blog is for you, then.&nbsp;</span><span>We are taking the journey of developing func</span><span>tional and visually appealing dashboard&nbsp;</span><span>from&nbsp;</span><span>the&nbsp;</span><span>scratch</span><span>.</span><span>&nbsp;</span><span>&nbsp;</span></p>
<hr />
<p><span>Follow us on&nbsp;</span><a href="https://medium.com/ignite-ui"><span>Medium</span></a><span>&nbsp;and stay up to date with the latest Angular related perks that we work on, give us a star on&nbsp;</span><a href="https://github.com/IgniteUI/igniteui-angular"><span>GitHub</span></a><span>&nbsp;and help us to continue improving our product by addressing any concerns, questions or feature requests in the&nbsp;</span><a href="https://github.com/IgniteUI/igniteui-angular/issues"><span>issues</span></a><span>&nbsp;section. We will give our best to constantly improve our product experience to suits all your needs and build apps with ease.</span><span>&nbsp;</span></p>
<p><span>&nbsp;</span></p><div style="clear:both;"></div><img src="https://www.infragistics.com/community/aggbug?PostID=523606&AppID=943&AppType=Weblog&ContentType=0" width="1" height="1">Ignite UI for AngularDock ManagerGrid Keyboard NavigationWhat’s New in 20.1: Ignite UI for Reacthttps://www.infragistics.com/community/blogs/b/infragistics/posts/what-s-new-in-20-1-ignite-ui-for-reactFri, 29 May 2020 20:58:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:04f6b83e-5bb9-4c02-a890-6ba2c88ea224Brian Lagunas0Learn about the new Dock Manager component that lets you manage complex layouts and the enhanced data grid with column pinning, column summaries, filtering, and more.(<a href="https://www.infragistics.com/community/blogs/b/infragistics/posts/what-s-new-in-20-1-ignite-ui-for-react">read more</a>)<img src="https://www.infragistics.com/community/aggbug?PostID=523618&AppID=943&AppType=Weblog&ContentType=0" width="1" height="1">For DevelopersIgnite UI for ReactInfragistics UltimateWhat’s New in 20.1: Ignite UI for Web Componentshttps://www.infragistics.com/community/blogs/b/infragistics/posts/what-s-new-in-20-1-ignite-ui-for-web-componentsFri, 29 May 2020 20:54:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:5d52dd2b-f44f-47cf-8b45-11f4d3647e36Brian Lagunas0<p>Today is the day&hellip; the day I announce all the awesomeness that is Ignite UI for Web Components. Today, I finally get to tell you about all the great new components and features we have been working on over the last several months. I&rsquo;m not going to bore you with some lame intro, let&rsquo;s just get right into the good stuff!</p>
<h1>Dock Manager</h1>
<p>Let me start this post off by blowing your mind! I am super excited to announce the immediate availability of the 100% web standards compliant Dock Manager component.&nbsp; That&rsquo;s right! You heard me&hellip; it&rsquo;s a dock manager for the web. Not only that, but it&rsquo;s a web component. Meaning, it&rsquo;s dependency free, pure HTML/JavaScript, and is seen as a native custom element.</p>
<p><img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/dock_2D00_manager.jpg" /></p>
<p>What is a dock manager? Well, if you have ever used Visual Studio you know exactly what it is. If you haven&rsquo;t, it&rsquo;s a component that provides a way to manage a complex layout using different type of panes with various sizes, positions, and behaviors, and that can be docked to various locations within an app. The dock manager allows your end-users to customize it further by pinning, resizing, moving, floating, and hiding panes.&nbsp; Besides the data grid, this is a game changer for all web applications.</p>
<h1>Data Grid</h1>
<p>The data grid is probably the most important control an app can have. So, it&#39;s no surprise that we are continuously improving our data grid.&nbsp; In this 20.1 release, the Web Components data grid gets column pinning, column summaries, filtering, hiding and show, and much more.&nbsp; Let&#39;s dig into the details of these newly added data grid features.</p>
<h2>Toolbar</h2>
<p>First up is the brand-new grid toolbar component which is essentially a container for UI operations. The toolbar is located at the top of the Grid and it matches its horizontal size. The toolbar container hosts different UI controls which are related to some of the Grid&#39;s features - column hiding, column pinning, and filtering just to name a few.</p>
<p><img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/toolbar.jpg" /></p>
<h2>Column Chooser</h2>
<p>A brand-new column chooser component has been added which allows end-users to perform column hiding/showing directly through the UI. This new column chooser can be used through the grid&#39;s toolbar to change the visible state of the columns. In addition, developers can always define the column hiding UI as a separate component and place it anywhere they want on the page.</p>
<p><img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/column_2D00_chooser.jpg" /></p>
<h2>Column Options Dialog</h2>
<p>With the addition of all these great grid features, and to help expose the existing features from previous releases, we have created a brand-new Column Options Dialog.&nbsp; This dialog will give your end-users the ability to group, hide, pin, move, and sort a column, as well as apply excel style filtering with a single click of a button. The new Options Dialog can be access by clicking on the 3-dots in the column header.</p>
<p><img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/pastedimage1591032448761v1.png" /></p>
<h2>Column Pinning</h2>
<p>With this latest release, end-users can now pin a column, or multiple columns, to the left or right side of the data grid. End-users can also lock columns in a specific order. The grid has a built-in column pinning UI, which can be used through the grid&#39;s toolbar, or the new grid options dialog, to change the pin state of the columns. In addition, you can define a custom UI and change the pin state of the columns using the data grid&rsquo;s column pinning API.</p>
<p><img alt=" " src="/community/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/column_2D00_pinning.gif" /></p>
<h2>Column Summaries</h2>
<p>The grid now ships with a summaries feature that functions on a per-column level as a group footer. Summaries are a powerful feature which enables the end-user to aggregate data in a very simplistic way using a predefined set of default summary items, depending on the type of data within the column.</p>
<p><img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/column_2D00_summaries.jpg" /></p>
<p>The built-in summaries include:</p>
<ul>
<li>count</li>
<li>min</li>
<li>max</li>
<li>average</li>
<li>Sum</li>
<li>Custom</li>
</ul>
<p>It is also possible to create custom summaries by creating a custom SummaryCalculator.</p>
<h2></h2>
<h1>Let&rsquo;s Wrap this Baby Up!</h1>
<p>If you have ideas about new features we should bring to our components, important issues we need to fix, or even brand new components you&rsquo;d like us to introduce, please let us know by posting them on our<span>&nbsp;</span><a class="mchNoDecorate" href="/community/ideas" rel="noopener noreferrer" target="_blank">Product Ideas</a><span>&nbsp;</span>website.&nbsp; Follow and engage with us on Twitter via<span>&nbsp;</span><a class="mchNoDecorate" href="https://twitter.com/infragistics" rel="noopener noreferrer" target="_blank">@infragistics</a>. You can also follow and contact me directly on Twitter at<span>&nbsp;</span><a class="mchNoDecorate" href="https://twitter.com/brianlagunas" rel="noopener noreferrer" target="_blank">@brianlagunas</a>.&nbsp;<span>You can also subscribe to my&nbsp;</span><a class="mchNoDecorate" href="https://www.youtube.com/brianlagunas" rel="noopener noreferrer" target="_blank">YouTube channel</a><span>&nbsp;to be notified of new videos, and follow me on&nbsp;</span><a class="mchNoDecorate" href="https://www.twitch.tv/brianlagunas" rel="noopener noreferrer" target="_blank">Twitch<span>&nbsp;</span></a><span>to watch me stream live.</span><span>&nbsp;</span>&nbsp;Also make sure to connect with our various teams via our<span>&nbsp;</span><a class="mchNoDecorate" href="/community/forums" rel="noopener noreferrer" target="_blank">Community Forums</a><span>&nbsp;</span>where you can interact with Infragistics engineers and other customers.&nbsp;&nbsp;</p>
<p>Lastly, when you do build something cool with our controls, please make sure to let us know.</p><div style="clear:both;"></div><img src="https://www.infragistics.com/community/aggbug?PostID=523617&AppID=943&AppType=Weblog&ContentType=0" width="1" height="1">UltimateFor DevelopersIgnite UI for Web ComponentsBuilding a CRUD-enabled Angular Application with Ignite UI For Angular and CDATA API Serverhttps://www.infragistics.com/community/blogs/b/infragistics/posts/building-a-crud-enabled-angular-application-with-ignite-ui-for-angular-and-cdata-api-serverTue, 12 May 2020 06:46:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:40050781-1d49-4d12-a714-07050430b346Hristo Anastasov0<p><img alt=" " src="/community/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/2727.ezgif_2D00_6_2D00_0f709239532d.gif" /></p>
<p>We at <strong>Infragistics</strong> always strived to deliver to you <strong>best of breed UI components</strong> to help you build modern UI and meet best UX practices. In addition to that, we provide some tooling to support you all the way from design to implementation and speed up development time.</p>
<p>While we tried to support this with rich documentation and samples, it was always a trouble to replicate a real-world scenario where the variety of databases and backend technologies is enormous.</p>
<p>Here we are going to review how to build an Angular application with <strong>Ignite UI For Angular</strong>, implementing full <strong>CRUD (Create, Read, Update, Delete)</strong> operations against an <strong>OData RESTful API</strong>, created with <strong>API Server</strong>.</p>
<p>To support this, we will use <strong>API Server</strong> from <strong>CData</strong>. <strong>API Server</strong> is the perfect tooling to expose your data as a professional API. Hook up any SQL or NoSQL database and the API Server instantly generates flexible and fully documented APIs.&nbsp;</p>
<p><strong>This article aims to:</strong></p>
<ul>
<li>Go through the <strong>API Server</strong> installation and setup.</li>
<li>Build a <strong>REST API</strong> from the local SQL instance of Northwind database</li>
<li>Consume and visualize the data in an Angular application built with <strong>Ignite UI for Angular</strong></li>
<li>Demonstrate how to add <strong>full CRUD capabilities to the igxGrid</strong> to consume the API</li>
</ul>
<h4><strong>Setting Up the API Server and connecting it to SQL server</strong></h4>
<p>Download the <a href="https://www.cdata.com/apiserver/download/" rel="noopener noreferrer" target="_blank">API Server</a>. Once installed, go to API Server/Settings/Connections and add SQL Server connection for the Northwind database. Set the database connection credentials:</p>
<p><img alt=" " src="/community/resized-image/__size/320x240/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/pastedimage1589266830241v2.png" /></p>
<p>If you don&rsquo;t have the Northwind database, you can create it by running this <a href="https://raw.githubusercontent.com/microsoft/sql-server-samples/master/samples/databases/northwind-pubs/instnwnd.sql" rel="noopener noreferrer" target="_blank">script</a>).</p>
<p>After setting up the connection, go to Resources and choose Add resource. API Server will open a wizard, allowing you to choose tables from your connections. We choose <strong>Products</strong>, <strong>Orders</strong> and <strong>Order details</strong> tables from the Northwind connection. These are the tables that we are going to use in the demo.</p>
<p><strong>Authentication</strong></p>
<p>Next go to API Server Settings/User, and add new user. Copy the created auththoken and use it to set the value of the `authToken` variable inside `remoteData.service.ts`</p>
<p>Finally, we need to enable <strong>CORS</strong> <strong>(Cross-origin resource sharing)</strong>.</p>
<p>Go to API Server Settings/Server and click the checkbox to &quot;Enable cross-origin resource sharing (CORS)&quot; and the checkbox to &quot;Allow all domains without &#39;*&#39;&quot; (or define the domains that are allowed to connect in Access-Control-Allow-Origin).</p>
<p>Set Access-Control-Allow-Methods to &quot;<strong>GET</strong>, <strong>PUT</strong>, <strong>POST</strong>, <strong>DELETE</strong>&quot;.</p>
<p><img alt=" " height="182" src="/community/resized-image/__size/320x240/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/pastedimage1589267076787v3.png" width="402" /></p>
<p>Finally, you can go to API to see the Resources you have. Click any of it and API Server will list the URLs for the corresponding methods, along with description of the request and response body objects and code snippets.</p>
<p><strong>Fine tuning</strong></p>
<p><strong>API Server</strong> allows for fine tuning of the API created. For example, you can define a relationship between tables, which tells API Server to build a SQL Join query and deliver the result in a single response (check the Status tab of the API Server to see what is happening behind the API Server). Quite helpful, isn&rsquo;t it?</p>
<p>Let&rsquo;s create such a relation between the <strong>Order</strong> and <strong>Order_details</strong> tables from Northwind. Click on the Edit icon for the <strong>Northwind_dbo_Order</strong> resource, and on the primary ID line (OrderID), add the &lsquo;relationships&rsquo; attribute:</p>
<p></p>
<p>You can then retrieve data from both endpoints by using the OData <strong>$expand</strong> keyword:</p>
<p>api.rsc/Nortwind_dbo_Order(10248)?<strong>$expand=Details</strong></p>
<p>Follow <a href="https://cdn.cdata.com/help/BWD/odata/default.htm" rel="noopener noreferrer" target="_blank">API Server documentation</a> for more examples on everything you would need to create an enterprise ready API, including in-memory caching, users, rate limits, and etc.</p>
<h4><strong>Consume and visualize the data in an Angular application built with Ignite UI for Angular</strong></h4>
<p><strong>Data Service</strong></p>
<p>In our Angular application, let&rsquo;s first create an injectable data service. This data service acts as the middleware between the view and the backend. It uses the HttpClient class in Angular to talk to the server over the HTTP protocol. It reads the data, does some normalizing (if needed) and returns it to the view of our application as an Observable stream.</p>
<p>We create four methods to implement the <strong>GET</strong>, <strong>POST</strong>, <strong>PUT</strong> and <strong>DELETE</strong>:</p>
<p><pre class="ui-code" data-mode="typescript">/**
* Retrieves data from specific table.
* Optionally pass `fields` argument to build the OData $select query
* Optionally pass `expandRel` argument to build the OData $expand query, which joins a related table to the response.
* Optionally pass `id` and &#39;primaryKey&#39; arguments to build $filter query
*/
public getData(tableKey: string,
fields?: string[],
id?: number,
primaryKey?: string,
expandRel?: string): Observable&lt;IProduct[] | IOrderDetails[]&gt; {
return this._http.get(this.buildDataUrl(tableFullName, fields, id, primaryKey, expandRel), HTTP_OPTIONS)
);
}
public editData(tableKey: string, body: IProduct): any {
return this._http.put(`${BASE_URL}/${tableFullName}(${id})`, body, HTTP_OPTIONS)
);
}
public addData(tableKey: string, body: IProduct): any {
return this._http.post(`${BASE_URL}/${tableFullName}`, body, HTTP_OPTIONS)
);
}
public deleteData(tableKey: string, id: string): any {
return this._http.delete(`${BASE_URL}/${tableFullName}/${id}`, HTTP_OPTIONS)
);
}</pre></p>
<p>A good practice is to implement the methods in the data service as generic as possible. The above methods take the SQL database table name as input and the record to be added/edited, or the id of the item to be deleted.</p>
<p>For the GET method, one can optionally pass fields and other arguments to create complex <a href="https://www.odata.org/getting-started/basic-tutorial/#queryData" rel="noopener noreferrer" target="_blank">OData queries</a> (select the fields to retrieve, filter, sort, etc.). See the builtDataUrl method for implementation details. If not passed, the getData method from above will return all data from the corresponding table.</p>
<p>To visualize the data returned, our main component calls the getData method. Initially it fetches data from the Products table to populate the products grid on the page:</p>
<p>When a row in the products grid is selected by the user, a request to retrieve data from the Orders and Order_details table is made:</p>
<p><pre class="ui-code" data-mode="typescript">this._ordersRequest$ = this._remoteService.getData(Tables.ORDERS, fields, pid, this.pkey, &#39;Details&#39;).subscribe(data =&gt; {
this.populateOrdersGrid(data as IOrderDetails[]);
this.populatePieChart(data);
this.populateTimelineChart(data);
});</pre></p>
<p>Note the additional arguments passed. First, we do not need all data fields to be returned, so we pass an array with the field names that we need. Also, `pid` and `pkey` are passed, which will build a $filter query to return results only for records, where ProductID equals the value of `pid`. By OData specification, the request is <strong>$filter=(ProductID eq 32)</strong>.</p>
<p>The &lsquo;Details&rsquo; argument is the value of a relation that the Orders table has (Remember when we set this up in the Fine tuning ?). Knowing that the Orders table has a relation to the Orders_details table, <strong>API Server</strong> will construct a join SQL query, and will return results from both tables in a single response. Making our life so much easier here!</p>
<p><strong>Visualization</strong></p>
<p>Once we have the data we need, we may show it to the user in various ways to help him get information from it. Adding one more grid on the page, a timeline chart and a pie chart and we have a full working dashboard now!</p>
<p>The orders grid on the page shows all orders featuring the product selected in the first grid. The timeline chart visualizes the occurring of orders in time, helping you understand if Product sales have been going up or down. The PieChart aggregates the data per country and display slices based on Quantities. Just one look at the pie chart and your business users know where they ship most.</p>
<p>The configuration of the charts is simple. For the timeline chart we used и<strong>gxCategoryChart</strong>, which needs data source and can do the rest for you! For the и<strong>gxPieChart</strong>, pass a dataSource and the <strong>valueMemberPath</strong>, which tells the chart which value from the data source to use:</p>
<p><pre class="ui-code" data-mode="html">&lt;!-- Timeline Chart --&gt;
&lt;igx-category-chart [dataSource]=&quot;ordersTimelineData&quot; chartType=&quot;line&quot;&gt;
&lt;/igx-category-chart&gt;
&lt;!-- Pie Chart --&gt;
&lt;igx-pie-chart [dataSource]=&quot;ordersDetailsData&quot; valueMemberPath=&quot;Freight&quot; labelMemberPath=&quot;Quantity&quot;&gt;
&lt;/igx-pie-chart&gt;</pre></p>
<p>This is how it looks, once we are done with the above:</p>
<p><strong><img alt=" " src="/community/resized-image/__size/713x346/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/2046.pastedimage1589273193371v1.png" /></strong></p>
<p><strong>Demonstrate how to add full CRUD capabilities to the igxGrid to consume the API</strong></p>
<p>In the Angular component, inject the data service using DI. Now we are ready to use the service to do full CRUD operations against our data backend. Note that IgxGrid does not provide its own UI for adding and deleting rows. For that reason, once the response from the CRUD operations for CREATE and DELETE is retrieved, just manually update the corresponding operation in the grid:</p>
<p><pre class="ui-code" data-mode="typescript">// get data for the corresponding table
this.dataService.getData(Tables.PRODUCTS).subscribe(data =&gt; {
this.populateProductsGrid(data as IProduct[]);
});
// edit the record object
this.dataService.editData(Tables.PRODUCTS, editedRecord).subscribe({
});
// delete the record with corresponding ID
this.dataService.deleteData(Tables.ORDERS_DETAILS, ID).subscribe(response =&gt; {
this.grid.deleteRowById(ID);
});
// Ads new record
this.dataService.addData(Tables.PRODUCTS, newRecord).subscribe(response =&gt; {
this.grid.addRow(newRecord);
});</pre></p>
<p>For readability purposes, you see only the important part in the methods. Wonder where the new record or edited data come from? That&rsquo;s right, you allow your user to edit data directly in the igxGrid, and then leverage the IgxGrid API to get everything you need:</p>
<p><pre class="ui-code" data-mode="text">&lt;igx-grid #productsGrid(onRowEdit)=&quot;onRowEdit($event)&quot;.../&gt;
public onRowEdit(event: IGridEditEventArgs) {
const record = event.newValue;
this.dataService.edit(Tables.PRODUCTS, record).subscribe(response =&gt; {
});
}</pre></p>
<p>In the above example, we attach an event handler for the grid <a href="/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#onrowedit" rel="noopener noreferrer" target="_blank"><strong>onRowEdit</strong></a> event. Reading the event arguments, we get the edited record and use it the request body object in the <strong>PUT</strong> method. By specification, the server will respond with the updated object, indicating that request have been successful. Of course, it may happen that a record with the corresponding ID (read from the body object) is not found, or other error occurs.</p>
<p>In this case, instead of using the syntax sugar above (defining a callback only for the next notification, sent by the Observable), you may want to pass handlers for the error and complete notifications too:</p>
<p><pre class="ui-code" data-mode="typescript">this.dataService.editData(Tables.PRODUCTS, editedRecord).subscribe({
next: (metadata: any) =&gt; {
},
error: err =&gt; {
console.log(err);
},
complete: () =&gt; {
console.log(&#39;Complete notification&#39;)
}
});</pre></p>
<p>As a best practice, we recommend adding error and complete handlers as above for each operation, and then implementing appropriate UI alerts for the errors (prompt to retry, or load offline content meanwhile, etc.). This will allow you to keep better control and will protect your users just in case, if, for some reason, the server responds with an error.</p>
<p><span style="font-size:inherit;">We hope that you found this blog to be helpful as you look to implement full CRUD operations against an OData API in your own apps. As you can see, Ignite UI for Angular components expose a rich public API, which makes it easier to implement full CRUD, while also offering<span style="background-color:#ffffff;color:#000000;float:none;font-family:Verdana,Arial,Helvetica,sans-serif;font-style:normal;font-weight:400;letter-spacing:normal;text-align:left;text-decoration:none;text-indent:0px;text-transform:none;white-space:normal;"> advanced capabilities for visualizing the data.</span></span></p>
<p><strong>Please note</strong>: the code provided is fully functional,&nbsp;and will provide a great base that you can take and start building on. Just fork the <a href="https://github.com/IgniteUI/apiserver" rel="noopener noreferrer" target="_blank">sample repository</a> and step on our code base. For example, start by adding more and more operators, leveraging the OData querying flexibility. Have fun with it and do not hesitate to contact us or even push your own code, we will be happy to review it!</p><div style="clear:both;"></div><img src="https://www.infragistics.com/community/aggbug?PostID=523612&AppID=943&AppType=Weblog&ContentType=0" width="1" height="1">Ignite UI for AngularDevelopersWeb DevelopmentCRUDFor DevelopersCDataYour Dashboards — Your Look! Meet the New Custom Theming in Revealhttps://www.infragistics.com/community/blogs/b/infragistics/posts/reveal-custom-theme-blogFri, 24 Apr 2020 13:00:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:f1586f73-da5f-4330-9439-ebb8ee56767cCasey McGuigan0See how to apply custom theming to Reveal embedded BI software and create your own dashboard and visualization style to match your app&#39;s look and feel.(<a href="https://www.infragistics.com/community/blogs/b/infragistics/posts/reveal-custom-theme-blog">read more</a>)<img src="https://www.infragistics.com/community/aggbug?PostID=523605&AppID=943&AppType=Weblog&ContentType=0" width="1" height="1">Reveal AppFor Business TeamsRevealReveal Adds Major New Features—Predictive Analytics, Big Data and Morehttps://www.infragistics.com/community/blogs/b/infragistics/posts/reveal-embedded-bi-major-upgradeThu, 02 Apr 2020 13:00:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:bef0bf09-89ef-4fb7-a480-11abdafdf496Casey McGuigan0Experience the power of data analytics enhanced with machine learning, Big Data connectors, predictive analytics, R and Python scripting, and more. (<a href="https://www.infragistics.com/community/blogs/b/infragistics/posts/reveal-embedded-bi-major-upgrade">read more</a>)<img src="https://www.infragistics.com/community/aggbug?PostID=523596&AppID=943&AppType=Weblog&ContentType=0" width="1" height="1">Business featureReveal AppFor Business TeamsRevealHow to Create an Angular Covid-19 Dashboard in Hourshttps://www.infragistics.com/community/blogs/b/infragistics/posts/create-covid_2d00_19-dashboardTue, 24 Mar 2020 10:44:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:6079f029-0924-4299-851e-e32de06b005cHristo Anastasov0Learn how to build and deliver beautiful and functional Angular dashboards in hours. We step you through how we created the COVID-19-Dashboard from scratch using Ignite UI for Angular.
(<a href="https://www.infragistics.com/community/blogs/b/infragistics/posts/create-covid_2d00_19-dashboard">read more</a>)<img src="https://www.infragistics.com/community/aggbug?PostID=523598&AppID=943&AppType=Weblog&ContentType=0" width="1" height="1">Ignite UI for AngularFor DevelopersIgnite Whats NewInfragistics UltimateCelebrating Women Who Have Broken Barriershttps://www.infragistics.com/community/blogs/b/infragistics/posts/international-womens-dayMon, 23 Mar 2020 13:59:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:9ec87642-3295-4575-bc6b-fb7e014b9ac1Casey McGuigan0We are celebrating International Women’s Day 2020 with a focus on STEM advancements made by women and also celebrating women in tech at Infragistics.(<a href="https://www.infragistics.com/community/blogs/b/infragistics/posts/international-womens-day">read more</a>)<img src="https://www.infragistics.com/community/aggbug?PostID=523599&AppID=943&AppType=Weblog&ContentType=0" width="1" height="1">For DevelopersWhy is ERP the Most Popular Embedded Analytics Application?https://www.infragistics.com/community/blogs/b/infragistics/posts/erp-and-embedded-analyticsMon, 16 Mar 2020 19:00:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:49705da3-9ae2-497d-af74-57ca29e69459Casey McGuigan0See why the ERP user experience is dramatically improved with embedded business intelligence software. (<a href="https://www.infragistics.com/community/blogs/b/infragistics/posts/erp-and-embedded-analytics">read more</a>)<img src="https://www.infragistics.com/community/aggbug?PostID=523597&AppID=943&AppType=Weblog&ContentType=0" width="1" height="1">Reveal AppFor Business TeamsRevealIgnite UI for Angular 9.0.0 Releasehttps://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-for-angular-9-0-0-releaseWed, 12 Feb 2020 06:08:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:bc2fd926-cff8-4502-806c-1c1a84280233Radoslav Mirchev0Learn how Ignite UI 9.0.0 combines the dependencies update to Angular 9 with major new features, including data analysis, new directives, and Angular grid updates.(<a href="https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-for-angular-9-0-0-release">read more</a>)<img src="https://www.infragistics.com/community/aggbug?PostID=523595&AppID=943&AppType=Weblog&ContentType=0" width="1" height="1">Ignite UI for AngularFor DevelopersInfragistics UltimateIgnite UIRedesigning Indigo.Design for Faster Usability Insights and Collaborationhttps://www.infragistics.com/community/blogs/b/infragistics/posts/redesigning-indigo-design-for-faster-usability-insights-and-collaborationMon, 13 Jan 2020 16:51:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:12914c1f-bcf3-4c5a-a727-1ebe21dd33e1George Abraham0See the complete redesign of usability testing in Indigo.Design to make it easier to create tests and analyze results of your prototyping.(<a href="https://www.infragistics.com/community/blogs/b/infragistics/posts/redesigning-indigo-design-for-faster-usability-insights-and-collaboration">read more</a>)<img src="https://www.infragistics.com/community/aggbug?PostID=523594&AppID=943&AppType=Weblog&ContentType=0" width="1" height="1">For UX Professionalsusability testUser ExperienceDesign SystemIndigo.DesignAnalyticsUX featureReleaseHow to Master Your Data (SD Times audio podcast with Jason Beres)https://www.infragistics.com/community/blogs/b/infragistics/posts/master-your-dataMon, 09 Dec 2019 15:00:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:c94c7ad4-11d5-4dac-a873-24b1f08b6df6Casey McGuigan0Understand the data challenges companies face and the need for governance, compliance, and privacy guidelines in this SD Times podcast with Infragistics&#39; Sr VP of Developer Tools.(<a href="https://www.infragistics.com/community/blogs/b/infragistics/posts/master-your-data">read more</a>)<img src="https://www.infragistics.com/community/aggbug?PostID=523552&AppID=943&AppType=Weblog&ContentType=0" width="1" height="1">Reveal AppFor Business TeamsRevealIntroducing the Ignite UI for Blazor Previewhttps://www.infragistics.com/community/blogs/b/infragistics/posts/introducing-the-ignite-ui-for-blazor-previewTue, 19 Nov 2019 00:06:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:ae77219f-e038-4bfe-8caf-8329f447c992Brian Lagunas0<p>Microsoft&#39;s new ASP.NET Blazor framework has been getting a ton of buzz recently, and rightfully so. Imagine .NET running in the browser. No plugins, no add-ons, no transpilation magic. It&#39;s every .NET developers dream.&nbsp; Since the initial previews of Blazor were released, we have been getting a number of questions about our intention to provide support for Blazor. My response was always something similar to &quot;we&#39;re working on it, you just have to wait a little longer&quot;.&nbsp; I am happy to say that your wait is over!</p>
<p>Today, I am excited to announce the immediate availability of Infragistics Ignite UI for Blazor Preview. Yes, that&#39;s right... you can now take advantage of our blazing fast, feature rich, easy to use components in your Blazor applications today.</p>
<p><span>But wait a minute Brian&hellip;. the title says &ldquo;Preview&rdquo;, what&rsquo;s up with that?&nbsp; If you have been following my career here at Infragistics for the last 8 years, you know that I don&rsquo;t like to keep things from my community.&nbsp; I want your honest and candid feedback, and the best way to get that is to give you what we have now.&nbsp; Not tomorrow, not next week, not next month, but now.&nbsp; I wanted to get these components in your hands as soon as possible, because waiting sucks.&nbsp; We have some loose ends to tie up before we can call these Blazor components RTM, but don&rsquo;t let that &ldquo;Preview&rdquo; term fool you.&nbsp; These controls are ready to be thrown into the fire and pushed to their limits.</span></p>
<h2><a href="/products/ignite-ui-blazor/download">Download the FREE Infragistics Ignite UI for Blazor Preview</a></h2>
<p>What exactly do you get with the Ignite UI for Blazor preview? Well, let&#39;s find out.</p>
<h1>Controls Shipping in Preview</h1>
<p>Although this is just a preview, Ignite UI for Blazor is packed with 11 new Blazor components. <span>I want to point out that we are providing a very simple <a href="https://github.com/brianlagunas/Infragistics.Blazor.Alpha" rel="noopener noreferrer" target="_blank">Sample Browser</a> to help you become familiar with the controls.&nbsp; Fork it, run it, explore it.&nbsp; This should do for now, at least until we can ship the official Infragistics Ignite UI for Blazor Sample Browser.</span></p>
<p>Now, let&#39;s take a moment to quickly cover all the great components you can start using in your Blazor applications today.</p>
<h3>BulletGraph</h3>
<p><span>The bullet graph component provides you with the ability to create attractive data presentations, replacing meters and gauges that are used on dashboards with simple yet straightforward and clear bar charts. A bullet graph is one of the most effective and efficient ways to present progress towards goals, good/better/best ranges, or compare multiple measurements in as little horizontal or vertical space as possible.</span></p>
<p><span><img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/2134.bullet_2D00_graph.jpg" /></span></p>
<h3>CategoryChart</h3>
<p><span>This touch-enabled charting control makes visualizing category data a breeze. Built on top of a high-performing and feature-rich data chart, the category chart filters the complexities of data visualization into a simplified API that anyone can use.</span></p>
<p><span><img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/38843.category_2D00_chart.jpg" /></span></p>
<h3>Data Grid (LiveGrid)</h3>
<p><span>The Ignite UI for Blazor data grid is a tabular component that allows you to quickly bind and display your data with little coding or configuration. Features of the data grid include filtering, sorting, templates, row selection, row grouping, row pinning and movable columns. The data grid is optimized for live, streaming data, with the ability to handle unlimited data set size in number of rows or columns.</span></p>
<p><span><img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/4201.data_2D00_grid.jpg" /></span></p>
<p><span>Note: When defining this component in your Blazor app, you should use the &lt;LiveGrid&gt; element for now. This name will be changing when we RTM the product.</span></p>
<h3>DoughnutChart</h3>
<p><span>Display your data with multiple series using this rich Doughnut Chart. Similar to a Pie Chart, the Doughnut Chart shows categorical statistics expressed in percentages. With its hollow center, it&#39;s best for displaying multiple series using concentric rings where each ring represents a data series. Bind easily to data, configure the inner radius, display exploded slices, customize themes, and more with this well-rounded control.</span></p>
<p><span><img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/4201.doughnut_2D00_chart.jpg" /></span></p>
<h3>FinancialChart</h3>
<p><span>This lightweight, high-performance chart is easy to configure to display mission-critical financial data using a simple and intuitive API. Just bind your data, and the chart takes care of everything else. The Blazor Financial Chart component is part of Infragistics&rsquo; best-in-breed UI for building high-performance, high-volume financial services, and capital market data applications.</span></p>
<p><span><img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/4201.financial_2D00_chart.jpg" /></span></p>
<h3>LinearGauge</h3>
<p><span>Make data visualizations and dashboards more engaging with a Linear Gauge that shows off KPIs with rich style and interactivity. The gauges are powerful, easy to use, and highly configurable to present dashboards.</span></p>
<p><span><img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/7824.linear_2D00_gauge.jpg" /></span></p>
<h3>GeographicMap</h3>
<p><span>Create highly-detailed, thematic geographical maps using an innovative feature set that includes: custom shape templates, the ability to render polylines and polyshapes, Map Progression, Scatter Area Plots, an intuitive Overview Pane, and more.</span></p>
<p><span><img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/7824.map.jpg" /></span></p>
<h3>PieChart</h3>
<p><span>Create simple or exploded pie charts. Customize the threshold for inclusion in the Other category, and display text labels and images that can be within or outside of the pie in a manner that avoids overlap. Users can click or drill down to view underlying data, explode out a section of the pie, and find information via tooltips.</span></p>
<p><span><img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/7824.pie_2D00_chart.jpg" /></span></p>
<h3>RadialGauge</h3>
<p><span>Radial Gauge makes your data visualizations and dashboards more engaging and shows off KPIs with rich style and interactivity. The gauges are powerful, easy to use, and configurable to present dashboards capable of displaying clocks, industrial panels, automotive dashboards, and aircraft cockpits.</span></p>
<p><span><img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/7824.radial_2D00_gauge.jpg" /></span></p>
<h3>Sparkline</h3>
<p><span>The Sparkline control is a data-intense, design-simple graphic that allows end users to spot trends, variations, and patterns in data in a clear and compact representation.</span></p>
<p><span><img alt=" " src="/community/resized-image/__size/1040x240/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/6366.sparkline_2D00_marker_2D00_support_2D00_l.png" /></span></p>
<h3>TreeMap</h3>
<p><span>Show users the relative weighting of data points at more than one level with Blazor treemaps (also known as heatmaps in the financial industry) supporting strip, squarified, and slice-and-dice algorithms.</span></p>
<p><span><img alt=" " src="/community/resized-image/__size/1040x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/6366.tree_2D00_map.jpg" /></span></p>
<h1>Getting Started</h1>
<p>Now that you have a taste for what awesomeness is available to you. Your next question is how do you get started. Luckily, that can be done in three easy steps:</p>
<ol>
<li>Create your Blazor app</li>
<li>Add the <a href="https://www.nuget.org/packages/Infragistics.blazor" rel="noopener noreferrer" target="_blank">Infragistics.Blazor</a> NuGet package</li>
<li>Add the &quot;Infragistics.Blazor/app.bundle.js&quot; script to the _Host.cshtml file (server project example)</li>
</ol>
<pre><code><pre class="ui-code" data-mode="html">&lt;script src=&quot;_content/Infragistics.Blazor/app.bundle.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;_framework/blazor.server.js&quot;&gt;&lt;/script&gt;</pre><br /></code></pre>
<p>And that&#39;s it! You&#39;re now ready to start using the Ignite UI for Blazor components in your razor pages. Using a component in your razor page can be done in two steps:</p>
<p>1. Add a using statement</p>
<p>@using Infragistics.Blazor.Controls;</p>
<p>2. Define your component in HTML and bind your data</p>
<p><pre class="ui-code" data-mode="html">&lt;FinancialChart Width=&quot;100%&quot; Height=&quot;500px&quot; DataSource=&quot;@data.StockMultipleSources&quot;&gt;
&lt;/FinancialChart&gt;</pre></p>
<p>That&#39;s it! It&#39;s that easy.</p>
<h1>Let&rsquo;s Wrap this Baby Up!</h1>
<p>Seeing this preview probably has you asking yourself, &ldquo;Brian, these controls are amazing and I can&rsquo;t wait to use them, but what&rsquo;s next?&nbsp; What&rsquo;s your long term plan for Blazor?&rdquo;.&nbsp; Well, I&rsquo;m glad you asked.&nbsp; As I write this blog, we are researching many other components that really concentrate on line of business scenarios for web applications.&nbsp; We have a long term plan for supporting your Blazor application needs, and we are committed to bringing you the markets best, highest performing, and most beautiful Blazor controls period.&nbsp; In order to accomplish this, we need your help.&nbsp;</p>
<p>If you have ideas about new features we should bring to our components, important issues we need to fix, or even brand new components you&rsquo;d like us to introduce, please let us know by posting them on our<span>&nbsp;</span><a class="mchNoDecorate" href="/community/ideas" rel="noopener noreferrer" target="_blank">Product Ideas</a><span>&nbsp;</span>website.&nbsp; Follow and engage with us on Twitter via<span>&nbsp;</span><a class="mchNoDecorate" href="https://twitter.com/infragistics" rel="noopener noreferrer" target="_blank">@infragistics</a>. You can also follow and contact me directly on Twitter at<span>&nbsp;</span><a class="mchNoDecorate" href="https://twitter.com/brianlagunas" rel="noopener noreferrer" target="_blank">@brianlagunas</a>.&nbsp;<span>You can also subscribe to my&nbsp;</span><a class="mchNoDecorate" href="https://www.youtube.com/brianlagunas" rel="noopener noreferrer" target="_blank">YouTube channel</a><span>&nbsp;to be notified of new videos, and follow me on&nbsp;</span><a class="mchNoDecorate" href="https://www.twitch.tv/brianlagunas" rel="noopener noreferrer" target="_blank">Twitch<span>&nbsp;</span></a><span>to watch me stream live.</span> &nbsp;Also make sure to connect with our various teams via our<span>&nbsp;</span><a class="mchNoDecorate" href="/community/forums" rel="noopener noreferrer" target="_blank">Community Forums</a><span>&nbsp;</span>where you can interact with Infragistics engineers and other customers.&nbsp;&nbsp;</p>
<p>Lastly, when you do build something cool with our controls, please make sure to let us know.</p><div style="clear:both;"></div><img src="https://www.infragistics.com/community/aggbug?PostID=523584&AppID=943&AppType=Weblog&ContentType=0" width="1" height="1">ultimate release notesIgniteFor DevelopersIgnite UI for BlazorInfragistics UltimateIgnite UI for Angular 19.2https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-angular-19-2Mon, 18 Nov 2019 15:31:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:5b22dfeb-5be1-434e-8712-045a6a004343Radoslav Mirchev0Learn about the newest Angular features including fluent design theme, angular charts, drag and drop features, Angular documentation, data binding, and more in Infragistics&#39; 19.2 release. (<a href="https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-angular-19-2">read more</a>)<img src="https://www.infragistics.com/community/aggbug?PostID=523586&AppID=943&AppType=Weblog&ContentType=0" width="1" height="1">Ignite UI for Angularultimate release notesIgniteFor DevelopersWhats NewInfragistics Ultimate