Quantcast
Channel: Infragistics Community
Viewing all 2363 articles
Browse latest View live

Infragistics Silverlight Release Notes – September 2016: 15.2, 16.1 Service Release

0
0

Release notes reflect the state of resolved bugs and new additions from the previous release. You will find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in PDF, Excel and Word formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

Note: This is the last Service Release for Infragistics Silverlight 15.2.

In order to download release notes, use the following links:

Silverlight 2015 Volume 2 Service Release (Build 15.2.20152.2193)

Silverlight 2016 Volume 1 Service Release (Build 16.1.20161.2107)


From Product Design to UX

0
0

My journey is not a common one, but maybe it should be.

Despite being trained as a product designer I am now working in the field of User Experience (UX) Design. While I am not the first designer to find my skillset applicable in another discipline, the concept of UX seems to deter many people like me from entering the profession. From my experience, this may be due to how frequently it is discussed in the media, its vague definition, or its seeming proximity to software development (leading many to believe they need to know CSS to enter the field).

 

confused professional  1

Other designers I’ve spoken with know they probably have the tools to work in UX, but they hold back because they are unsure what those jobs are like or how their skills might apply.

It can be intimidating to step into this mysterious and seemingly confusing profession, but taking the leap to try your hand at UX design is a great opportunity to broaden your skillset and have an impact.

I chose to study product design because I was attracted to the unique balance of analytical and creative thinking it required, the comprehensive skillset I would learn, and the wide range of possibilities for my career path. I always saw the skills I learned as being applicable to a variety of fields and formats, but when it came time to look for a job, I shied away from UX positions.

They were listed everywhere, and I frequently got the sense that I just didn’t really understand what they wanted. I had kind of designed part of an application for a project, but I never really had anything looked over by a professor and I wasn’t sure if I was doing anything right or what an experienced professional would think of my work. With every UX opportunity I considered, I prepared myself for total embarrassment.

It took speaking with the Director of UX at Infragistics to make me believe I could actually do this job. Learning that his team values and utilizes the design process I learned in school, and receiving confirmation that my skills are very closely related to those used in UX design, made me feel much more confident about stepping into the field.

 

 a-man-walking-into-the-sunset-in-a-field_vk8xoi3ex__M00002

That’s me, setting off into the UX design field! Just kidding, but I like to think I have a similarly cowboy-esque stature.

When I started this position I was still nervous about transitioning from the design of tangibles to digital products. Now I see that UX design is very closely related to my training. Projects follow the same design process and require the same considerations as my previous work: context, user needs, aesthetic language, composition, affordances, interactions, usability, production, etc. The only differences being that the products are now flat and digital, and some of the above terms refer to slightly different concepts. For example, the term “affordance” used to refer to handles, knobs, and little indents that imply how to hold something; in the field of UX, it refers to buttons, form fields, and hover states that imply how certain actions can be taken.

I was surprised how easily the work came to me. My training actually complements this discipline very nicely. I am always thinking about the user, trying to see my work from their perspective and imagining what interactions could add value to their experience. I also like to think about how relieved users will be when they switch to using carefully considered and well-designed applications that improve their day-to-day experiences.

 

design diagram3

 

My experience has helped me to better see the connectedness between design disciplines. While training differs from specialty to specialty, many skillsets overlap or share similarities like those I mentioned between product and user experience design. Figuring out how you can apply your skills to another area of design will provide the opportunity to learn new skills on the job and open the doors to a huge array of possibilities. UX is a major factor in the success of every product you see on the market. Since many designers already have the basic tools needed to be successful in this field, why not take a swing at it?

 

1. Image source: http://www.kbxjn.com/6-reasons-i-used-professional-plumber-company-to-install-my-water-softener/

2. Image source: https://www.videoblocks.com/video/a-man-walking-into-the-sunset-in-a-field-cye9zv-/

3. Diagram adapted from: http://iterations.ie

McMansion Problems - Don’t Design for the Extras

0
0

There is a blog that I love called McMansion Hell  –  you know those crazy monster houses built in bulk starting in the 1980’s? They are usually found in great clusters and sometimes on very small pieces of property relative to their immense size; 5000 sq ft and up is pretty standard with many exceeding 10,000 sq ft. Most notably though, these over-the-top dwellings attempt to check every box in the features option list, more often than not to the detriment of their overall appearance.

I enjoy reading this blog for several reasons. First of all, I have always loved looking at houses and even held a real estate license for a couple of years when my kids were really young. I firmly believe that a healthy dose of sarcasm makes everything better especially when paired with photos documenting the insanity. More than anything, it’s really entertaining to see the crazy lengths that builders (I just can’t call them architects) and their clients will go to in order to show off.

mcmansion-hell.jpg.662x0_q70_crop-scale


Now why people want these houses is a discussion for another time. What I’d like to talk about today is architecture. The normal process that you go through when creating one of these ‘custom masterpieces’ is to go to the builder’s office, pick a model, and then select the features you would like to include.

This is kind of like designing software right? Let’s say that we need an application that will track chicken nugget restaurant sales. Pretty basic right? Let’s have it do something else. How about in addition to tracking sales, we also make it track inventory levels and employee records? Wait, we need an employee portal so let’s add that to the list – and maybe a place where customers can post comments. Also, it would be cool to add a photo carousel of our featured locations so people who work there can feel special. One last thing, let’s have the weather forecast and a stock ticker. COOL. Now that our list of functions has been determined, we can just start building them.

WHOA COWBOY!
roof2


The McMansion suffers from a similar problem. The buyers choose a bunch of difficult-to-coordinate features – the crazy roof shapes are like that for a reason you know, someone just HAD to have a vaulted ceiling in the closet, it juts out and interrupts the roofline – and the builder has to, somehow, make it all fit. Are the buyers ever told no? Of course not! 

Similarly, software cannot and should not try to be everything to everyone. As UX professionals, it is our responsibility to help our clients find clear direction. Determining the simplest solution to provide the functionality they need should always be our goal. Sometimes it makes sense to add related functionality so that the user can be more productive, but when you find yourself cramming another button into the UI just because there is room, it’s time to take a step back and remind yourself (and your client) of the original plan.

4-ethnic-foods-section


Circling back to our chicken nugget tracking software: If we had stuck with our initial business requirement of tracking sales only, we could have designed a streamlined process for the end user to get sales information quickly and easily. However, once you add in a bunch of extra (and unnecessary) processes and features, the primary purpose of the tool becomes obscured and it is no longer useful.

Screen Shot 2016-10-24 at 3.08.15 PM

 

Photos accredited to McMansion Hell. http://www.mcmansionhell.com

ReportPlus Desktop Release Notes – Volume Release 1.0.1330.0

0
0

ReportPlus Desktop Version 1.0.1330.0 is here with feature enhancements, fixes and a brand new visualization type - the HeatMap, to make it simple for you to create dashboards and tell your story within minutes.

Important: How to Update

Because of some major user management improvements in the latest version of ReportPlus Desktop, please note that you will need to first uninstall your ReportPlus Desktop application, and then install it again from our website.

Enhancements:

  • Build for AnyCPU with the ReportPlus SDK
  • Change font size in the Grid View visualization
  • Visualize your data with a new visualization type - HeatMap
  • Share a dashboard with multiple recipients in one action
  • Grant specific permissions to users when sharing a dashboard
  • The default label for aggregated fields was changed from "Count of xxx" to "xxx"
  • Install the ReportPlus Desktop application for all users

Fixed Issues:

  • All dashboard links created with ReportPlus Desktop are now working in ReportPlus Mobile for iOS
  • Link to dashboard is now displayed for Stacked series charts
  • Fixed the visibility of the Column option for global filter parameter on link to dashboard edit screen when 'widget is maximized' is selected
  • Grid interactions are now allowed in widget edit mode
  • Fixed some authorization issues when connecting to Dropbox with ReportPlus Desktop
  • Back navigation through multiple dashboard links is now correctly handled

