Quantcast
Channel: Blogs
Viewing all 737 articles
Browse latest View live

RowDetails Support in the UI for UWP R3 2017 Release

$
0
0

Our latest official release features RowDetails support for RadDataGrid, major bug fixes and more.

In our official R2 SP1 release, we introduced some performance improvements for our Chart and ListView controls. With the R3 release we focused on another major control in the UI for UWP suite – the DataGrid control. 

Let me provide you with some more information about the new RowDetails feature we introduced for the DataGrid control and the Toolbox improvements we have made for our open-source repository NuGet package. 

RadDataGrid RowDetails

We are extending the DataGrid functionalities with the RowDetails feature, which will allow the application’s users to view the record-related data inline, without the need to switch context. Being able to show details for the DataGrid row is extremely useful, and with our latest improvements it's both easy and highly customizable.
DataGrid-RowDetails

Nuget Toolbox Support

With Visual Studio 2017 Toolbox support has been added for the NuGet packages to easily view and categorize the controls. We have taken advantage of this feature and updated our NuGet package to support it. As soon as the NuGet package is referenced, the controls it contains will appear in the Toolbox for you to use in your application. These controls can be used just like any other Toolbox control, with drag and drop support on the design surface.

NuGet_Toolbox

Chart Improvements

There are a bunch of improvements coming to the Chart control, starting with utilizing the composition API that the framework offers to boost the rendering performance of the Chart control.

Old Rendering Performance

oldchart

New Rendering Perfromance

newchart

Share Your Feedback

Take a look at the open source UI for UWP project when you have a chance. There you can share your feedback or add your own contributions. We highly appreciate any contributions that are helpful for improving the controls.

For a full list of what is new and what is improved in the Telerik products, make sure to subscribe for the R3 2017 release webinar


Have it Your Way with the R3 2017 Kendo UI Release

$
0
0

The R3 2017 release of Kendo UI is with huge updates—like support for React and Vue.js—plus new components and features across the board.

Do you feel it? That special kind of feeling that only comes around three times a year. That's right, it's time for a new release! Today I am thrilled to announce the R3 2017 release of Kendo UI! We have an enormous set of enhancements for Kendo UI coming at you, including support for two of the most popular JavaScript frameworks out there: React and Vue.js. On top of that existing flavors of Kendo UI have had new components and features added to them—so no matter what frameworks you're developing with there will be something new for you to add to your apps.

Continue to read the highlights below and see how the Kendo UI components will unleash the JavaScript warrior within you!

There's a lot of content in this blog post so here's a table of contents for you to navigate through everything a little easier.

Table of Contents

  1. React and Vue.js support comes to Kendo UI
  2. Kendo UI for Angular gets even better
  3. ASP.NET Core 2.0 Support Added
  4. More enhancements to the jQuery edition
  5. New and improved support packages
  6. A brand new bundle: DevCraft UI
  7. Want to see more?
  8. Is something missing?

React and Vue.js support comes to Kendo UI

You've asked for it, and here it is! As of R3 2017 Kendo UI adds support for both React and Vue.js, adding to the impressive list of JavaScript frameworks that we support.

This means that as a Kendo UI developer you can now write applications using:

This initial release of React and Vue support are an official set of wrappers around Kendo UI that gives immediate support for the large set of Kendo UI components that already exists. The Grid, Scheduler, and many of your favorite widgets are all available with this release. Of course, this also means that you can submit support tickets on any issue you run in to with these widgets. There are some widgets that are still being worked on, but these will be rolled out as they are ready within the next couple of months.

These components are taken to the next level with support common framework integrations with React and Vue (like Redux) so they offer several improvements on top of the Kendo UI framework to ensure that developers can continue to utilize all of their favorite utilities and toolkits. We will cover this more in our sample resources but the initial feedback that we've had on the React side when showcasing this architecture of the components has been very positive!

As for native components for each of these libraries, you should stay tuned for updates to the Kendo UI roadmap. There are too many goodies in this release to cover the specifics right here.

Rather than go through each component and specific implementation details here I encourage everyone to view our getting started materials and documentation for each of these frameworks. To get access to the demos you can simply click on your favorite component and find either "React" or "Vue" in the left-hand side menu.

React

Vue

With the R3 2017 release of Kendo UI you can truly have it your way with your JavaScript development. Stay with a framework, jump from framework-to-framework, or just experiment with what else is out there! No matter the choice of framework Kendo UI has got your back.

Kendo UI for Angular Gets Even Better

Continuing to add more and more functionality to Kendo UI for Angular, our native set of Angular UI components, we have added more functionality to our already powerful Grid and ever-expanding list of form elements. Additionally, we've brought initial support for the Material theme, and we've brought our PDF rendering library to Angular.

Material theme support

Angular Material is a very popular set of components and guidelines around the design of your application offered by the official Angular team. Since Kendo UI for Angular is a native set of components it makes a lot of sense for us to offer support for the most popular design methodology that goes hand-in-hand with the Angular framework.

This release brings our first set of components that can be styled with the Material theme. This is currently a subset of the Kendo UI for Angular components but we're going to steadily be adding supported components with this theme.

This is a very deep integration with a theme by the way - no shortcuts are being taken. We've even gone as far as providing custom directives for common features of Material, like the Material ink ripple effect.

Material support

Figure 1: Material theme on some Kendo UI for Angular Components

Ripple effect

Figure 2: Material ink ripple effect at work

Always be on time with the TimePicker component

R3 2017 brings out the new TimePicker component. As the name kind of gives away, this new widget is designed to give users an intuitive way to select a time slot within a dropdown. Our design team knocked this user experience out of the park if you ask me!

Time picker

Figure 3: New TimePicker component

Grid updates

The Grid has a whole slew of new features added to it with R3 2017.

One of the most requested features was selection and we brought that with plenty of gusto! Not only do we offer traditional selection through single and multiple options, but we added support for checkbox only selection for scenarios where you only want checkbox interaction to select or deselect a row.

Grid selection

Figure 4: Grid row selection

We also added in-cell editing with this release. Not everyone wants to put entire rows in edit mode, or work with a bulky external form, just to update single cells here and there. So, now you can offer editing on a cell-by-cell level and your users can now become data-editing wizards!

Grid editing

Figure 5: The in-cell editing mode of the Grid

For the folks using the Grid with large data sets (which seems to be all of you!) we also introduced the ability to use grouping together with virtualization. These two features have traditionally not been able to be combined, but thanks to some magic from the Kendo UI engineering team you can now have grouping enabled in even the most data-intensive scenarios.

New chart type

You can never get enough charts! Based on feedback from you we continue to implement more and more chart types. This release introduces the RangeArea Chart type to the already extensive list of chart types that we offer in Angular.

What is a RangeArea chart? Well, you're probably familiar with an Area chart that fills in itself from the value to the applicable axis. The Range Area takes this approach but allows you to determine a minimum and maximum value that gets filled in. This is extremely useful in cases where you want to graphically showcase mins and maxes for a particular point.

Range area charts

Figure 6: The new RangeArea chart type

PDF exportation comes to Angular

One of our more popular features in the jQuery edition Kendo UI is the ability to export components, and generic HTML, to a PDF file. Adding to growing list of helper libraries in Angular, in this release we've now brought PDF exportation to Kendo UI for Angular with the PDF Export library.

This works both by itself on generic HTML and is also integrated in to our other components like the Grid.

ASP.NET Core 2.0 Support Added

I'm probably not the first to tell you this, but ASP.NET Core 2.0 was released a month ago. As a part of our commitment to the ASP.NET developer landscape we have worked to ensure that our ASP.NET Core UI components (based on Kendo UI) now support ASP.NET Core 2.0!

Of course, the JavaScript flavors of Kendo UI will have no problem working with ASP.NET Core 2.0.

More Enhancements to the jQuery Edition

The jQuery flavor of Kendo UI has of course received a ton of updates as well. While this release includes a lot of hype for React, Vue.js, and Angular, we wanted to deliver a solid set of features for our jQuery widgets.

Grid improvements

Virtual Scrolling is a pretty common implementation scenario for the Kendo UI Grid. You have tons of data but you don't necessarily want your users to use the pager that comes out-of-the-box with the Grid. Virtualization has traditionally not been able to be used together with some other features, but as a part of R3 2017 we've tried to take care of that for you.

With this release you can now work with full CRUD operations while using virtualization which has been a large sticking point for some of you.

Virtualization sometimes can't be combined with other features, specifically grouping and hierarchy. However, to mitigate this and allow you as developers to combine all of these features we have now introduced a new scrolling method: Infinite Scrolling. Much like virtualization, this allows you to serve tons of data without a pager, plus you can use CRUD operations, grouping, and hierarchy functionalities all within one Grid.

Infinite scrolling

Figure 7: Infinite scrolling mode in action

We have also improved the user experience for multi-column sorting, providing a simple interface to showcase exactly in what order the columns have been sorted in.

Multi-column sorting

Figure 8: The new multi-column sorting improvements

Scheduler and Calendar improvements

The Timeline view is an extremely popular view of the Kendo UI Scheduler. However, it has been a bit limited in how it shows multi-day events. As a part of this release we have now improved how these kind of events are displayed in the Scheduler.

Timeline view multiday

Figure 9: The "Product Planning" event started is an event that started the day before

The Calendar also received an update with handling multiple day selection. Previously this was unsupported, but today we're bringing this support with all the accoutrements (programmatic selection etc.) that you have been asking for.

Calendar multi-day

Figure 10: Multiple days have been selected (shift + click). Note that Wednesdays are disabled days and the 6th is not selected!

Bootstrap v4 support

Bootstrap continues to evolve and just a few weeks ago the library went from Alpha to Beta. Kendo UI has been an early adopter of Bootstrap v4 with our Sass-based Bootstrap theme. As a part of our adoption of this framework we now support the latest version (v4.0.0-beta as of this blog post) of this extremely useful and popular toolkit.