We hope you’ll enjoy our latest release!

Build 1.0.1330.0 - Oct-25-2016

What's New in Ignite 16.2

0
0

Ignite UI 16.2 is here! We’ve added great new features for modern application development in HTML and JavaScript for desktop, tablets and mobile:

  • ASP.NET Core support and Tag Helpers
  • Faster, easier to user data visualizations
  • Collapsible grid columns

We’ve also significantly enhanced our grid control, added a completely re-vamped charting library and solidified our support for Angular 2. So, let’s take a look at all we’ve added:

  • We’ve improved the GroupBy functionality in the grid control to work better with other features like paging and virtualization
  • We’ve given developers the ability to change grid column definitions at runtime
  • Our new charting library renders faster than before—and yet it’s smaller
  • Our grid sorting feature performance is better by a factor of ten

ASP.NET Core and Tag Helpers

The release of ASP.NET Core and ASP.NET MVC 6 created some exciting opportunities for developers on the Microsoft .NET stack. Our ASP.NET MVC Helper Classes are fully compatible with the new Microsoft .NET Core stack. We’ve also created a set of Tag Helpers for our components, which will make it easier for developers to control how Ignite UI controls are initialized without Razor syntax in views. For ASP.NET MVC 6 developers, our controls have never been easier to use.

igGrid

The 16.2 release introduces many additions and improvements to our grid control. We’ve improved our GroupBy feature to make it work more smoothly with other grid features. Combining GroupBy with features like Virtualization and Paging now results in a smoother user experience and significantly increased sorting speed.

In previous versions of our grid, you were required to define your columns at initialization time. Once the grid was initialized, you couldn’t change the column setup of your grid. In 16.2 we’ve added the ability to change the columns of your grid dynamically at runtime. With this new feature, you have the ability to give your users the exact data you want them to see at any time. No need to refresh the page, just change the columns!

A great grid is easy for your users to interact with. To help create a better experience, we’ve made the igGridModalDialogs, which is used for advanced filtering, editing, and multiple sorting. It’s customizable, extensible, and it enables you to create the specific user experience you are looking for.

Another new grid feature is the ability to create collapsible column groups, which is especially handy if you need to show a lot of fields. Your users have the ability to hide sections that they are not concerned with at the moment, and then drill into them when they need to see more detailed information. These groups are nestable, which provides you with a lot of flexibility in how you provide data to your users and how they choose to use it.

Most grids are designed around the idea that data is displayed on a single row. But that’s not always the best way to show and edit data. For those situations, we’ve added the ability to create multi-row layouts in our grids. This feature is great in situations where you have more data than can fit on the screen, but where horizontal scrolling isn’t really a good option. You have the ability to edit and create new records in this layout, and you even have control over keyboard navigation. With 16.2 we’re added inline editing to the Multi-Row Layout, so users are no longer limited to editing these rows through the modal dialog.

Another great feature is the ability to bind the igGrid to real-time data. This ability enables your grid to be updated automatically with data pushed down from a server. This requires no user action or page refresh--simply setup the data source, bind it to your grid and Ignite UI takes care of the rest. This feature makes our igGrid control a great choice for dashboard style web applications. We have added new samples displaying how grid bound to real-time data can be easily achieved in order to simplify the developer experience.

Charts

For the 16.2 release, we’ve completely revamped our charting and data visualization library. You’ll find our charts to be faster and easier to use. Our new charting API gets you up and running faster with default options designed to cover the most common use cases. In most situations, you simply need to bind your data source to a chart control and that’s it.

The new library is smarter about determining the best way to display your data, and you still have all the flexibility you would expect to make your data appear however you like. We’ve increased the rendering speed of our charts, making them up to twice as fast, even with large data sets, making one of fastest charts on the market even faster. We’ve also decreased the size of the library, so your page spends less time downloading and more time making your users happy. This is especially useful for mobile web applications, where bandwidth is often a premium.

Open Source

JavaScript has come a long way. It’s always been the “language of the web” but over that past several years it has seen a transition from being a just a scripting language for simple user interactions in the browser to a serious language for serious software development. JavaScript doesn’t just run in the browser anymore; it’s expanded to the server and to devices with the rise of the Internet of Things (IoT).

In that spirit, we have released the Ignite UI core controls to Open Source. We believe that developers are only now scratching the surface of what’s possible in modern web development. We, like you, are excited to see what’s next. We believe JavaScript has a bright future, and we’re committed to providing the best tools to developers who push the boundaries of JavaScript.

With Ignite UI core, you get a complete collection of high-performance, touch-first, responsive and highly extensible controls. We invite you to use these to build the best, most user-friendly JavaScript applications possible. And when your needs grow to include high-performance grids or data visualizations, you can easily upgrade to Infragistics Professional or Ultimate. You can get Ignite UI today via GitHub, NPM, or Bower.

Angular 2 Components

Ignite UI’s Angular 2 components enable you to use all of our Ignite UI controls in your Angular 2 applications quickly and easily. Unlike our competition’s controls, these are the same full-featured controls that are part of Ignite UI right now. This means you can build highly functioning Angular 2 application with no compromises. Anything you can do with our controls today in jQuery you can do today with our controls in Angular 2. The components are available now via GitHub or NPM.

Ignite UI JS Blocks

Ignite UI JS Blocks is a set of native, mobile-first, touch-first controls for Angular 2. Build amazing mobile web applications quickly and easily. Because they are native controls, your application will load and run quickly, even over a cellular connection. Ignite UI JS Blocks are in Preview right now and are available on GitHub as open source.

Other Updates

In addition to the new features I’ve already mentioned, we’ve added a several other features that developers have asked for.

igValidator - Our igValidator control now validates credit card numbers. To do this, the control uses the Luhn algorithm that can validate all active issuers and allows users to input numbers of any length with spaces or dashes.

igCombo - User input can sometimes be a challenge on these devices due to the space need by the on-screen keyboard. To help make this experience better we’ve updated our igCombo control. In 16.2, when this control receives focus you will be able to decide if you want to display the keyboard by default or keep it hidden.

igScroll - This new control enables you to define scrollable containers on your pages. These containers can contain any control or a collection of controls, and you can configure this new scrollbar to scroll multiple containers.

igZoombar - If you’ve worked with our charts in the past, you’ve no doubt seen the zoom-bar control and how it allows you to zoom in on and work with specific ranges in a chart. In 16.2, we’ve now enabled you to use that same zoom-bar for any zoom-able JavaScript component.

IgniteUI.com - The IgniteUI.com website features improved overall usability, getting you to the information you need quickly and easily. We’ve also updated our page layout and created a new visual theme that enhances readability and shows you the most important information first.

AMD Support - Modern JavaScript relies heavily on the idea of modules, for good reason: modularized code is easy to support, maintain and work with. Ignite UI supports popular JavaScript module frameworks such as RequireJS, SystemJS, Webpack, and Browserify.

API Documentation - We’ve updated our online documentation, ensuring that each control has a clear, complete and correct documentation page that lists all the details for the control’s methods, options and events. We’ve added detailed descriptions of all the parameter types, return types and option types.

What's Next?

We’re always looking for new ways to improve our products, and some of our best ideas come from our users. If you have ideas for new features, important issues we need to address or brand new controls you’d like to see, please let us know! Post them to our Product Ideas website. Be sure to follow Infragistics and Ignite UI on Twitter for the latest news about our products. Connect with our product teams on our Community Forums where you can interact with Infragistics engineers and other customers. And if you have any questions, comments or feedback, please feel free to drop me an email at JBender@Infragistics.com.

What's New for WPF in Ultimate 16.2

0
0