Accessiblity updates

Accessibility in web applications is an extremely important part of how we develop for the web today, yet it's also a neglected part of the process. Kendo UI has always been on the forefront of accessibility across our components and we constantly strive to improve the accessibility within our widgets. This allows you as a developer to focus on what makes your application tick while Kendo UI helps take care of accessibility for you.

As a part of this release we did a lot of behind the scenes work on improving accessibility, including:

  • Adding true navigation to the TreeList component
  • Improved keyboard navigation in the Grid
  • WAI-ARIA and WCAG 2.0 improvements done across the board for many of the available components

Kinvey integration

Kinvey is a Backend-as-a-Service (BaaS) that is a part of the Progress family. It's designed to help get your backend up and running faster while having important features like HIPAA compliance at your disposal. If you haven't heard of Kinvey I recommend that you check out this page for more information.

As a part of this release we now have resources around integrating data-bound widgets to a Kinvey backend. For more information you can refer to this documentation article that takes you through this process step-by-step.

New and Improved Support Packages

Up until now Kendo UI has always come with one form of support that gave you access to our legendary support through our ticketing system: Priority support. Throughout the years we've received feedback on our support packages and have decided to provide more options to our users.

As of the R3 2017 release most of our individual products can be purchased with three options for technical support - Lite, Priority, and Ultimate. This gives you as a developer the ability to choose the appropriate level of support for you and your team. Don't need as much help? Maybe "Lite" is the way to go. Want some more help through phone assistance? "Ultimate" is there to help you out.

To compare all of the support packages check out this page.

A Brand New Bundle: DevCraft UI

Based on your feedback we have simplified our offering by introducing a new bundle that includes all of our UI components. This means that UI for Xamarin, which previously was only available in DevCraft Ultimate, is now available in a lower-priced bundle! This new bundle, DevCraft UI, includes everything that a .NET developer may need (including Kendo UI!) and should be a very interesting bundle for many of you. For more information you can check out this overview page.

Want to See More?

If you want to see all of these highlights in action then I recommend signing up for our upcoming webinar on September 28th, at 11 AM ET. The Kendo UI Dev Rel team will be taking everyone through the new and improved Kendo UI bits so don't miss out on that action! Seats are limited so be sure to sign up!

Is Something Missing?

Did one of your favorite components not get an update, or did a new widget not get added? Feel free to provide any and all feedback in the comments below. Additionally, you can feel free to submit feedback in our UserVoice portals for consideration in future releases.

Introducing New Support Options & Product Bundles

$
0
0

Whether you use Kendo UI, a DevCraft bundle or other Telerik products, and no matter the support you need, we have great new options for you.

Some months ago, we set out on a journey to review our bundles and the way in which our products are offered. Through this process, we have spoken with and read feedback from so many of our customers. The applications you are building with our products spread the gamut from custom and niche to mission-critical enterprise; from line-of-business to consumer facing. Our developer community is helping to make the world better through technology and innovation – and we are inspired.

Through these conversations, we developed a rich understanding of the frameworks you are using today, and the technologies you may use in the future. Beyond products and technology, we discussed what you expect from our technical support – and of course we discussed the overall value you place on out products and service.

Thank you for the overwhelming response we received to our reach-out – the changes described below are a direct result of the process so many of you were involved in.

Changes to Technical Support

Most of our individual products can now be configured with one of three options for technical support – this gives you the ability to choose the appropriate level of support for you and your team. If you ever need a higher level of support, your subscription can always be upgraded.

  • Lite - 72-hour response time (10 ticket limit) – This option allows you to purchase our products at an incredible value and provides just enough support for small projects that are not on tight timelines.
  • Priority - 24-hour response time (unlimited tickets) – Perfect for professional developers with typical deadlines.
  • Ultimate – Ideal for professional developers with tight deadlines. Phone support can provide immediate or same-day solutions to commonly encountered issues, remote web assistance can be used to observe issues in your own environment, and issue escalation allows the most critical issues to be escalated directly to product developers.

For more information and a complete side-by-side comparison of the support plans, click here.

DevCraft Bundles

Our DevCraft bundles offer .NET developers the most cost effective way to futureproof their toolbox, and streamline beautiful UI across a variety of technologies and frameworks. Effective today, we are introducing a new ‘DevCraft UI’ bundle that includes all the Telerik UI products that a .NET developer could ever need at an incredible price of $1299. DevCraft UI joins DevCraft Complete and DevCraft Ultimate, which have also been updated. To learn more about our new line-up of DevCraft bundles, click here.

Changes to Kendo UI

We believe that the biggest changes for our Kendo UI product is the introduction of React and Vue support. React and Vue support join existing support for jQuery and Angular, creating the industry’s most complete UI toolbox for JavaScript developers. You may also notice that we have simplified the product names into a single offer called Kendo UI that comes complete with jQuery, AngularJS, Angular, React, and Vue support. Additional server-side wrappers for ASP.NET MVC, ASP.NET Core, PHP, and JSP can be added as needed, and like our other UI products, Kendo UI can be configured with Lite, Priority, or Ultimate support. To learn more about pricing and what is included in Kendo UI, click here.

I own a license of Telerik, DevCraft, or Kendo UI – what does this mean for me?

While full details can be found here , we are pleased to inform you that you will have access to all the great products and support you initially purchased – and in some cases even more. Additionally, you will maintain the same level of support and the same renewal prices.

Thanks again to our amazing community of developers – we love you and hope you love the new R3 bits and bundles.

.NET Ninja Tooling Arrives—Shipping the Telerik R3 Release

$
0
0

It's here—the Telerik R3 2017 release has landed, packed with new features and updates for your favorite UI tools and components. Read on to see what's new.

We are closing off our last release of the year with a big bang. To make you more productive, we are shipping 10 new controls across all UI frameworks. We've enhanced Document Processing Library with advanced PDF manipulation options, introducing new themes and various analytics integration capabilities. In addition, we've expanded our existing components with more features and customization options. Most of all, we are further enhancing product support to allow for your specific needs.

You are probably interested in seeing all the features we are shipping for each individual platform. Dig into the specific team blogs and product pages to learn more:

  • Full support of ASP.NET Core 2.0
  • Theming support in Xamarin, in addition to a brand-new Grid CTP component
  • New RadVirtualGrid from for WPF
  • New Spreadsheet component from our WinForms
  • RowDetails support in RadDataGrid on UWP
  • Reporting gets boosted performance & accessibility (WCAG 2.0 support)
  • And our brethren Kendo UI gets support for React and Vue

If all you want is the hardcore product facts, you can stop reading right here. But there is more!

We are investing heavily across the board and we believe it shows—just glance at our what’s new page or download the latest bits. We are also “shipping” a new look for the .NET Ninja mascot! A substantial product release like R3 2017 and the ongoing investment had to be paired with a new look. The new .NET Ninja exemplifies the ongoing commitment we have for all our fellow .NET developers. The .NET Ninja is also in better shape than ever and ready for action. This is what you can expect from us: the modern UI, fast releases, awesome support, productivity and ease of use you’re already used to—just better. Hold me accountable to it!

En route to making you a better .NET Ninja, we are also making all the UI tooling available to you via a single UI bundle, called DevCraft UI for just $1299.  It now includes our UI for Xamarin controls, which was previously available only in DevCraft Ultimate. Now you have all the tools at your disposal when developing striking apps for Web, Desktop or Mobile. Moreover, you now have multiple technical support options (Lite, Priority, and Ultimate) to suit your specific needs.

And what would a product release be without a flashy webinar—right? Here are two webinars to check out:

  • Telerik: October 11th. Register here.
  • Kendo UI: September 28th. Register here.
  • Don’t have time to attend—why not take the tools for a spin now then at the link below?
Start a Free Trial Now

What's New in Telerik Reporting and Telerik Report Server R3 2017

$
0
0

New Financial Charts, web viewer accessibility, better performance for Excel rendering, memory optimizations for PDF rendering and bug fixes make the new R3 2017 release irresistible.

The R3 release of Telerik Reporting is now live and we are ready to brag about all of the goodness we have to share with you.

Web Report Preview Accessibility

All of the HTML5-based report viewers (jQuery, MVC, Angular 2+ and Web Forms Report Viewer), now support major accessibility features like comprehensive keyboard navigation in both the viewer and its content, and dynamically extended markup that provides support for most of the popular screen readers.

Our goal is to provide a reporting solution that is accessible to a wider audience, including users with motor control restrictions who may need to work with assistive technologies. We follow the recommended practices in Section 508 of the Rehabilitation Act and the Web Content Accessibility Guidelines (WCAG) 2.0 Level AA to the greatest extent possible.

OHLC Chart

The OHLC chart displays a series of candlestick or bar markers that represent information about price movement. The marker can be colored depending on the movement of the price for this period—if the close level is lower than the open level, it's recognized as a bearish pattern and the color or the fill or the marker changes so it can be distinguished from the bullish pattern, where the close level is higher than the open level.

More Performance Improvements

In this release we have significantly improved Excel rendering by introducing a better algorithm for the Excel grid generation. This improvement can decrease the rendering time multiple times over, depending on the report. The bigger the report is, the bigger the improvement.

In the case of the popular PDF format, we have focused mainly on memory optimizations. The report engine now handles PDF pages continuously, enabling us to release .NET objects that keep page structure immediately after the page is rendered. This optimization reduces the memory allocation when rendering big PDF reports.

Crosstab is an essential report item and in this release, we have improved the crosstab generation algorithm. Now even big crosstabs will be prepared in a reasonable amount of time.

Data Schema from the Report Server

The Standalone Report Designer doesn't need direct connection to the SQL data source. Instead the designer requests the database schema, data models and preview data from the Report Server. This way the report author doesn't have to install ADO.NET data providers, or to request DB permissions. The connection string is kept on the server and will not be exposed to report authors without data source creation rights.

Eliminated Bugs

For the full list of all the bug fixes, check the release notes for Telerik Reporting and Telerik Report Server.

Try it Out and Share Feedback

We want to know what you think—you can download a free trial today and share your thoughts in our Feedback Portal, or right in the comments below.

Top Tips for Getting the Most out of Kendo UI Grid for Angular

$
0
0

We've collected a list of our favorite tips for you, showing how to use some of the best built-in features of the Kendo UI grid in Angular.

Grids have a long history in web development, and this isn't the first time we've shared or top tips with you to help make your lives easier. Today however, we want to focus specifically on the Kendo UI Grid for Angular and give you some tips on how you can use it optimally in your apps.

Use Data-Binding Directives 

The Grid makes very limited assumptions on how you retrieve and process data. But flexibility inevitably brings complexity. The state of the Grid must be tracked externally for the Paging, Sorting and Grouping features to work. 

All of this boilerplate code can be eliminated by encapsulating the state tracking into a reusable component. This is exactly what the [kendoGridBinding] directive does. The default implementation serves the data from memory, but it can also be extended to query a remote service. See Custom Remote Directives for an example on how to implement such a directive. 

Another built-in directive is the specialized [kendoGridGroupBinding] directive. It adds support for Virtual Scrolling of grouped data. This particular combination requires maintaining a very complex state and demands that all the data is available in memory. 

Use Editing Directives 

Configuring Editing is usually quite involved due to the sheer number of possible configurations.

The built-in Editing directives take care of the boilerplate code in most common scenarios, leaving you more time to work on your business problems. 

Expand Content to Span Multiple Columns 

You can use Spanned Columns to combine multiple cells, similar to how a colspan works on a regular table. A little extra space can go a long way in making tables less boring. 

Hide Non-Essential Columns on Small Screens 

The modern device landscape means that your application needs to adapt to many different screen sizes. The Grid comes with a set of Responsive Features to help you deliver the best possible experience to everyone.  Columns can be configured to be visible only at certain display sizes by using a common CSS Media Query syntax. For example, <kendo-grid-column media="(min-width: 680px)"> will only display a column on devices with large screens. 

Try it Out

Curious to try this out on Kendo UI for yourself? You can get started with a free trial today.

Try Kendo UI

Build Once Deploy Everywhere with Progress Telerik Reporting

$
0
0

Reporting solutions can supply powerful functionality for your reports. Here's a tip on how to use one to create a report once and present it anywhere.

In this blog post, I'd like to talk about one of the key benefits of using a reporting solution for reports. This is the flexibility of authoring reports just once, and then presenting them in a variety of application frameworks and document formats.

In the core of our report engine is the declarative definition paradigm. Most programming languages define what something is and how to do something. The report definition describes what the output will look like and where the source data is coming from. This leaves the application free to decide how to generate the defined look and feel, regardless of the programming language or underlying architecture. The benefit is easy coding free option to create impressive reports with a data-driven report layout.

In order for the declarative model to work, a mature designer is needed. We do have not one, but two options:

  • Standalone Report Designer for a code free report authoring experience, so even professionals with basic data operations knowledge can design reports.
  • Visual Studio integrated Report Designer for all .NET ninjas.

Once the report definitions are ready, the reporting engine combines it with the provided data and cuts the generated items into pages, which then outputs it in the target document format. This can be any of the popular document formats: PDF, HTML, Excel, Word, RTF, XPS, PowerPoint, TTF, CSV, EMF and various image formats.

The rendered document is presented in a document viewer or in one of the available dedicated report viewer widgets. Telerik Reporting provides a variety of report viewers for popular application frameworks like HTML5, Angular, MVC, WPF, WinForms, Web Forms and even for good old Silverlight. The benefit of using a native report viewer is to embed reports in the application and take advantage of awesome interactivity features like filtering with parameters, data drill-down, sorting, navigation within the report or to other reports or external URLs. All of this awesomeness comes out of the box and only needs a simple setup while authoring the report definition.

Based on the application technology used, we have different options for hosting the reporting engine. The engine is built with the .NET framework, so in case of the web technologies and non-.NET application frameworks, it's hosted on a service or directly used through the Telerik Report Server. The following options are available:

  • WCF Service for the Silverlight Report Viewer;
  • REST Service for all web and desktop viewers;
  • Telerik Report Server for all web and desktop viewers;
  • The embedded reporting engine in the .NET desktop viewers.

This concludes our short journey into the wonders of reporting solutions. Reporting solutions provide quick ways to make data visualizations from various data sources for previewing, printing, sharing and archiving. They can be a powerful ally when reports are needed.

Telerik Reporting

Telerik Reporting is an embedded reporting solution that can be easily embedded in your application. For more information see http://www.telerik.com/reporting.

Telerik Report Server

Managing a vast collection of reports may be challenging and therefore we have introduced the Telerik Report Server solution to efficiently store, create and analyse reports in a single server-side repository. Telerik Report Server leverages the feature-rich Telerik Reporting engine and supports all must-have report server features like scheduling, data alerts, versioning, report caching, authentication with AD FS support, ready to use report server web portal with enabled white labeling and complete REST API for integration with your desktop and web applications. For more information on the report server solution see: http://www.telerik.com/report-server

Are you ready to dive deep into the world of reporting? Start a free trial of Reporting and Report Server today and don’t forget that the free trial comes with free support.

How to Use ASP.NET Core TagHelpers

$
0
0

ASP.NET Core has gained a helpful new feature in TagHelpers. Stay up to date with the latest info and learn how you can use them in your apps.

Recently Microsoft announced the release of ASP.NET Core 2.0. With this release comes a new feature for building HTML views called TagHelpers. With ASP.NET Core 2.0 TagHelpers allow developers to write component based views for server side rendering by utilizing a syntax similar to HTML. This new syntax incorporates concepts used in HTML, elements and attributes.

When using TagHelpers in a .cshtml view, Visual Studio treats the TagHelper as it would HTML but with added server side functionality. Often with HTML Helpers the CSS class attribute was difficult to add, and completely lacked Intellisense. With TagHelpers, developers get rich Intellisense for not only server side code but also with any HTML attributes supported by Visual Studio.

In addition to better Intellisense, TagHelpers also make great container elements. TagHelpers treat their inner HTML content as normal HTML elements do. In comparison to HTML Helpers, nested content required escape codes, or specialized using blocks to contain inner HTML content.

Throughout .NET’s journey from conceptualizing ASP.NET Core TagHelpers to our recent release, Progress has continued to support the community by sharing information about TagHelpers. Below are resources that will help keep you up to speed on the latest developments with ASP.NET Core TagHelpers.

Building Reuseable Components in ASP.NET Core

Telerik UI for ASP.NET Core supports a variety of TagHelpers with more on their way. Try our TagHelpers with a thirty-day free trial of UI for ASP.NET Core.


Test Studio and the Meaning of “Do You Even Test”

$
0
0

Ever wonder about the meaning behind Test Studio's slogan? Learn about why you need to test and offer up your own testing stories.

Most people see the slogan “Do You Even Test” and it immediately prompts a reaction. Whether you are a developer or tester you may have heard this saying before, and usually it is not a good thing.

Back about a decade ago when I was a Product Manager at a different software company I received an email that made me cringe, by the subject line alone, and worse yet it was from a big customer. Even worse than that, it had the CEO CC’d on the email too. 

From: BigCustomerCo

Subject: Do You Even Test?

 

This was one of those high priority emails that you dread opening, but you know you must, and hopefully before the CEO comes looking for you. Gulp!

There is so much money, energy, and time spent across the company leading up to a major software release. Both internal and external marketing campaigns are rolling out in full force to build up the hype and excitement for new features. 500 fresh new t-shirts arrive with the latest branding for the product. The sales teams have been trained up on all the new cool features they are going to make a living on. The development team is finishing up the final pieces to the most important release of the product’s history, and everyone is ready for the party that is planned for the big release day announcement.  Looking back at these moments I just think how naïve we were.

The big day arrives. A press release goes out, and the C-levels make their speeches. The cake gets cut and served as everyone cheers, and the celebration begins for a long-awaited new version of the software. The best version yet, right? The customers and prospects are buying it up left and right! 

Then, before the afterglow of the party has faded a high priority email hits your inbox, and the wheels come off. That new version that everyone is so proud of just crashed when the customer started to use it.  They can’t even try the new features because something is broken and preventing them from even using it. This story does not end well. In fact, the weight and embarrassment of the failure in this example caused the company to jettison this application, and sadly 100 employees too. All of this could have been avoided if the team had been testing. Of course, they had their unit testing routines down to a science, and of course the developers were top notch, but they failed to have a regression testing plan for the full product.

Please don’t let this happen to you. Make sure that you do have a testing plan for Regression Testing, for Functional UI Testing, and for Performance and Load testing too. I have heard many similar versions of this from many clients over the years. There is something that you can do to protect from this; and it costs about as much as the new order of 500 t-shirts to start automating with Test Studio. 

DYETStarwest2017

Share Your Own Testing Stories

Please feel free to share your “Do You Even Test” stories in the comments, and start a Test Studio trial today.

Visit Us at the StarWest Expo

Also, please come visit us at BOOTH 27 at the StarWest Expo next week, and grab a t-shirt while they last!!

Progress @ DEVintersection: Sessions, Product Showcases and Lots of Fun

$
0
0

DEVintersection is coming up! This October 31 – November 2, 2017 at the MGM Grand in Las Vegas, we invite you to join us at Booth 111. Hope to see you there!