We’re pleased to announce the release of Infragistics Ultimate 16.2, featuring great additions like our Royal Dark Theme and our xamCategoryChart. We’ve also made improvements to our xamDataGrid, xamPropertyGrid, xam Calander and our charts. All of these are designed to help you build better, faster, and more usable applications.

Royal Dark Theme

We’ve always made a wide range of WPF themes available for use in your applications. One of the more popular themes has been the Metro Dark theme, which is based on larger elements for a more touch-friendly interface. There has always been a need for a dark theme for applications that don’t require larger touch-friendly elements. We used popular applications such as Microsoft Office, Visual Studio, and Blend as inspiration for a brand new WPF dark theme called Royal Dark to fill this need. This theme is supported by the Infragistics WPF Theme Manager component and ships with support for the common Microsoft intrinsic controls out of the box.

xamCategoryChart

The xamCategoryChart is a brand new charting control that makes visualizing category data a breeze. Built on top of the market’s highest performing and feature rich xamDataChart, the xamCategoryChart simplifies the complexities of the data visualization domain into an easy-to-use API. Simply data bind a collection of data, or a collection of collections, to the ItemsSource property and watch the magic happen. The xamCategoryChart will analyze the data and automatically choose the best series to represent your data. You can easily decide for yourself which type of chart to use by setting the xamDataChart.ChartType property. Choose from the following chart types:

  • Line
  • Area
  • Column
  • Point
  • Spline
  • Spline Area
  • Step Areas
  • Step Line
  • Waterfall

xamDataGrid

Our WPF control suite already has one of the best grids available, but in 16.2 we’ve made it even better. We’ve added a “Select All” option to the Field Chooser. This makes it easier for users who have Field Layouts with a lot of fields to select them all without having to check every one.

A great feature of the xamDataGrid is its flexible and rich filtering capabilities. We’ve made a great improvement to filtering by adding a Cross Field Filtering feature. The current xamDataGrid filtering behavior is set to a single field at a time. Users can create as complex a filter as they want, but it can only be applied to a single field. For each field that needs a filter, a new filter must be added to that field.

With Cross Field Filtering, a user can create a single filter and apply to as many fields in a single Field Layout as they want. This means that users can now create filters that include values from many different fields that are in the same Field Layout.

New menu options have been added to the xamDataGrid’s Header Prefix Area that exposes this new cross field filtering feature.

The new cross field filtering dialog looks similar to the existing field filtering dialog, but with the difference in that it provides a ComboBox that allows the end-user to choose which Field to include in the filter.

xamPropertyGrid

Currently our xamPropertyGrid has two templates: the ReadOnlyTemplate and the EditTemplate. This is great for when you know what type of editor you will need for a specific property at design time, but not so great if you need to change your templates based on logic at run time. To enable this common scenario, we have added a new TemplateSelector property to the xamPropertyGrid that allows you to provide different read-only and edit templates at runtime based on custom logic by implementing a simple TemplateSelector.

xamCalendar

Both the xamCalendar and xamMonthCalendar have received an important new feature: Vertical Scrolling.  Prior to 16.2, the only option for scrolling the calendar was in the horizontal direction. So when using a mouse wheel, the calendar would only scroll horizontally (left to right), which often made for a confusing user experience.

Now, you can use the new ScrollDirection property to determine which direction the calendar will scroll; Horizontal (default) or Vertical. When Vertical is selected, the visual arrow indicators will change direction to indicate a vertical scroll when clicked, and when using the mouse wheel, the calendar will scroll vertically.

Charts

We revamped our charting and data visualization library, making our charts easier to use while increasing performance. Our new charting API gets you up and running faster with default options designed to cover most common use cases. In most situations, you simply need to bind your data source to a chart control and that’s it.

The new library is smarter about determining the best way to display your data, while still offering the flexibility you’d expect to make your data appear however you like. We’ve also increased the performance of our charts, making them up to two times faster, even with large data sets.

We’ve also added the ability to select specific slices in our xamPieChart. You can control the behavior of the slice selection by setting the xamPieChart.SelectionMode property.  There are three options to choose from

  • Manual
  • Multiple
  • Single

What’s Next?

Infragistics 16.2 offers great new and unrivaled controls and features. We’re always looking for new ways to improve our products, and some of our best ideas come from our users. If you have ideas for new features, important issues we need to address or brand new controls you’d like to see, please let us know! Post them to our Product Ideas website, and be sure to follow Infragistics on Twitter for the latest news about our products. Connect with our product teams on our Community Forums, where you can interact with Infragistics engineers and other customers. And if you have any questions, comments or feedback, please feel free to drop me an email at JBender@Infragsitics.com.

What's New for Windows Forms in Ultimate 16.2

0
0

We’re pleased to announce the release of Infragistics Ultimate version 16.2, featuring great additions like our Ultra Office Nav Bar, Ultra Zoom Panel along with improvements to Ultra Color Picker and Ultra Pie Chart to help you create a better user experience.

UltraOfficeNavBar

Inspired by the Outlook Navigation bar, the Ultra Office Nav Bar provides a simple way to navigate between different views of the same data. This enables you to provide your users with several different presentations and allows them to choose the one that works best for them at any time. This control also enables users to quickly access a subset of their detailed data in a popup “Peek Window” when a user hovers over any item in the control. The Peek Window can contain text or a picture (or a mixture of both) and enables users to see a summary of data for an item without having to open the it. There are many ways to customize the layout and information, and we invite you to explore all the creative ways you can present data to your users with it.

UltraZoomPanel

Also added in release 16.2 is the Ultra Zoom Panel. This new control is actually a container that can contain other controls, and it allows the user to zoom in and scroll through the contents of the contained controls. For example; if you were to place one of our Ultra Grid controls inside of an Ultra Zoom Panel, you would have the ability to zoom in on the grid data as shown in this image:

(Zoom set to 100%)

(Zoom set to 175%)

The Ultra Zoom Panel supports many of our controls (a complete list can be found here) and as we receive input from developers, we plan to add more.

UltraColorPicker

We’ve redesigned the color-selecting experience to provide a modern UI, allowing you to customize the palette any way you like. The centerpiece of the new color selection experience is the Ultra Color Palette. The Ultra Color Palette is a standalone control and is ready to be added to your Windows form for a direct access color-selecting experience. We support RGB, HSL, or CMYK format as well as five different view styles to choose from.

We’ve added the Ultra Color Palette to the Ultra Color Picker’s dropdown experience. By default, the Ultra Color Picker’s style will be set to the new Color Palette to show the new color-selecting experience. You can get the old style back by setting the Style property to Visual Studio. We also added a static DefaultStyle property to the Ultra Color Picker to allow you to set all instances of the control to the same style.

UltraPaletteInfo

Ultra Palette Info allows the customization of the palettes used in any Ultra Color Palette or Ultra Color Picker instance. This allows you to customize the experience once, share the palette info and synchronize all instances in your application to the same palette, or allow any instance to use a different palette. 

UltraPieChart

We revamped our charting and data visualization library for this release, making our charts easier to use while increasing performance. Our new charting API gets you up and running faster with default options designed to cover most common use cases. In most situations, you simply need to bind your data source to a chart control and that’s it.

The new library is smarter about determining the best way to display your data, while still offering all the flexibility you’d expect to make your data appear however you like. We’ve also increased the performance of our charts, making them up to two times faster, even with large data sets.

We’ve added the ability to select specific slices in our Ultra Pie Chart. You can control the behavior of the slice selection by setting the Selection Mode property. There are three options to choose from:

  • Manual
  • Multiple
  • Single

What’s Next?

Infragistics 16.2 offers new, unrivaled controls and features. We’re always looking for new ways to improve our products, and some of our best ideas come from our users. If you have ideas for new features, important issues we need to address or brand new controls you’d like to see, please let us know! Post them to our Product Ideas website, and be sure to follow Infragistics on Twitter for the latest news about our products. Connect with our product teams on our Community Forums, where you can interact with Infragistics engineers and other customers. And if you have any questions, comments or feedback, please feel free to drop me an email at JBender@Infragsitics.com.

Infragistics WPF Release Notes – 16.2 Volume Release

0
0

Release notes reflect the state of resolved bugs and new additions from the previous release. You will find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in PDF, Excel and Word formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

In order to download release notes, use the following links:


Big news for the web dev community! Ignite UI is now open source!

0
0

For a while now, Ignite UI has been the choice for large enterprises to create beautiful and powerful modern web UIs on top of their enterprise data. To enrich the community, we're opening up the most powerful and easy-to-use UI framework for Modern Web Applications to everyone. That's right, we’ve made the majority of the line of business Ignite UI controls and components open source, and they're now available on GitHub for everyone! The open source part of Ignite UI is licensed under Apache 2.0.

As part of opening up Ignite UI, we’ve also created easy to grab NPM and Bower packages, and we’ve made the product fully AMD compliant. Just like any other open source project, Ignite UI is open to external contributions, provided that the contribution guidelines documented in our repository’s wiki page are being followed. The repository is still fully owned and maintained by the Ignite UI product team at Infragistics, so everyone is able to see how our own team contributes to the product. We’re also opening up our planning and tracking process: all of our plans are available on GitHub through the Issues and Projects tabs.

Open sourcing Ignite UI has been underway for quite some time now. We started by putting extensions for the product like the Ignite UI Angular and React extensions up on GitHub, then shared the native Angular 2 Ignite UI JS Blocks controls with the developer community.

Soon after, we moved all of the Ignite UI documentation topics, and now a large portion of the product.

The Ignite UI repository contains full information about what’s available in the open source version of the product. We wanted to empower individual developers and academia with a leading UI toolset, without having to pay for it, thus most of the product is available in the open source version.

The Ignite UI website has been updated to display which of the control samples can be built using the OSS package. Also, HTML versions of each sample are available in the GitHub repository, so you can clone, build and run each sample.

How can you contribute? Since everything related to the repository is public and visible through our repository issues, you can contribute by reporting issues, fixing and pull requesting, improving the test coverage, improving the API documentation. Checkout the repository for full information on how to do each of these!

Infragistics Windows Forms Release Notes - September 2016: 16.2 Volume Release

0
0

Release notes reflect the state of resolved bugs and new additions from the previous release. You will find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

Download the Release Notes

PDF - Windows Forms 2016 Volume 2
Excel - Windows Forms 2016 Volume 2

Infragistics 16.2 Volume Release Also Brings Improved Help Documentation Experience

0
0

Accompanying the 2016.2 release, we have some significant changes associated with our help documentation.

New Online Help Viewer

Starting with the help documentation for the 2016.2 release of our developer tools, we now feature a new online help viewer. This website features an improved experience that makes it easier to navigate content among different versions, share links and find technical information you need.

With the new viewer, the browser's location is always in sync with the current topic and search results show up in the primary area of the page layout. The website defaults to a "version-less" mode making it easy for you to find your way to the latest help content. As you navigate, raw URLs always return the help associated with the latest version of the product. For instance the location:

  http://www.infragistics.com/help/wpf/wpf-getting-started-with-wpf

will take you to the latest version of the topic while:

  http://www.infragistics.com/help/wpf/wpf-getting-started-with-wpf?v=16.2

will take you specifically to the 16.2 version of that topic. This makes it easy to navigate to and share topics from various versions.

From the website itself, there is now a version selector which allows you to select the version of the topic you’d like to view:

This list of versions will continue to grow as subsequent releases after 2016.2 become available. Help for versions previous to 2016.2 remain under the old help viewers and retain the same URLS.

In order to make it easier for you to find your way around the help, the table of contents also remains in sync with the current topic. For instance, if you navigate directly to a page deep into the table of contents structure:

The navigation on the left hand side is automatically expanded to select the current topic.

Lastly, each time a browser requests a file the entirety of the HTML is returned from the request instead of being nested behind a frame. This is important to you because it increases the SEO performance of the topics making it easier for you to find content you want from a simple web search or through our site's search service.

Open Source Documentation

Just as we open sourced the documentation for Ignite UI, we are now open sourcing the documentation for all of our developer tools (WPF, ASP.NET, Windows Forms and Test Advantage) products shipping in 2016.2. This means that you can help play an active role in helping us improve the content and quality of the product documentation. Soon after the release, the repository for each of our products will be available on GitHub giving you the opportunity to create issues, submit pull requests and discuss documentation-related issues directly with our product teams.

Offline Help

The offline help files have also changed in concert with the changes in our new help system. For 2016.2, the offline help for all developer tools products (excluding iOS) are now available exclusively as CHM files. The iOS offline help remains in the same format allowing you to easily launch a local copy of the off the file system in your browser.

Limitations