Looking forward to DEVintersection 2017? So are we! There are bound to be some amazing announcements. We will be there too (booth #111), so make sure to stop by, meet the team and discuss the latest trends in tech, including our Telerik UI for Xamarin, Telerik UI for UWP, Kendo UI and Telerik Reporting. We have some cool SWAG too.

DEVintersection starts in just a few days and the excitement around the event is growing by the minute. As usual, there are high expectations for the conference with various sessions and talks by some of the biggest names in the industry.

Progress @ DEVintersection: Booth and Sessions

We wouldn’t miss the conference for the world and as usual the cool guys from the Product and Developer Relations teams will be present there. Head over and meet us at Booth 111, where we will have some great product demos, theater sessions and prize giveaways. We'll also be giving out our epic Telerik and Kendo UI T-shirts and a big prize: MICROSOFT XBOX ONE X.

devintersection tshirt

Sessions at Booth 111

Let me reveal a little secret about our product sessions at the booth: We're coming with the very people who personally developed the great advancements in our Telerik and Kendo UI products.

Telerik UI for Xamarin: We are excited to show you our Xamarin UI suite. It is all about beautiful, polished and elegant UI widgets for building cross-platform Xamarin applications. Telerik UI for Xamarin comes complete with predefined item templates for Visual Studio. They are included by default when you install the products. You can directly include them in your Xamarin.Forms project and use them as footprints for similar scenarios in your application.

Kendo UI: We are proud to present the most complete UI library for data-rich web applications with support for your favorite JavaScript technologies – jQuery, Angular, React and Vue. We are pleased to announce new support for React and Vue with our Kendo UI wrappers for these frameworks. You get the same great Kendo UI component features that you have come to rely on, now provided via a wrapper interface for the React and Vue frameworks. 

Telerik UI for UWP– Open Sourced! We are thrilled to provide you with UI for Universal Windows Platform - a complete UI suite for building amazing Windows 10 applications with a single code base. Completely Open Sourced!

Telerik Reporting:We are excited to present you our complete and mature reporting solution. You'll see how to build, style, view and export elegant reports seamlessly and very quickly.

Sessions and Workshops

Meet our visionaries and trend-setters @ DEVintersection:

We'll be There @ DEVintersection!

Looking for us at the conference? Just hunt down our Ninja and Kendoka and our smiling faces will greet you.

.NET DevChat: Responsive Web Apps with ASP.NET MVC and Bootstrap 4

$
0
0

In this .NET DevChat recap, we talk about building responsive web applications with UI for ASP.NET MVC and Bootstrap 4. Dive into the source code and Q&A below.

Bootstrap 4 is great, and it’s even greater when used in conjunction with Telerik UI for ASP.NET MVC.

In this .NET DevChat, we covered the basics of Bootstrap, its NavBar component, the Grid layout system as well as the new and shiny Bootstrap 4 Cards!

We dived right in and added all of these to an ASP.NET MVC application that uses Razor-based Layouts and Views.

We also covered how Telerik’s UI for ASP.NET MVC comes with an out-of-the-box Bootstrap 4-inspired theme so that all the widgets will look as any other Bootstrap styled UI element. In particular, we worked with the Telerik MVC Button, Grid, and Chart.

As promised, here’s the source code for the sample application that we developed during the live webinar.

As usual, we were thrilled to have received great feedback from you in the form of interesting questions!

Questions and Answers

What is the current status on Bootstrap 4?

As of the writing of this post, Bootstrap 4 is on its first Beta release. It had been in alpha for a few months now, but back in August Bootstrap 4 beta came out.

Can I modify the Kendo UI themes to match my company’s branding?

Yes, you can. You can use our Sass ThemeBuilder tool to generate a new theme. You can use the Bootstrap 4 theme as a base and modify from it.

If you are comfortable with Sass you can also modify scss variables to compile a new Kendo theme to use within your MVC application.

What is this Deferred functionality that was used in the demo?

This is a personal preference, and it’s not a requirement.

The reason to use the Kendo MVC Deferred initialization functionality is so that the JavaScript code to initialize the widgets can all go in the same place. Normally, you would put this at the bottom of the page.

Will this work with Telerik UI for ASP.NET Core?

Yes! Since Bootstrap 4 is just CSS, it can be used no matter the server side technology.

In the case of Telerik UI for ASP.NET Core (which supports ASP.NET Core 1 and 2), Razor is also used to generate the MVC widgets, and the actual markup rendered on to the final html page will be the same.

Hence, with the same Razor code all the UI concepts (including Deferred initialization) covered in this webinar will apply on an ASP.NET Core application

Is this type of UI also possible with Angular 4?

Certainly! We also have a webinar where we cover how to write Responsive Angular 4 Dashboards with Kendo UI for Angular.

Kendo UI R3 2017 Release Webinar Recap

$
0
0

We recap all the news from the latest Kendo UI release and answer the questions we couldn't get to live about Angular, React and more. Missed the webinar? You can watch the replay below.

Last week, we hosted the Kendo UI R3 2017 release webinar, which highlighted the latest features and improvements we’ve added to Kendo UI for jQuery and Kendo UI for Angular. It also introduced Kendo UI Support for React and Kendo UI Support for Vue. This blog post summarizes the event and provides answers to the questions that were asked by attendees.

Webinar Recording

If you were unable to join us for the live webinar, don’t worry: we’ve posted the recording to the Kendo UI channel on YouTube.

Prize Winner

It’s a bit of a traditional for us to give away prizes to attendees who ask the best questions. This time is no different. The winner this time around is Tony Garcia who will receive an Oculus Rift + Touch Virtual Reality System!

Questions and Answers

What’s the oldest version of AngularJS you support?
You can read the supported versions of AngularJS from our documentation.

Are features like the Material theme and features in the Grid component available for Vue?
Yes since Kendo UI Support for Vue are wrappers of Kendo UI for jQuery.

Where can I find documentation?
That’s easy: docs.telerik.com.

Does endless scrolling in the Grid require a static grid height to be set?
No. The Grid has a default height. It uses that value (or the height you set) to calculate the view for endless scrolling.

Can VueJS be implemented using a custom Kendo UI build?
I’d recommend checking out the Getting Started article we have in the documentation. In particular, there’s a section entitled, Integrate Kendo UI for Vue.js using NPM and Webpack that’s worth checking out.

Is the Material theme supported in React?
Yes. All the themes that ship with Kendo UI for jQuery are available in Kendo UI Support for React.

Are the same Sass-based themes used for both Angular and jQuery?
Yes. We have the theme available in the GitHub repository, kendo-theme-material.

What about Material Design theme for Kendo UI for jQuery?
This theme is currently available for Kendo UI for jQuery and Kendo UI for Angular.

Is there a roadmap of when the theme builder is updated with the R3 release changes?
The Progress Sass Theme Builder is currently up-to-date with everything we covered in the webinar.

When is the ngModel update of a TimePicker? onBlur or onChange?
It’s for the event, valueChange. We have a demo of this capability available here.

How about the Grid making it responsive to different media sizes? Is it covered on this new release?
I’d recommend checking out the documentation we have that covers the responsive design support in the Grid.

You referred to the new ReactJS support as “wrappers”. So, does this still require jQuery? If so, are there any plans for KendoUI for React that is “native” to React and doesn’t require jQuery? (i.e. KendoUI for Angular)?
Yes, Kendo UI Support for React are wrappers of Kendo UI for jQuery. Therefore, jQuery remains a dependency. We have plans to introduce native support for React in the R1 2018 release timeline. You can read about this in the Kendo UI roadmap.

Can you resize the columns of the Grid component?When will column resizing be part of Angular Grid component?Do you have grid column resizing and moving feature in this release?
The column resizing got delayed a bit, sorry! We need few weeks to complete it and will publish an incremental update.

I’ve been working with the Kendo UI for Angular and would like to know how to modify the themes for the UI. Is there any documentation that explains the functionality of the themes?
Here’s the link for themes and styling with kendo for angular: http://www.telerik.com/kendo-angular-ui/components/styling/

When will a tree component be available in Kendo UI for Angular?
I’d recommend checking out the [Kendo UI for Angular roadmap] for more information about timelines for components like the TreeView. It’s a short-term goal of ours to deliver this component.

Is there any plans to make a Vanilla JS of version Kendo UI for jQuery so that jQuery wouldn’t be required to use?
We have no such plans at this time.

Need a DataGrid for Your UWP App?

$
0
0

DataGrids are critical in most business apps. Why reinvent the wheel when you can use the high-performing and open source Telerik UI for UWP DataGrid instead?

Building a Windows 10 app using the Universal Windows Platform? Chances are you’ll need a DataGrid for your application, and what a better choice than the highly-performant and feature rich DataGrid from the Telerik UI for UWP suite, which is also open source and available on GitHub.

As we all know, Grids are the backbone of most line of business applications out there. They are also by far one of the hardest components to create in terms of development time, functionalities, customization, responsiveness and speed.

Developers need to be able to deliver large applications tailored to the needs of the business and following the project requirements on tight deadlines. This means quite often they must choose between building the component internally or using a third-party toolkit, which provides it out of the box.

But you already know all of this, right? So where am I going with this blog?

Well, let me cut to the chase. If you had the pleasure to attend this year’s Microsoft Build Day 2 keynote, either in person or virtually, you were probably thrilled by the announcement about XAML Standard 1.0. Abolade Gbadegesin (Architect for Project Rome) presented on the Microsoft team’s work on improving the Pen capabilities and showcased them with the Telerik UI for UWP DataGrid on stage (57:35). 

So why should you choose the Telerik UI for UWP DataGrid? Well, for starters, if you missed it, as of February 2017 the whole Telerik UI for UWP suite is open sourced. Yes, this includes the DataGrid, meaning you are more than welcome to use it in your Windows 10 application. You can get the whole product package from GitHub and start using it right away. However, there is more to a component than its free availability.

Telerik UI for UWP DataGrid—Benefits and Functionalities

Telerik UI for UWP Grid Overview

The Telerik UI for UWP DataGrid is an extremely powerful component in terms of both speed and functionality. It has been built from the ground up to deliver maximum performance and a native look and feel to your Windows 10 app. It provides advanced UI virtualization for high performance making the grid fast, fluid and responsive and capable of processing huge amounts of data blazing fast.

In addition, the DataGrid offers the ability to customize columns, through templates for the different cell types, as well to manually or automatically adjust their width depending on the content they include. This comes quite handy when one of your columns includes cells with visualizations or long strings of data. On the other hand, for columns consisting of icons, up-down arrows signifying increase/decrease, or other smaller objects, they can be scaled down to a smaller size providing better visualization of all the data in a certain row.

Another key feature that our DataGrid offers is the ability to sort single and/or multiple columns in either ascending or descending values, resulting in users being able to sort data with a single tap on the column header. These not only includes alphabetical sorting, but also numbers, values (True/False) and duration.

Sorting Telerik UI for UWP

A well known and highly used functionality of any grid is the filter. With the filtering feature in the Telerik UI for UWP DataGrid your users will be able to filter ANY type of data, be it string, decimal, Boolean or date and time. There are also various filtering functionalities to further extend the capabilities of the control. For example, you can filter by:

  • is/no equal/great/less than
  • before and after
  • Contains/StartsWith/EndsWith

The rich API behind the control allows you to easily define the advanced filtering criteria through the code and suit it to the project requirements you are working with.

Here are a few other features that the component includes:

  • Cell or Row, Single or Multiple Selection
  • Grid Filtering customization
  • Grouping—users will be able to group data by simply moving a column header to the dedicated grouping panel

Filter Telerik UI for UWP

Verdict

All and all, the Telerik UI for UWP DataGrid is a truly advanced component, which can serve you well in developing Windows 10 applications, while also cutting down your development time substantially.  The extensive documentation will decrease your learning time and will get you running in a jiff. If you are interested in learning more on add a Grid to your current application, check out this blog post on Getting Started with Telerik UI for UWP, where John Bristowe will guide you through creating an application and using the DataGrid and Chart components.

Should you require support during your development, check out our fully supported version Telerik UI for UWP and test it out in a one-month free trial.

Otherwise, get the full project and source code from our GitHub repository and you are welcome to star or fork our project. We love it when people mess with our code and find issues with it (or not ).

Happy coding!

Binding Kendo UI Chart and Editable Kendo UI Grid to the Same Data

$
0
0

In this tutorial, learn how to populate a Kendo UI Chart with data bound to a Kendo UI Grid, and add new capabilities to your apps.

Combining some of the most used widgets from the Kendo UI suite is a common requirement, and the possible integrations and requirements are endless. Maybe it's rendering a Kendo UI Chart within a cell of each row for displaying a collection from the data item; populating external Chart with the data from the selected row in the Grid or from the grouped data, using the aggregates for a specific field; creating multiple series from each data item or from different columns.

As technical support officers, we are often challenged with real-life scenarios for integrating multiple widgets from the Kendo UI suite. There are always some great ideas coming from the developers using the widgets in ways that none of us considered as a use-case (like using the selected/hovered series in the Chart for filtering the Grid). Like everything else in the developers’ world, there is no product that could do everything out-of-the-box, and with every new client there is a new requirement that will require customization. This applies for integrating Chart with Grid as well.

Visualizing Grid Data in Chart

In this blog post I will focus on two different use-cases for visualizing Grid data in the Kendo UI Chart:

  1. Creating series from every data item on the current page
  2. Populating the Chart from grouped data in the Grid, using the group aggregates

It should be mentioned that due to the difference in how both widgets are handling the data, it is highly recommended to create the Chart dynamically, based on the Grid data and the requirement, and to always re-initialize the Chart when needed (by using its setOptions method). This approach gives us the freedom and flexibility to easily manipulate and configure the data.

Now, let's start with the implementation. For both examples, we will be using the following starting point:

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
</head>
<body>
 
  <divid="example">
      <divid="grid"></div>
      <divid="chart"></div>
  </div>
  <script>
    //TODO
  </script>
</body>
</html>

 

Chart Series from Data Items in Editable Grid

Grid and Chart with same data

Imagine that we have the following data structure:

{year: 2017, January: 5, February: 9, …},
{year: 2016, January: 3, February: 15, …}

Such data could be easily visualized in Kendo UI Line Chart, where the series will be created for each year and the months will be used for categories. 

Once we know which field from the data items will be used in the series of the Chart, we can initialize the widgets. We will be using dummy data for the example and the records will contain information for a few months only (for brevity):

<script>
    //We will be using a few months for brevity
    var months = ["January", "February", "March", "April"];
    $("#chart").kendoChart({
      seriesDefaults: {
          type: "line"
      },
      categoryAxis: {
          categories: months, //Each month(column) is added as a category
      }
    });
     
    //Initializing the Grid
    $("#grid").kendoGrid({
      dataSource: {
        data: getDummyData(),
        schema:{
          model:{
            id: "Year",
            fields: {
              "Year" :{ editable: false},
              "January" :{ type: "number"},
              "February" :{ type: "number"},
              "March" :{ type: "number"},
              "April" :{ type: "number"}
            }
          }
        }
      },
      editable: true
    })
     
    function getDummyData(){           
      var data = [
        {Year: 2017, January: 5, February: 9, March: 14, April: 17},
        {Year: 2016, January: 3, February: 15, March: 9, April: 8},
        {Year: 2015, January: 0, February: 1, March: 2, April: 3}
            ];
       
      return data;
    }
</script>

The above will render and populate the Grid with the data, but the Chart will be empty. Since our Grid will be editable, we need to ensure that the Chart will be updated after each change in the dataSource. The perfect event for updating the Chart data in this way is the “change” event of the dataSource:

$("#grid").kendoGrid({
      dataSource: {
        change: function(e){
          //The Chart will be updated on each change of the DataSource
          updateChart(e.sender);
        },

And here is where the magic begins. Within the updateChart function, where we'll update the Chart, we will retrieve each dataItem from the current view of the Grid's dataSource and we will create all series based on the updated data. The series will contain a data collection with the values from each month, and the Chart will use the “categories” from the “categoryAxis” array to match the values accordingly. When we create the new series with the new data, we can modify the options of the Chart and call its setOptions method for re-initializing the widget:

function updateChart(dataSource){
  var dataItems = dataSource.view();
    var chartSeries = [];
    var chartData = [];
     
    dataItems.forEach(function(item){         
      var data = [];
      months.forEach(function(month){
        //Each month's value is added to the data collection
        data.push(item[month]);
      })         
       
      chartSeries.push({
        data: data,
        //we will be using the Year from the dataItem as the name
        name: item.Year
        })
    })
   
    var chart = $("#chart").data("kendoChart");
    var options = chart.options;
    options.series = chartSeries; //setting the series with the new data to the options
    chart.setOptions(options); //re-initializing the Chart
}

Try Out the Code

The entire code of the example can be tested in the following dojo:

Chart Series from Grouped Grid Data

Grid and Chart with the same data

For this example, we will bind the Grid to products collection and will group the data by the product's category. We will configure the average aggregate for the unit price and will have an average for each category as a result. The grouped data and the aggregates will then be used to populate a Pie Chart.

Due to the custom editor for the Category field and the aggregates, the configuration of the Grid will be fairly complex:

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
 
     
 
</head>
<body>
        <scriptsrc="../content/shared/js/products.js"></script>
        <divid="example">
            <divid="grid"></div>
            <divid="chart"></div>
 
            <script>
 
                $(document).ready(function () {
                    var dataSource = new kendo.data.DataSource({
                       pageSize: 20,
                       data: products,
                       autoSync: true,
                      group: [
                        {field: "Category.CategoryName", aggregates: [
                             { field: "UnitPrice", aggregate: "average"}
                          ]}
                      ],
                      aggregates:[
                        { field: "UnitPrice", aggregate: "average" }
                      ],
                       schema: {
                           model: {
                             id: "ProductID",
                             fields: {
                                ProductID: { editable: false, nullable: true },
                                ProductName: { validation: { required: true } },
                                Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },
                                UnitPrice: { type: "number", validation: { required: true, min: 1} }
                             }
                           }
                       }
                    });
 
                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        pageable: true,
                        height: 550,
                        toolbar: ["create"],
                        columns: [
                            { field:"ProductName",title:"Product Name" },
                            { field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#"},
                            { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "130px",groupFooterTemplate: "Average #=kendo.toString(average, 'n2')#", aggregates: ["average"] },
                            { command: "destroy", title: " ", width: "150px" }],
                        editable: true
                    });
                });
 
                function categoryDropDownEditor(container, options) {
                    $('<inputrequired name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataTextField: "CategoryName",
                            dataValueField: "CategoryID",
                            dataSource: {
                                type: "odata",
                                transport: {
                                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
                                }
                            }
                        });
                }
 
            </script>
        </div>
</body>
</html>

For the initial configuration of the Chart we'll set only the known variables, and leave the series data to be populated after the groups of the Grid are created:

$("#chart").kendoChart({
                        title: {
                            position: "bottom",
                            text: "Average unit price by product's category"
                        },
                        legend: {
                            visible: false
                        },
                        chartArea: {
                            background: ""
                        },
                        seriesDefaults: {
                            labels: {
                                visible: true,
                                background: "transparent",
                                template: "#= category #: \n $#= value#"
                            }
                        },
                        series: [{
                            type: "pie",
                            startAngle: 150
                        }],
                        tooltip: {
                            visible: true,
                            format: "${0}"
                        }
                    });

Once again, as in the first example, we will update the Chart within the “change” event of the dataSource:

var dataSource = new kendo.data.DataSource({
  change: function(e){
    updateChart(e.sender);
  },

And here is how we populate the data for the series by using the group value (the CategoryName of the group) and the average aggregate as a value:

function updateChart(dataSource){
   var dataItems = dataSource.view();                                        var data = [];
   dataItems.forEach(function(group){        
     var aggregateValue = group.aggregates["UnitPrice"].average.toFixed(2);
     data.push({category: group.value, value: aggregateValue});  
   })
 
   var chart = $("#chart").data("kendoChart");
   var options = chart.options;
   options.series[0].data = data;
   chart.setOptions(options); //re-initializing the Chart
}

Try Out the Code

The entire code of the example can be tested in the following dojo:

Endless Possibilities 

With a good understanding of the Grid and Chart widgets (or with a little help from our technical support officers team), you can enhance your apps in a number of ways by using the data from the Grid and visualizing it in the Chart. We'd note though that it is important to understand the data structure as well in order to create the series correctly. 

Try out the examples in the dojos above and let us know what you think. Happy coding!

Modernizing One Hybrid App at a Time—Free Telerik Platform Webinar

$
0
0

In this webinar, learn how to modernize your hybrid apps with our cross-platform native mobile app development framework, NativeScript. Register now to save your seat.

The mobile development landscape has evolved immensely over the last ten years. What used to be limited to native iOS and Android developers is now accessible for hybrid (Cordova) developers and native JavaScript (NativeScript) developers.

cordova-nativescript

And mobility continues to mature! Telerik Platform once had a laser focus on hybrid app development, but now offers a look at native app development with NativeScript. We know app performance and stability are critical to you, which is why we are helping to modernize mobility, one hybrid app at a time.

Join us on Thursday, October 26th at 10AM EDT as we demonstrate how you can modernize your hybrid mobile apps with NativeScript.

Telerik Platform has been an indispensable tool for all of us over the past three years. In this free online webinar, we will:

  • See how NativeScript benefits Telerik Platform users
  • Dive into some new NativeScript tooling options
  • Learn how to leverage (the newly free) professional NativeScript UI widgets
  • Take a peek at the latest in NativeScript framework improvements

Join us to learn all about how mobility is evolving and how you can modernize your hybrid mobile apps.

Seats are limited, so register for the free Telerik Platform webinar now!


Meet Dave Coffin, Developer Expert for NativeScript

$
0
0
Dave Coffin, Developer Expert for NativeScript, talks about building mobile apps with NativeScript from start to finish.

This post is part of a series featuring our Telerik Developer Experts, community members who represent the best of our products. Read about other featured experts here and meet more TDEs here.

dave_coffin_sm

What’s your background, professionally?

I'm a full stack web development and with a background in design. I've been doing primarily frontend development and design for almost ten years.

Where are you based and why?

I'm based in Dover, New Hampshire, because it's an awesome state to live in and raise kids in. I work mostly remotely.

With whom are you working?

I freelance a lot, but also have started my own company with my wife that aims to help the communication-related annoyances involved with both daycares and nannies.

What project are you working on now?

I am working on a few different apps, but the one I'm most excited about is an app for nannies that will simplify their shift management and payment tracking. It will allow nannies to track hours across families, send invoices, track expenses and more.

What’s the most interesting project you’ve done recently?

The most interesting project is an app I created called Daily Nanny. It gives parents instant access to important information about their kids, improves communication with their nanny, lets them share photos and more.

What are some challenges you are encountering now in your work?

It's a constant challenge trying to evolve the UX in your apps with new behaviors. There are a lot of devices out there, and making your apps efficient from a user experience perspective on devices of all sorts of sizes and OS versions is probably the biggest challenge for app developers these days.

Which of our products do you use and why?

I use NativeScript to develop apps exclusively. It makes it so easy to get started on app development and business logic, and makes it an enjoyable experience moving back and forth between web development and app development. For most of my apps I am creating the API, the database model, the marketing website, and web apps entirely myself. NativeScript lets me move between these technologies and languages seamlessly. I can be working on the backend business logic, the frontend website, and the app all literally at the same time without any mental overhead switching between development environments and languages.

What’s the biggest software pain point, in your opinion, in the mind of your partners or clients?

One of the biggest pain points in my mind is the process of distributing apps in the marketplace. Each platform has its own quirks, but in web, launching a website is incredibly easy. But there is quite an overhead in getting an app from development to even a simple testing phase.

Dynamic Data in the Kendo UI Grid

$
0
0

Learn how to create Kendo UI grids with dynamic data in this step by step recipe.

The moment you find yourself typing the same code over and over again, you know that something is off. You know that the code you are writing is getting WET (Write Everything Twice or We Enjoy Typing).

You need to stop, plan, modularize and DRY it off. You will thank yourself later when the next grid is up in seconds and you are sipping on that cup of coffee you have been thinking of all afternoon.

Creating editable Kendo UIGrids with dynamic data is like cooking an a-la-carte meal the easy way. As a Technical Support Engineer at Progress, I have seen plenty of our clients' "kitchens," helped resolve questions and given advice regarding dynamic data—and I am here to give you the recipe.

The Dynamic Data RecipeKendo UI Chef
Ready in about 1 hour
Medium level skills
Serves: 1 editable and 1 non-editable grid


Ingredients

1. Consistent Backend Service and API
2. One initial ajax request
3. Client Grid Configuration
4. Client Data Source Configuration

Method

1. Create a backend with consistent naming of the controller actions. For example:

  • READ
    http://domain/Orders
           http://domain/Customers       
  • CREATE
    http://domain/Orders/Create
      http://domain/Cutomers/Create  
  • UPDATE
    http://domain/Orders/Update
    http://domain/Customers/Update
  • DELETE
    http://domain/Orders/Destroy
    http://domain/Customers/Destroy

2. (This step applies to a read-only grid—for an editable grid, go to step 3.) Naturally, a read-only grid requires less complex logic. I created a simple function, called in the success handler of the initial ajax request. It adds some common options and its data source needs only the read operation.

    // add the grid options here 
    function populateGrid(response) {
        var columns = generateColumns(response);
        var gridOptions = {
          dataSource: {
            transport:{
              read:  function(options){
                options.success(response);
              }
            },
            pageSize: 10,
            page: 1
          },
          columns: columns,
          pageable: true,
          height:300
        };

        // reuse the same grid, swapping its options as needed
        var grid = $("#grid").data("kendoGrid");
        if(grid){
          grid.setOptions(gridOptions);
        } else {
          $("#grid").kendoGrid(gridOptions);
        } 
      }
  
Since I do not want the "ID" column to take up much space, I created another the generateColumns function so I can alter the columns configuration. You can customize all the columns properties at this point.
  function generateColumns(response){
        var columnNames = Object.keys(response[0]);
        return columnNames.map(function(name){
          var isIdColumn = name.indexOf("ID") > -1 || name.indexOf("Id") > -1;
          return { 
            field: name,
            width: isIdColumn ? 50 : 180,
            title: isIdColumn ? "Id" : name
          };
        })
      }

Voilà! The read-only Kendo UI Grids with dynamic data are ready to be thrown in the oven. To show you how easy it is to use the functions above, I added a Kendo UI ToolBar with three buttons. When each button is pressed, the click function populates the respective Kendo UI Grid.

To open as an editable Dojo, hover over the right hand top corner     ⬎ 

3. To create a dynamic editable Kendo UI Grid, we need to create the dataSource schema model before the dataSource. In the success callback of the initial ajax request, pass a sample dataItem to the generateModel function. The function accomplishes two very important tasks:

Checks the type of each property so the grid can initialize the correct editor. For example, the number type will create a Kendo UI NumericTextBox, the date type will be equipped with a Kendo UI DatePicker when in edit mode.
Finds the unique schema model id and makes it non-editable. The unique id is a prerequisite for the editing functionality.

The function can be extended to include other schema model settings such as validation and default value. Or you may collect the field names of date types, so they can be formatted in the column settings later on.

 
      var dateFields = [];
      
      function generateModel(sampleDataItem) {
        var model = {};
        var fields = {};
        for (var property in sampleDataItem) {
          if (property.indexOf("ID") !== -1) {
            model["id"] = property;
          }

          var propType = typeof sampleDataItem[property];
          if (propType === "number") {
            fields[property] = {
              type: "number"
            };
            if(model.id === property){
              fields[property].editable = false;
            }
          } else if (propType === "boolean") {
            fields[property] = {
              type: "boolean"
            };
          } else if (propType === "string") {
            var parsedDate = kendo.parseDate(sampleDataItem[property]);
            if (parsedDate) {
              fields[property] = {
                type: "date"
              };
              dateFields[property] = true;
            }
          }
        }

        model.fields = fields;

        return model;
      }
    

4. Now that we have the schema model, we can create the Kendo UI Data Source. The function should receive the base URL and the model as parameters. Since the services follow a naming convention, it is easy to create this dynamic data source with CRUD operations:

      
    function generateDataSource(baseURL, model) {
         var dataSource = {
          transport: {
            read: {
              url: baseURL
            },
            create:{
              url: baseURL + "Create"
            },
            update:{
              url: baseURL + "Update"
            },
            destroy:{
              url: baseURL + "Destroy"
            },
            parameterMap: function(options, operation) {
              if (operation !== "read" && options.models) {
                return {models: kendo.stringify(options.models)};
              }
            }
          },
          batch:true,
          schema: {
            model:model
          },
          pageSize: 10
        };

        return dataSource;
      }
    

 

5. Next in line are the grid columns. Use this function to customize the formatting, width or other columns settings

      
      function generateColumns(sampleDataItem) {
        var columnNames = Object.keys(sampleDataItem);
        return columnNames.map(function(name) {
          var isIdField = name.indexOf("ID") !== -1;
          return {
            field: name,
            width: (isIdField ? 40 : 200),
            title: (isIdField ? "Id" : name)
          };
        });
      }
    

 

6. This is the final step. The schema, data source and columns are known and we can initialize the dynamic Kendo UI Grid. In my function, I am passing the id of the element from which I will initialize the grid but you can extend the createGrid function and append the newly generated grid elsewhere.

      
      function createGrid(gridName, baseUrl) {
        $.ajax({
          url: baseUrl,
          success: function(response) {
            var sampleDataItem = response[0];
            var model = generateModel(sampleDataItem);
            var dataSource = generateDataSource(baseUrl, model, editable);
            var columns = generateColumns(sampleDataItem);
            var gridOptions = {
              toolbar: ["create", "save", "cancel"],
              dataSource: dataSource,
              columns: columns,
              pageable: true,
              editable: editable,
              height: 450
            };

            columns.push({ command: "destroy", title: " ", width: 170 });

            $("#" + gridName).kendoGrid(gridOptions);
          }
        });
      }
    
The result—initialization of a dynamic editable grid with a single line of code:

<div id="products"></div>
    <script>
      createGrid("products", "https://demos.telerik.com/kendo-ui/service/products/");</script>

To open as an editable Dojo, hover over the right hand top corner    

This is just a basic dynamic data in the Kendo UI Grid recipe. There is much more than that which can be done, extended and plugged in as required. The examples I created here can be reused, saving you time and effort. The investment that one needs to make is well worth the payback when many similar grids need to be created—a naming convention, an extra single ajax request and coding a more abstract backbone logic so it can be reused.

If you already have your own Kendo UI Grid with dynamic data, please share what you do differently in the comments section below.

Build Accessibility-Compliant Reports with Telerik Reporting

$
0
0

Producing accessible reports is essential for businesses that reach out to a wide audience. Telerik Reporting is ready to provide this valuable feature.

In this article, I will write about an often neglected, yet really important component of modern web applications—accessibility. When your business needs to reach a broader audience, it is vital to produce documents that are available for all users. This includes the people with motor control restrictions who experience difficulties working with a mouse or trackball, and the ones that need to use additional assistive technologies like screen readers to interpret the document content.

Fortunately, there are well-known standards and guidelines that specify how to make a document accessible. In the R3 2017 release of our product, we introduced accessibility support for our HTML5-based viewers, following the recommended practices from Section 508 of the Rehabilitation Act and Web Content Accessibility Guidelines (WCAG) 2.0. Now our users can effortlessly add accessible reports to any flavor of web applications that we support, producing content according to standards set by the WAI-ARIA specification. The process involves providing accessibility support for both report viewer and report content.

Accessible Report Viewer

The Report Viewer is the widget that allows users to preview the report and interact with the reporting engine when changing the parameters, browsing through the report pages or navigating in the document map. It now provides an option that switches its accessibility mode on or off. When the accessibility mode is enabled, the viewer activates the keyboard support, starts emitting dynamically generated descriptions for non-text items and instructs the reporting engine to render the reports according to the accessibility standards mentioned above.

Keyboard Support

Every part of the report viewer is dedicated to a different task. Based on that, it can be separated into four main areas:

  • Content—this is the main area where the currently rendered report is displayed
  • Menu—the menu bar that is used to navigate forth and back in history, go to a certain page and execute commands on the rendered report, like printing, exporting, etc.
  • Parameters—the panel where the report parameters (if any) are displayed, so the user can change them and preview the report with the new values
  • Document map—a tree view that reflects the report structure, providing a set of navigational links to the report items in the rendered report

In accessibility mode the viewer labels the areas as landmarks and allows using shortcut keys to directly focus on them and navigate within their content—menu buttons, parameter editors and document map nodes. When a report is rendered in accessibility mode, its content is marked as focusable and can be traversed with the keyboard. The keyboard can also be used to execute an interactive action if the focused report item has one set.

Dynamically Generated Descriptions

When the accessiblity mode is enabled, the focusable elements in the viewer areas provide labels that can be read by an assistive technology like a screen reader.

The menu area sets labels on its buttons and submenus, explaining the function they execute and their current state (enabled or disabled). The parameter area provides information about the parameters it contains, as does each parameter editor about its type, currently selected value and (if needed) a validation message. The document map area generates labels for its nodes so the screen reader can inform the user which navigational link currently has focus.

Accessible Report Content

When designing a report using Visual Studio or Standalone Report Designer, the user can provide additional information about every report item, setting an expression for its AccessibleDescription property. The evaluated expression will produce a WAI-ARIA compliant attributes, but it will be respected only when the report viewer has its accessibility mode enabled, so no redundant markup will be generated. This property is extremely useful when the report contains a non-textual item like a PictureBox or Graph, and helps provide valuable information to the user about the currently focused element.

By default, if the AccessibleDescription value is not set, the report item will produce an accessible label, based on its Value property, which would cover the most scenarios and no report refactoring will be needed. Additionally, the engine concatenates some meta information, related to the current report item, so the user will be given as much detail as possible. 

For example, if the report contains a table, its accessible label will automatically be appended with information about the rows and columns count. Each of the table cells will emit information about its position in the table—whether it is a header cell, and on which row and column it is placed. So if a report contains a TextBox with Value = "Sorts by Category," that performs a sorting action and is nested in a table's first (header) row and third column, the generated label value will be: Text box. Performs a sorting action. Column header. Column two, row zero. Sorts by Category.

Customization

The HTML5-based report viewers accessibility mode is disabled by default, so no excessive HTML markup will be generated. It can be set through the report viewer’s initialization script, using the enableAccessibility(true) option. When adding a report viewer to a project with the Item Template Wizard, its last page suggests setting the accessibility mode and generates the required option automatically. The texts, generated by the accessibility module, can be localized easily, and the default shortcut key mapping can be changed if it interferes with the default browser behavior.

Want to Learn More?

Having a report tool that produces content to meet accessibility standards can be a great benefit when striving to provide the best solution for the most people. The Telerik Reporting team at Progress will continue our efforts to introduce the accessibility support for the entirety of technologies covered by our report viewers. If you would like to learn more about the process, take a look at the new features, check the product roadmap or try it yourself for free!

Get Reporting in our Bundles

You can get Telerik Reporting as an individual product or as a part of our bundles. We bring the best of Telerik and Kendo UI together in convenient bundles, including a wide-range of UI, reporting and productivity tools for both .NET and JavaScript technologies and support that’s got your back in every step of your project. Thanks to our intuitive APIs, alongside thousands of demos with source code availability, comprehensive documentation and a full assortment of VS templates you will get up and running with our tools in no time and fully embrace your inner warrior (Kendoka/Ninja).

By leveraging the broad array of themes, skins, styling and customization options, your application will awe even the best front-end designers. Check it out!

Kendo UI Support for React & Vue Webinars

$
0
0

We're excited to bring React and Vue support to Kendo UI. Learn everything you need to know and watch as we showcase the components in our upcoming webinars.

We are very excited to announce that our Kendo UI component library will now have support for React and Vue applications! This includes awesome UI components like our Date Picker, PanelBar, TabStrip, Grid and more. You can check out the whole list here:

As always, our components give you the ability to code more robust apps faster!

Now with one Kendo UI license you can have the support for Angular, jQuery, React and Vue. So, if you change or migrate to a new technology environment, you're covered. Along with the many resources we provide, like great demos and the super handy Theme Builder, with these libraries you also get several different support options. When giving you the tools to build great with we want you to also have support you can count on.

Come Check it Out!

We can only fit so much in a blog post, so we decided to put on a webinar for you! Join us and we'll walk you through the easy setup and showcase a few awesome things the components can help you build. If you have any questions message us on Twitter at @KendoUI or with the hashtag #heyKendoUI and we can try to get them answered during the webinar.

Webinar Dates & Times

We're really excited to bring you more support for your favorite frameworks! Hope to see you there and in the meantime, get a free trial and try them out now:

Thanks & Happy Coding! ‍

4 Ways to Export from WPF and WinForms to Word and PDF Files

$
0
0

Looking to add functionality in your .NET apps to export data to Word and PDF? Learn four ways to do this with just a little code.

Building feature rich applications can often leave users asking to take visual elements off the screen to be used elsewhere. Being able to export from an application to Word or PDF opens up new possibilities, such as sharing, reporting or even satisfying Sarbanes–Oxley (SOX) audit requirements.

Getting data out of your application and into standard formats like Microsoft Word and Adobe PDF can be a daunting task. Especially when performance optimizations for large datasets, document customization & appearance, and supported platforms are taken into consideration.

However, with the right tools, adding this feature to your .NET application can be as simple as a few lines of code. Let's take a look at 4 ways we can include rich document functionality in our .NET apps with very little code and time investment.

For the examples we'll be using the Telerik Document Processing Library (DPL), which is distributed at no additional cost with the Progress Telerik UI libraries for WPF, Silverlight and WinForms. For the web developers out there, the DPL is also included with ASP.NET Web Forms and MVC. In addition, no MS Office licenses or dependencies are required to use the DPL.

If you’re using Telerik UI, you already have these capabilities in your toolbox and we’ll learn how to leverage them. If you’re not using Telerik UI yet, but would like to increase your developer productivity, learn more about it here.

1. Create New Word Document in .NET

Having the ability to create a new Word document from code provides a great deal of flexibility. With a just few dependencies we have access to Word document creation APIs that include text, image, and link generation. For this example, we'll use RadFlowDocument and RadFlowDocumentEditor to create a new Word document from a .NET console application.

We'll start with a few dependencies like System.IO to handle a file stream, and the necessary Telerik DPL assemblies.

usingSystem.IO;
usingTelerik.Windows.Documents.Flow.FormatProviders.Docx;
usingTelerik.Windows.Documents.Flow.Model;
usingTelerik.Windows.Documents.Flow.Model.Editing;

Next, we create a new RadFlowDocument and RadFlowDocumentEditor. The RadFlowDocumentEditor will allow us to insert new text, image and other elements to the document.

staticvoidMain(string[] args)
 
{
 
    RadFlowDocument document = newRadFlowDocument();
 
    RadFlowDocumentEditor editor = newRadFlowDocumentEditor(document);

Using the editor, we'll write some text to the document using the InsertText method. We also have additional methods available such as:

  • InsertFloatingImage
  • InsertParagraph
  • InsertTable
  • InsertHyperlink
  • and more
insert-methods
staticvoidMain(string[] args)
 
 
{
 
 
    RadFlowDocument document = newRadFlowDocument();
 
 
    RadFlowDocumentEditor editor = newRadFlowDocumentEditor(document);
 
 
    editor.InsertText("Hello Word!");

Once the document is complete, we just need to write it to the FileStream. For the RadFlowDocument we'll use the DocxFormatProvider to export to the DOCX format. Similarly, we could use a PdfFormatProvider to create a PDF document.

usingSystem.IO;
 
 
usingTelerik.Windows.Documents.Flow.FormatProviders.Docx;
 
 
usingTelerik.Windows.Documents.Flow.Model;
 
 
usingTelerik.Windows.Documents.Flow.Model.Editing;
 
 
  
 
 
namespaceDocProcessing
 
 
{
 
 
    classProgram
 
 
    {
 
 
        staticvoidMain(string[] args)
 
 
        {
 
 
            RadFlowDocument document = newRadFlowDocument();
 
 
            RadFlowDocumentEditor editor = newRadFlowDocumentEditor(document);
 
 
            editor.InsertText("Hello Word!");
 
 
  
 
 
            using(Stream output = newFileStream("output.docx", FileMode.OpenOrCreate))
 
 
            {
 
 
                DocxFormatProvider provider = newDocxFormatProvider();
 
 
                provider.Export(document, output);
 
 
            }
 
 
  
 
 
        }
 
 
    }
 
 
}

HelloWorld

In this example, files created using the Telerik DPL are saved directly to disk. However, any file created using the DPL can also be downloaded via the browser from UI for ASP.NET AJAX and UI for ASP.NET MVC applications.

2. Mail Merge from .NET

Creating a mail merge is an effective way of building a template and populating it with data for processing documents in batches. With the mail merge process, you can create a series of personalized documents based on your data source.

The mail merge process is one that is often manually performed inside of Microsoft Word. With the Telerik DPL this process can be completely automated and customized based on the needs of your application. The mail merge APIs can be used virtually anywhere in .NET. To see it in action we'll use an example of how a mail merge is executed in a WPF/WinForms application.

We'll create a new document containing our template message. To create a template field in the document we'll use the InsertField method and set the field code to MERGEFIELD with the variable name we wish to use, in this case FirstName. The variable name simply matches the property on an object that we'll supply to the MailMerge method.

privateRadFlowDocument CreateDocument()
 
 
{
 
 
    RadFlowDocument document = newRadFlowDocument();
 
 
    RadFlowDocumentEditor editor = newRadFlowDocumentEditor(document);
 
 
  
 
 
    editor.InsertText("Dear ");
 
 
    editor.InsertField("MERGEFIELD FirstName", "");
 
 
    editor.InsertText(" ");
 
 
    editor.InsertField("MERGEFIELD LastName", "");
 
 
    editor.InsertLine(",");
 
 
    editor.InsertLine("This is a sample Mail Merge");
 
 
    returndocument;
 
 
}

With the document created, the next step will be to perform the mail merge. The MailMerge method takes any IEnumerable as a parameter, in this case we'll use a predefined list of Person via GetRecipents. In this case Person has a FirstName and LastName property matching the MERGEFIELD variables.

protectedvoidbutton_Click(objectsender, EventArgs e)
 
 
{
 
 
    RadFlowDocument document = this.CreateDocument();
 
 
    RadFlowDocument mailMergeDocument = document.MailMerge(GetRecipients());
 
 
    //save the document
 
 
}

The document can be saved by setting up a MemoryStream and calling Export from a DocxFromatProvider. Once the memory stream is ready, we'll write it to a file.

protectedvoidbutton_Click(objectsender, EventArgs e)
 
 
{
 
 
    RadFlowDocument document = this.CreateDocument();
 
 
    RadFlowDocument mailMergeDocument = document.MailMerge(GetRecipients());
 
 
    byte[] renderedBytes = null;
 
 
     
 
 
     using(Stream output = newFileStream("output.docx", FileMode.OpenOrCreate))
 
 
     {
 
 
         DocxFormatProvider provider = newDocxFormatProvider();
 
 
         provider.Export(mailMergeDocument, output);
 
 
     }}

The result is a multi-page .DOCX file for each recipient provided to the mail merge. This type of document can easily be printed and sent to clients as physical mail. See demos.telerik.com/wpf and the UI for WinForms demos for a more comprehensive example that includes additional file types and document features.

mailMerge

3. Convert Word to PDF in .NET

One of the Telerik DPL strengths is its ability to import and export various file types like: DOCX, PDF (export only), HTML and RTF. Because of this ability, it can also be used to do file conversions between these types as well. Using the IFormatProvider we can utilize the various format providers within the Telerik DPL interchangeably. Let's take a look at a basic example of a console app that can import a DOCX file and export it to PDF.

We'll begin by creating a default provider using an IFormatProvider and setting it to an instance of DocxFormatProvider. A RadFlowDocument is used as our document in the conversion from DOCX to PDF.

IFormatProvider<RadFlowDocument> fileFormatProvider = newDocxFormatProvider();
 
 
RadFlowDocument documentToConvert = newRadFlowDocument();

The DOCX document is opened from disk using the DocxFormatProvider and streamed into memory.

using(FileStream input = newFileStream("input.docx", FileMode.Open))
 
{
 
documentToConvert = fileFormatProvider.Import(input);
 
}

With the document in memory as a RadFlowDocument we can change our provider from a DocxFormatProviderPdfFormatProvider. Now the document can be written back to disk as a PDF.

fileFormatProvider = newPdfFormatProvider();
 
 
 
    using(Stream output = newFileStream("output.pdf", FileMode.OpenOrCreate))
 
    {
 
        fileFormatProvider.Export(documentToConvert, output);
 
    }

Convert Doc PDF

As you can see in the complete example, in just a few short lines of code we're able to convert from DOCX to PDF.

staticvoidMain(string[] args)
 
{
 
    IFormatProvider<RadFlowDocument> fileFormatProvider = newDocxFormatProvider();
 
    RadFlowDocument documentToConvert = newRadFlowDocument();
 
 
 
    // Read DOCX
 
    using(FileStream input = newFileStream("input.docx", FileMode.Open))
 
    {
 
        documentToConvert = fileFormatProvider.Import(input);
 
    }
 
 
 
    // Write PDF
 
    fileFormatProvider = newPdfFormatProvider(); // change format provider to PDF
 
 
 
    using(Stream output = newFileStream("output.pdf", FileMode.OpenOrCreate))
 
    {
 
        fileFormatProvider.Export(documentToConvert, output);
 
    }
 
}

This method of importing and exporting documents can be used to convert between file formats. One caveat however is that there is no import functionality for PDF documents due to file format limitations. To deal with this limitation the IFormatProvider is equipped with a CanImport property that can be checked before the Import operation is performed.

See the UI for WPF and UI for WinForms WordsProcessing demos that includes additional file types and scenarios.

4. Edit Microsoft Word Docs in WPF and WinForms

Customers can sometimes ask for time-consuming project requirements, like the ability to edit Word Documents in the application without the need to leave the app and use external editors. On the surface this sounds like a feature that will take quite a bit of effort to accomplish; however, it's as simple as adding a rich text component to your application which comes with the Telerik UI for WPF and Telerik UI for WinForms suites.

rtb combined

Using UI for WPF and UI for WinForms, the ability to import and export right from the rich text editor control can be accomplished with few lines of code.

DocxFormatProvider provider = newDocxFormatProvider();
 
 
 
using(FileStream fileStream = newFileStream(@"input.docx", FileMode.Open))
 
{
 
    this.radRichTextBox1.Document = provider.Import(fileStream);
 
})

Exporting the content is just as simple. Simply pick the format provider for the desired format – PDF, DOCX, XAML, HTML, RTF, TXT and utilize its Export() method.

DocxFormatProvider provider = newDocxFormatProvider();
 
SaveFileDialog saveDialog = newSaveFileDialog() { DefaultExt = ".docx", Filter = "Documents|*.docx"};
 
DialogResult dialogResult = saveDialog.ShowDialog();
 
if(dialogResult == System.Windows.Forms.DialogResult.OK)
 
{
 
     using(Stream output = saveDialog.OpenFile())
 
     {
 
         provider.Export(radRichTextEditor1.Document, output);
 
     }
 
}

See the Telerik UI for WPF and Telerik UI for WinForms demos for more comprehensive examples that include additional editor features.

Conclusion

Whether you need to create documents from scratch or edit in the desktop app, the Telerik UI libraries make short work of any document export task for .NET developers. With the Telerik Document Processing Library new files can be created from scratch as DOCX, PDF, RTF, or TXT. Advanced features such as mail merge can reduce manual tasks with app driven automation. With the addition of Telerik UI libraries powered by UI for WPF and WinForms, documents can be edited on screen and custom export features empower users to export content with the click of a button.

Get access to the vast benefits of Telerik Document Processing and document exporting by downloading either the full Progress DevCraft bundle or any technology-specific library you need: Telerik UI for WPF or Telerik UI for WinForms.

Other Useful Resources

Viewing all 737 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>