Each product includes all the documentation (Developer's Guide topics and generated API documentation) in its respective CHM with the exception of Windows Forms. The sheer size in terms of the amount of files involved with building the Windows Forms help made it so that the API documentation needed to be split up into separate files. Unfortunately this means that if you attempt to navigate to an API member from an offline Developer's Guide help topic, you will be presented with a message telling you that the content you are looking for is not in the current CHM. While the link may not take you directly to the topic you wish, each assembly is represented by its own CHM you can navigate to the appropriate CHM based on the assembly name to find the help topic in question.

Lastly, the Japanese release requires an update to the platform installer before it includes offline help documentation. Look for offline help to be included with the first refresh of the Japanese platform installer.

Finding What You Need

Links to all our help, including all supported products and versions, are available at http://www.infragistics.com/support/online-documentation

Exploring Attribute Directives in Angular 2

0
0

Attribute Directives are used to change the behavior, appearance or look of an element on a user input or via data from the service. Essentially, there are three types of directives in Angular 2:

  1. Component
  2. Structural directives
  3. Attribute directives

In this post, we will learn how to create Attribute Directives in Angular 2. So let’s say we want to change the background color of an element; in that case we would apply the attribute directive to the element.

Create first Attribute directive

Let’s start with creating the Attribute Directive. To do this, we need to create a class and decorate it with @directive decorators. A simple attribute directive to change the color of an element can be created as shown in the next listing:

import {Directive,ElementRef,Renderer} from '@angular/core';@Directive({
    selector:'[chcolor]'
})exportclass ChangeColorDirective{   constructor(private el:ElementRef,private render:Renderer){this.changecolor("red");
    }private changecolor(color: string) {this.render.setElementStyle(this.el.nativeElement, 'color', color);
    }
}

 While we’re creating an attribute directive to change the color of the element, keep in mind that we don’t NEED to create a new attribute directive to just change the color; simple colors can be changed by using property binding. However, the attribute directive we created will change color of an element in this example. There are few important points to remember:

  1. Import required modules like Directive, ElementRef, and Renderer from Angular 2 core library
  2. Create a TypeScript class
  3. Decorate the class with @directive
  4. Set the value of the selector property in @directive decorator function. The directive would be used, using the selector value on the elements.
  5. In the constructor of the class, inject ElementRef and Renderer object.

We are injecting ElementRef in the directive’s constructor to access the DOM element. We are also injecting Renderer in the directive’s constructor to work with DOM’s element style.  We are calling the renderer’s setElementStyle function. In the function, we pass the current DOM element by using the object of ElementRef and setting the color style property of the current element. We can use this attribute directive by its selector in AppComponent as shown in the next listing:

@Component({ 
    selector:'app-container',
    template:`<p chcolor>{{message}}</p>`
    })exportclass AppComponent {

We used an attribute directive on a

element. It will change the color of the paragraph text to red.  Also, we need to declare the attribute directive at the app.module.ts as shown in the next listing:

  1. We need to import the directive
  2. We need to declare the directive

app.module.ts

import {AddtaskComponent} from './task/addtask.component';import {ChangeColorDirective} from './task/taskcolor.directive';import { app_routing } from './app.routing';import { DataService } from './shared/data.service';@NgModule({
    imports:      [ BrowserModule, FormsModule, HttpModule, app_routing ],
    declarations: [ AppComponent,TasksComponent, HomeComponent,AddtaskComponent,ChangeColorDirective],
    providers:    [ DataService ],
    bootstrap:    [ AppComponent ]
})exportclass AppModule { }

Here we are importing the ChageColorDirective and also declaring it in the app.module. After doing this, we should be able to use the attribute directive in all the components.

 User Input in attribute directive

We may have a requirement to apply an attribute directive on the basis of some user inputs to change the color of the element when the user mouses over or mouse hovers on the element. To do this, we need to:

  1. capture user input or action, and
  2. apply a color or clear color respectively.

On various user actions, we can call different methods to handle the user actions. To enable methods to handle user actions such as mouse enter, we need to decorate methods with the @HostListener decorator.  We can modify directives to handle user input as shown in the next listing.

import {Directive,ElementRef,Renderer,HostListener,Input} from '@angular/core';@Directive({
    selector:'[chcolor]'
})exportclass ChangeColorDirective{   constructor(private el:ElementRef,private render:Renderer){
    }@HostListener('mouseenter') methodToHandleMouseEnterAction(){this.changecolor('red');
    }@HostListener('mouseleave') methodToHandleMouseExitAction(){this.changecolor('blue');
    }private changecolor(color: string) {this.render.setElementStyle(this.el.nativeElement, 'color', color);
    }
}

As you can probably tell, we have added two methods to handle user actions. On mouse enter and mouse leave, we are changing the color to red and blue respectively.

Passing data to the directive with binding

So far we have hard coded the value of the color to the directive. In this next section, let us pass data to the directive with binding. To bind the directive with data, we will use the @Input() decorator and add a property in the directive class:

@Input('chcolor') highlightColor: string;  

The attribute directive can be used as follows:

<p [chcolor]="color">{{message}}</p>

Let us rewrite the attribute directive to get data from the binding. The element to which the attribute directive will be bound will pass color data.  If the element is not binding color data to the attribute binding, the default color red would be used.

This directive can be recreated as shown in the next listing:

import {Directive,ElementRef,Renderer,HostListener,Input} from '@angular/core';@Directive({
    selector:'[chcolor]'
})exportclass ChangeColorDirective{ private _defaulColor ='red';@Input('chcolor') highlightColor: string;  constructor(private el:ElementRef,private render:Renderer){
    }@HostListener('mouseenter') methodToHandleMouseEnterAction(){

        console.log(this.highlightColor);this.changecolor(this.highlightColor ||this._defaulColor);
    }@HostListener('mouseleave') methodToHandleMouseExitAction(){
        console.log(this.highlightColor);this.changecolor(null);
    }private changecolor(color: string) {this.render.setElementStyle(this.el.nativeElement, 'color', color);
    }
}

We can pass data through binding to the attribute directive as shown in the next listing:

@Component({ 
    selector:'app-container',
    template:`<div><input type="radio" name="colors" (click)="color='blue'">blue<input type="radio" name="colors" (click)="color='orange'">orange<input type="radio" name="colors" (click)="color='green'">green</div><p [chcolor]="color">{{message}}</p>`
})exportclass AppComponent {

We are creating a radio button and binding the value of the color on the click event of the button to the attribute directive. We can select a color from the radio button, and on mouse enter the color would be changed to the selected value.

In a real application, we may fetch data from a REST service and bind to attribute directive. 

Conclusion

In this post we learned about Attribute Directives in Angular 2, and created them to change the behavior or appearance of an element, and bound it to the data of the element. I hope you find this post useful. Thanks for reading!

Infragistics Racing – 2016 Season Recap

0
0

The weather is turning decidedly more Fall-like here at Infragistics corporate headquarters, and that means it’s time to reflect on the 2016 Infragistics Racing season.

summit3

Starting back in March (!), the team visited 4 different tracks on the East Coast (New Jersey, West Virginia and Virginia). In weather that ranged from cold (yes, even West Virginia is cold in March and NJ in October can be downright frosty) to hot (back to West Virginia again in July and August) to monsoon-like rain (thanks Virginia in September) we were out on track, putting in fast laps, keeping in mind that there was still UX work to be done after the checkered flag.

VIR RainVIR Rain RadarVIR rain 2

A race to forget at Virginia International Raceway!

On the whole, it was an excellent season that saw Infragistics Racing finish 8th overall (out of 63 racers). I also managed to finish the season without needing a cast, crutches or surgery (which is more than I can say about last season) ;-) The team’s success is largely attributable to the fantastic support provided by Infragistics’ CEO, Dean Guida and the rest of the management team and the 2016 bike design, “XLR8”, Infragistics’ new mobile development conference series, which was worth at least a few extra horsepower compared to the other bikes on the track.

njmp1

Thanks Infragistics! See you in the Spring!

---------------------------------------------

Kevin Richardson has been working in the area of user experience for more than 25 years. With a PhD in Cognitive Psychology, he has experience across business verticals in the fields of research, evaluation, design and management of innovative, user-centered solutions.

On the weekends, you can find Kevin on his motorcycle, racing for Infragistics Racing at a number of different racetracks on the East coast.

ASP.NET Core - Using Ignite UI components

0
0



ASP.NET Core 1.0 is here, providing some new and exciting features that we can’t wait to get our hands on!
We’ll take a look at some of the key features and concepts that were introduced as part of the redesigned ASP.NET Core together with examples on how to incorporate them with a cool components toolkit for modern web development that will Ignite your UI.

The Ignite UI is a complete HTML & JavaScript toolkit for building modern cross-browser experiences. It comes with MVC wrappers, which now take full advantage of the new ASP.NET Core 1.0 and all its new goodness. They wrap the client controls in a server-side set of MVC Extensions that allow the controls to be defined in ASPX or Razor syntax. They provide a compact and expressive syntax that will feel very familiar to C#/VB developers as well as great IntelliSense support.

How does it get distributed?

With the new ASP.NET most modules are now wrapped NuGet packages. This allows you to retrieve and use only the specific modules you need for your app, without having to depend on a common assembly (like the System.Web.dll in previous versions of ASP.NET). All dependencies of the specific module will be restored out the box. As such our new MVC wrappers built on top of ASP.NET Core will also ship as NuGet package.
To include the package via Visual Studio’s UI simply open the “Manage NuGet Packages…” window type in “Infragistics.Web.Mvc” and install it.




You can also directly edit the project.json file by adding a new entry for the assembly to the project’s dependencies:

"dependencies": {
"Infragistics.Web.Mvc": "6.15.2.1"
}

Visual Studio will restore all packages and their dependencies and you’re ready to code. It is that easy!

Run, build and distribute anywhere

The new cross-platform support for Windows, Linux and Mac is by far the most anticipated improvement introduces with ASP.NET Core. With this addition we can now fully develop, build and run our web application on any of those environments.

The whole process is made simpler by using Visual Studio Code, which is a nice lightweight text editor with plugins that support editing and debugging an ASP.NET Core applications.

The cool new .NET Core Command Line Interfacealso provides a simple and unified way of creating, building, running, packing and publishing your web application. The tool is cross-platform and can be used the same way on each of the supported environments.

Additionally, you can take advantage of a set of templates very similar to the ones available in Visual Studio 2015 via the Yeoman templates for ASP.NET.

Let’s try those out!

For this example, we’ll create a new web application utilizing the Ignite UI toolset on Mac, which we’ll then build and run.

We’ll start by creating a new application from a Yeoman template:

This will create a basic Web application similar to the Visual Studio default template.

The application will be created in the current directory and can then be further modified via Visual Studio Code.
We’ll then open and edit it, adding the Ignite UI toolset to display some tabular data. The assemblies used in the project can be modified by adding/removing them from the project.json file. In order to add the Ignite UI MVC wrappers to our project we can add the reference to “Infragistics.Web.Mvc” assembly in the dependencies list, for example:

After all needed references are in place the “dotnet restore” command can be executed in the console in the directory of the project.json file in order for the related NuGet packages to be downloaded. Once the packages are restored we can continue modifying the solution using the additional UI components the Ignite UI toolset provides. We’ll add a simple grid that’s pulling data from a MVC controller action.

There are two possible ways to define the control in the application:

-  By configuring a Model class and passing it as an argument in the grid extension method. Refer to the example below.

Model definition:

Passing it to the grid extension method in the view:

-  By defining the control in the View using chaining syntax. Defining the control in the view is achieved by exposing properties and methods through helper’s methods that always return the same object that called them. For example:

Both configuration methods for defining the control will yield the same result.
For the controller action that will return the data we’re just generating some data in a List and returning it to the View as Queryale.

You can see that the Action is decorated with a GridDataSourceActionAttribute attribute. This is an Ignite UI Grid specific action filter which processes the passed IQueryable data, transforms it according to the request parameters and returns it as JsonResult. This allows remote features for the grid, like remote paging, filtering, sorting etc. to work out of the box when this attribute is set for the action returning the data, so that no additional coding is required to handle these remote scenarios. All necessary data processing will be handled by the Action filter.
Once we’re done with the modifications we can then build and run the application via the console using the .NET Core Command Line Interface.

We can then open the application and view the result in the browser:

Handling file uploading with Middleware

In the old ASP.NET in order to handle more robust file uploading capabilities as multiple file uploads, large file uploads and reporting of the progress of an upload you would have to implement an HttpModule and/or HttpHandler in order to plug into the into the HTTP Request process.

ASP.NET Core introduces a new request pipeline built around a new middleware definition.
The new request pipeline allows you full control over the order in which the requests are handled. You can also stop the process and return the response to the client at any stage, preventing the pipeline from continuing processing the request when not needed.

The Ignite UI file upload fully utilizes the new middleware definition model and can be plugged into the pipeline. It’s important to remember that the request will be processed in the order in which the middleware components are added to the pipeline, so it’s important to plug the Ignite UI middleware at the correct time.

The default template that ships with Visual Studio 2015 adds the following middleware components:
  •     Error handling 
  •      Static file server 
  •      Authentication 
  •      MVC

publicvoid Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            app.UseUploadModuleMiddleware();
            app.UseUploadHandlerMiddleware();
            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}");
            });


We can then setup the control in the View
And start it up, upload a file and see the result.

And to wrap it all up…

With the introduced cross-platform support, distribution model and request pipeline, ASP.NET Core has never been more tuned for modern web development. This gives you the opportunity to easily incorporate third party libraries that will boost your productivity and enhance your UI.
The Ignite UI contains a full set of UI components to bring your user experience to the next level and enable you to build modern web experiences on any device. So if you’re looking for a performant and feature rich toolset that plays well with other popular client-side libraries and also has MVC wrappers for your ASP.NET Core application you may have found your perfect match.

Check out Ignite UI’s website for more information and  ASP.NET Core goodness with our released, fully integrated Tag Helpers!








Ignite UI Release Notes – 16.2 Volume Release

0
0

Release notes reflect the state of resolved bugs and new additions from the previous release. You will find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

Download the Release Notes

Ignite UI 2016 Volume 2


ASP. NET Core – Creating custom Tag Helpers

0
0

Asp.net Core provides a way to extend the Razor syntax with custom tags using TagHelpers.

 

Using TagHelpers makes the Razor view much easier to understand from a non C# person due to the html look. Instead of using HTML helpers for creating a label now we can use a TagHelper.

For example, if we want to create a label for our username input, we should use the following syntax.

@Html.Label("Username", "Username:", new { @class = "control-label" })

In order to set attributes to the label we should provide an anonymous object as third parameter. For a front end developer or non C# person this syntax may be unfamiliar and changing the class or adding additional class, or attribute requires a better knowledge of C#.

The same can be achieved by using the LabelTagHelper:

<ig-loadercss-path="http://localhost/css"

           javascript-path="http://localhost/css"

           resources="combo"/>

The line above is much easier to understand and fits better in html, since it’s a markup declaration rather than C# code.

Because we are using TagHelpers we can take advantage of the Visual Studio IntelliSence support.

 

This looks very awesome but what about creating a custom TagHelpers, is it possible at all?

The answer is yes, this is possible and you can create complex controls such as grids and dropdowns, etc.

In order to create a custom TagHelper all we need to do is inherit the TagHelper class(Insert hyperlink here).

Let’s create TagHelper called Loader, which will load resources such as JavaScript and CSS. The Loader is an Ignite UI AMD component.

We can use the template from Visual Studio from the Add new item menu.

 

 

And that will create the following class:

using Microsoft.AspNetCore.Razor.TagHelpers;

 

namespace WebApplication1.TagHelpers

{

    // You may need to install the Microsoft.AspNetCore.Razor.Runtime package into your project

    [HtmlTargetElement("tag-name")]

    publicclassLoaderTagHelper : TagHelper

    {

        publicoverridevoid Process(TagHelperContext context, TagHelperOutput output)

        {

 

        }

    }

}

 

Our LoaderTagHelper will have the following structure

<ig-loadercss-path="http://localhost/css"

           javascript-path="http://localhost/css"

           resources="combo"/>

The following will be rendered as a script tag containing html.

The TagHelper should be mapped to ig-loader by changing the value of the HtmlTargetElement to “ig-loader”. TagHelper Attributes should be mapped to C# properties, and in order to achieve this we will use the HtmlAttributeName, where we provide the name of tag helper attribute as a value.

Our class should now look like this:

using Microsoft.AspNetCore.Razor.TagHelpers;

 

namespace WebApplication1.TagHelpers

{

    [HtmlTargetElement("ig-loader")]

    publicclassLoaderTagHelper : TagHelper

    {

        [HtmlAttributeName("css-path")]

        publicstring CssPath { get; set; }

 

        [HtmlAttributeName("javascript-path")]

        publicstring JavaScriptPath { get; set; }

 

        [HtmlAttributeName("resources")]

        publicstring Resources { get; set; }

 

        publicoverridevoid Process(TagHelperContext context, TagHelperOutput output)

        {

             

        }

    }

}

 

To render our TagHelper to output html we will use the Process method. We are going to set output.TagName to empty string and append the html to the output content.

 

publicoverridevoid Process(TagHelperContext context, TagHelperOutput output)

{

    output.TagName = string.Empty;

    output.Content.AppendHtml($"<script>{this.SerializeJavaScript()}</script>");

}

 

This is great, but how to create more complex TagHelpers with relation between them?

 

We can use the TagHelperContext.Items dictionary to communicate with its child TagHelper in order to create relation.

 

Let’s create a ComboTagHelper which will have a multiselection functionality.

We are giving it the following structure:

 

<ig-comboig-data-source="@Model"

          ig-key="Id"

          ig-value="Name">

    <ig-combo-multi-selectionig-is-enabled="true"ig-enable-checkboxes="true"/>

</ig-combo>

We will have the following C# classes relatively:

using Microsoft.AspNetCore.Razor.TagHelpers;

 

namespace WebApplication1.TagHelpers

{

    [HtmlTargetElement("ig-combo")]

    publicclassComboTagHelper : TagHelper

    {

        [HtmlAttributeName("ig-key")]

        publicstring Key { get; set; }

 

        [HtmlAttributeName("ig-value")]

        publicstring Value { get; set; }

 

        [HtmlAttributeName("ig-data-source")]

        publicobject DataSource { get; set; }

 

        publicMultiSelectionTagHelper MultiSelection { get; set; }

 

        publicoverridevoid Process(TagHelperContext context, TagHelperOutput output)

        {

 

        }

    }

}

 

and

using Microsoft.AspNetCore.Razor.TagHelpers;

 

namespace WebApplication1.TagHelpers

{

    [HtmlTargetElement("ig-combo-multi-selection")]

    publicclassMultiSelectionTagHelper : TagHelper

    {

        [HtmlAttributeName("ig-enable-checkboxes")]

        publicbool EnableCheckBoxes { get; set; }

 

        [HtmlAttributeName("ig-is-enabled")]

        publicbool Enabled { get; set; }

 

        publicoverridevoid Process(TagHelperContext context, TagHelperOutput output)

        {

           

        }

    }

}

 

In order to create a relation between the TagHelpers and initialize MultiSelection property in the parent with correct context we will pass the instance of the parent in the items collection of its context.

In our parent process method, we are going to pass this to key ComboTagHelper and get child context so its attributes can be parsed.

publicasyncoverridevoid Process(TagHelperContext context, TagHelperOutput output)

{

    context.Items.Add(typeof(ComboTagHelper), this);

    await output.GetChildContentAsync();

    // Set the output of the TagHelper

}

In 'the child process we will set a reference to MultiSelection property of the parent and suppress the output.

publicoverridevoid Process(TagHelperContext context, TagHelperOutput output)

{

    ((ComboTagHelper)context.Items[typeof(ComboTagHelper)]).MultiSelectionSettings = this;

    output.SuppressOutput();

}

Now we have our child TagHelper processed as property of the parent and we can use it to render the output.

The TagHelpers are available in Volume release 16.2 of Ignite UI.

 

How to use Ignite UI components with React

0
0

Great news, folks! With the release of Ignite UI 2016.2 our toolkit is available to use in your React websites and application! Combining the rich and powerful Ignite UI controls with the great performance of React will boost your productivity and will help you in building great user experience applications.

What is React?

React is an extremely popular library for creating user interfaces that has already conquered its` place in the world of the modern-day web development, the main reason for that being the fast rendering of the updated components that React provides because of the way it manages its` Virtual DOM. More info on why React was created and what makes it different than all the other libraries out there can be found in this article.

Using Ignite UI controls with React

If you want to use the Ignite UI controls in your React application, you should first add the references to React, jQuery and Ignite UI source files.

// CSS refs 

 ...

// JavaScript refs 

  ...

// React refs

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js">script>

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js">script>

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js">script>

<scriptsrc="../../src/props/igGrid.js">script>

<scriptsrc="../../src/util/ignite-react.js">script>

<scriptsrc="../../src/components/igGrid.js">script>

<scriptsrc="../../src/components/igShared.js">script>

Doing this will allow you to use the Ignite UI components in your app.

Here is an example of using an igGrid inside React app. First we create the data source that the igGrid will use:

<scripttype="text/javascript">

var sourceData = {

"Products": [

{

"ProductID": 1, "Name": "Chairs", "UnitsInStock": 385, "UnitPrice": 358.74353459046387, "DateAdded": "2004-06-20T20:18:20.469", InStock: true

},

{

"ProductID": 2, "Name": "Kitchen knifes", "UnitsInStock": 602, "UnitPrice": 140.2894189303226, "DateAdded": "2000-02-21T22:56:16.331", InStock: true

},

...

]

}

Then we define a new igGrid React component using React.createClass. Inside the getInitialState function we can define the states that the igGrid will use: 

var App = React.createClass({

getInitialState: function () {

return {

// the view is the grid data source in this case

view: sourceData,

gridHeight: "400px",

gridWidth: "100%",

selectedRowId: -1

}

},

Then, inside the render function, we initialize the igGrid component.

Note: The values that are assigned to the options of the igGrid can be literals that are enclosed in quotation marks (‘primaryKey’ option in our example) or can be JavaScript values (‘dataSource’ option in our example).

<IgGrid

id="grid1"

ref="grid1"

autoGenerateColumns={false}

dataSource={this.state.view}

primaryKey="ProductID"

autoCommit={true}

height={this.state.gridHeight}

width={this.state.gridWidth}

columns={[

{ headerText: "Product ID", key: "ProductID", dataType: "number" },

{ headerText: "Name", key: "Name", dataType: "string"},

{ headerText: "Stock", key: "UnitsInStock", dataType: "number" },

{ headerText: "UnitPrice", key: "UnitPrice", dataType: "number", format: "#.##"},

{ headerText: "DateAdded", key: "DateAdded", dataType: "date", format: "dateTime" }

]}

responseDataKey="Products"

features={[

{ name: "Selection", rowSelectionChanged: this.gridRowSelectionChanged}

]}

/>

As you can see, we are using JSX syntax. You can use React without JSX but we would recommend you to give JSX a try as this will make your code look simplified and more readable for your non-technical colleagues (designers, technical writers, etc.) and even customers. But there are also more serious reasons to use JSX. For example, JSX ca prevent injection attacks as, by default, React DOM is escaping any values embedded in JSX before rendering them. If you are new to JSX, we can recommend you this article  where the guys at Facebook give more detailed overview of the syntax extension.

Now let`s get back to the code. Maybe you`ve noticed something interesting in the last piece of it? While setting up the Selection feature of the igGrid we are using this.gridRowSelectionChanged but we haven`t defined such a function inside our code. We will place this function just below the render() function of our class. In our example, we will get the id of the selected row and will update the selectedRowId that we`ve defined in our getInitialState() function with it. Here is how our new function can look like:

gridRowSelectionChanged: function (evt, ui) {

var rowId = ui.row.id;

this.setState({ selectedRowId: rowId });

}

At the end of our React.createClass helper we provide the main component which contains the igGrid as the first argument of the ReactDOM.render() method and the main

element that you should have created inside the body of your document as the second argument.

ReactDOM.render(

<App/>,

document.getElementById("app")

);

After this step your application must be ready to use. You can run it inside your favorite browser and you should see the igGrid with Selection feature enabled.

You can find the code of the example that we went through together below this post. And if you want to go deeper and see some real life examples of how the different Ignite UI components can work together using React, you can check the more advanced samples.

16.2 Webinar Recap

0
0

We would like to thank everyone for attending the Infragistics 16.2 webinar! If you missed it, please check out the recording here.

[youtube] width="560" height="315" src="http://www.youtube.com/embed/0a00gVGLZnA" [/youtube]

Also be sure to check out the What’s New posts for Ignite UI, WPF and WinForms.

We had several questions asked during the webinar. We do our best to answer all the questions we can during the webinar, but sometimes we can’t get to all of them or we need to research the answers. Here is a list of the questions from the webinar and the answers:

Do you have any authorized resellers or distributors in East Africa ?

We have a partner in South Africa called Titus. Alternatively, you can reach out to Compares in South Africa. We don’t appear to have a partner specifically designated for East Africa.

I see your Ignite UI Angular 2 solutions have a jQuery dependency. They're wrapped jQuery widgets and not true not Angular 2 components, right?

Our Angular 2 components are Angular 2 components, but they are not jQuery-free. From a developer experience standpoint, there is no difference when using our components as opposed to jQuery-free components.

Will I be able to take advantage of Angular Universal and Ahead of Time compilation with wrapped jQuery components?

We currently do not support these. We are working on developing support for Angular Universal for our Data Visualization components. If this type of support is important to you, please add it to http://ideas.infragistics.com.

Is 16.2 offering the "ImmediateLineSeries" chart for high performance charting using the writable bitmap?

I need a little more information about your question. Can you drop me an email at JBender@Infragistics.com and let me know if you are talking about WPF, WinForms or Web?

I'd like the WPF tile ability to detach from tile manager and float anywhere on the page. Is that possible?

Are you looking for something like this: http://ideas.infragistics.com/forums/192363-wpf/suggestions/15676971-freeform-tile-placement-system-for-xamtilemanager.

Is there any recommendation or example available for SharePoint or Office 365?

I was in the process of asking for more information about this question when the webinar ended. Can you please drop me an email at JBender@Infragistics.com and give me a little more information about what you are looking for please?

We have a Silverlight web product that we are going to move to HTML5/javascript. Using Silverlight was great - no cross browser issues. How do your tools help reduce cross browser support?

The core of Ignite UI is built on jQuery, which is a framework that handles cross browser support issues.

Internally when you develop Javascript, do you actually use a language like typescript?

Sometimes, it depends on the context and situation. We try to use the best tool available for each task. All of our libraries will work in TypeScript and have type definitions available.

I have a list of X,Y plot points that show a 2D object. (like dot to dot) Do you have a chart that will display this?

Yes, our chart supports this.

We have integrated the XamNetworkNode in our flagship WPF application. However we need the component to be able to style each edge depending on the edge datamodel (edge of different color, size,etc) and to have weights and label on the edge. I also notice that this components have not received update in the last couple of updates. Do you think the XamNetworkNode can received this new feature or some others improvements in the next release updates?

We will try our best to accommodate you. Please go to http://ideas.infragistics.com and make sure your request is listed. If you need immediate support, I would recommend reaching out to support to see if there is a work around. You could also look into the xamDiagram and see if that control fits your needs.

You mentioned Nuget, will there be a nuget solution for licensed customers?

Yes, we offer NuGet packages to licensed users via a private NuGet server.

Again, thanks for joining us for the 16.2 webinar. Please follow Infragistics and Ignite UI on Twitter for latest updates. And as always, if you have any questions please don’t hesitate to send me an email at JBender@Infragistics.com.


AIGA Conference Recap

0
0

I had the pleasure of attending the 2016 AIGA Conference in Las Vegas a few weeks ago. The theme of the conference this year was “The Shape of Design” and attendees were given the opportunity to hear industry leaders such as Paula Scher, John Maeda, and Diogenes Brito talk about their personal experiences in today’s fluid, professional landscape.

Screen Shot 2016-11-07 at 1.43.02 PM

The conference was kicked off by a design fair featuring vendors like Pantone and Adobe during which I signed up to participate in the jointly created Google/AIGA 2016 Design Census later this year. This survey will reach far beyond the usual salary poll that has been performed in years past and promises to include questions about anything from length of commute, to office environment and educational background. The goal of the census is to empower the broader design community to take charge of its professional development and happiness.

aiga2

Immediately following, the first general session began where moderator Roman Mars, the creator of 99% Invisible led the crowd through a series of inspiring and provocative talks. One of the most memorable was “Change It, Don’t Change It” given by Keira Alexandra who spoke about her experience redesigning the Kodak logo. She led the audience through her design process for this practically pro-bono project that resulted in a logo that was new and relevant while continuing to pay homage to the longstanding traditions of a slightly tattered but well-loved brand.

aiga3

More than any individual talk though, I would have to say that my favorite part of the conference was Command X, where seven emerging designers (under 30) competed in a live design challenge. Through a series of three elimination rounds; redesigning the Gambler’s Anonymous logo, creating innovative shipping packaging for Zappos, and crafting a campaign to get young people to vote, the contestants presented their work to the crowd and received live critiques from judges Dana Arnett, Stanley Hainsworth, and Bonnie Siegler. It was impressive to see the work of these talented young designers as well as fascinating and informative to hear the feedback given by the expert judges, not to mention how much fun it was to think about how I would have responded to each challenge myself.

aiga4

After 3 days and more than 50 presentations, the conference came to a close – until next year when it will be held in Minneapolis. I left feeling inspired and more than a little bit in awe of the speakers I had seen, ready to rush home and create something spectacular!

If you are a designer who is not already a member of AIGA, I strongly urge you to look into membership. They have more than 70 chapters nationwide with over 25,000 members. They offer newsletters, blogs, networking events, continuing education, and enable members to form powerful social and professional bonds through conferences, competitions, lectures, and community events.aiga.org

What does the powerful combination of Ignite UI and Angular 2 make possible for developers?

0
0

We have always striven to stay ahead of the curve with Ignite UI, thus with 16.2 we're introducing compatibility with the newly released Angular framework in two separate directions. We now have both Ignite UI Angular extensions on top of the Ignite UI you're already familiar with, as well as a brand new set of Angular native components, which we codenamed "Zero Blocks" and are now called JS Blocks.

The first part of this blog will focus on Ignite UI JS Blocks.
Ignite UI JS Blocks provides a mobile first collection of Angular UI components
and directives for rapid development and/or prototyping or progressive web applications.

Our UI components are following some of the key points introduced by Angular such as:

  • Mobile development - desktop development is much easier when mobile performance issues are handled first
  • Modularity - most of the components are exported as standalone modules so you get to pick exactly what you need in your application
  • Modern browsers only - by reducing the need for browser compatibility workarounds, we keep the code tight and readable

Being build on top of the Angular framework our UI components are cross-platform,
mobile friendly and closely follow the Material Design specification assuring
a great user experience. The components are as lightweight and minimal as possible without sacrificing core features and usability. The main idea behind the toolkit is to serve as a foundation for your applications and your own components, hence the name 'blocks'.

For example here is how you can define a custom 'form'-like component for editing
an employee username:

and the end result:

Of course, all of Ignite UI JS Blocks is open-sourced under the MIT license so you are more than welcome to visit the the Github repository and contribute by providing suggestions, ideas and bug reports. Also this is the place to find the latest
documentation and a full listing of all components and directives included in the package.

The second part of this blog is about Ignite UI Angular 2 Components. Angular 2 Components are open source and are wrapping the Ignite UI widgets to provide complete Ignite UI experience inside the Angular2 world.

Angular 2 is Cross Platform and can be used on different devices or operating systems. All this can be easily integrated with Ignite UI Components being also cross platform,responsive and touch - first.  This is great and very useful, but this is not their most important advantage. If there is a need of big data, quick interactions with the components and a requirement for performance, Ignite UI Angular 2 Components are the right toolset. It can be included as part of any Angular 2 application and this will expose their capabilities. Here you can find samples, demonstrating Ignite UI Angular2 Components.

Angular 2 is considered easier to learn and more intuitive than AngularJS. They are quite different and shouldn't be compared, but creating a component in Angular 2 really seems easier. And including Ignite UI Angular 2 Component to Angular 2 application is even easier.

Here’s an example of using an igGrid inside Angular 2 app, Include IgGridComponent as a declaration of NgModule, then apply initialize in the template with its corresponding options and add the references to IgniteUI into your index.html.

Also note that every Ignite UI Angular 2 component is extended from the Angular 2 @Component so they are actually components and can be used and integrated natively and easily in every Angular 2 application as easy as any Angular 2 @Component.

Another important aspect for developing Angular 2 application is the productivity. That’s why Ignite UI Angular 2 Components have included Ignite UI TypeScript definitions into its package so that the developer can take advantage of the intelligent code completion and instant errors, which allows easier configuration of the Components. Please refer to the following screenshot.

If gridOptions are specified as being the interface of the grid configuration this automatically grants access to the goodies provided from the IDEs - for example, possible list of options, their types and a brief description how to use specific option.

Ignite UI Angular 2 Components are the solution which provides access to the complete Ignite UI toolkit inside of a context in Angular 2 app. In addition to everything provided from Ignite UI widgets, there is included a set of extra Angular 2 related features like:

  • Full Angular 2 initialization of the Ignite UI Angular 2 Component
  • Handling events in Angular 2 world
  • Two way data binding for the data bound components

But the most important argument behind this is a combination of requirements like:

  • Angular 2 enterprise application
  • Big data
  • High performance capabilities
  • Quick interactions
  • Modern Grids, Charts, Editors, etc.

Viewing all 2363 articles
Browse latest View live


Latest Images