DEV Community: Arun

Getting Started with Vue File Upload Component

Arun — Wed, 14 Aug 2024 06:46:22 +0000

Learn how to create a Vue app and configure the Syncfusion Vue File Upload component in it. The Vue File Upload component is a feature-rich library for uploading images, documents, audio, video, and other files to a server. It is an improved version of the HTML5 upload component, with features that include multiple file selection, progress bars, auto-uploading, drag and drop, folder (directory) uploading, file validation, and more.

In this video, you will also learn how to set up a few of the component’s basic features: uploading multiple files and a single file at a time, validating files before upload, and saving and removing files in the uploader using APIs.

In this upload component, you can upload files asynchronously; utilize chunk upload for large files; create your own template designs; and apply attractive, customizable themes. Its globalization and localization features enable people from different locales to use the File Upload by formatting dates, currency, and numbering to suit their preferences. The component supports right-to-left rendering, which improves the user experience and accessibility for those who use RTL languages.

Additionally, you can perform resumable uploads, upload images with previews, limit the file types from the client-side, check file size limits with minimum and maximum ranges, and more.

Explore our tutorial videos: https://www.syncfusion.com/tutorial-videos

Example project: https://github.com/SyncfusionExamples/Getting-Started-with-the-Vue-File-Upload-Component

Find and Replace Options in a .NET Word Library

Arun — Tue, 13 Aug 2024 11:20:14 +0000

Learn how to work with find and replace options in a Word document using the Syncfusion .NET Word Library. In this video, you will see how to find and replace text in a Word document with any desired text, image, hyperlink, paragraph, table, part of a document, or entire document using Syncfusion's .NET Word Library. This library provides options to find text by matching case and whole words. You can view each occurrence one by one or all occurrences of a text at once in a document. This feature saves you time and effort by allowing you to automatically find and replace text patterns in a Word document using Regex.

The .NET Core Word Framework by Syncfusion is a high-performance and feature-rich library designed for advanced Word document processing. It allows you to create, read, and edit Word documents programmatically in .NET Core applications. This framework offers powerful conversion APIs to convert Word documents to various formats such as PDF, HTML, RTF, and ODT. It also includes advanced editor components to view, edit, and print Word documents seamlessly within your applications. Key features include the ability to create and edit Word documents with text, formatting, images, shapes, tables, and more.

You can generate reports like invoices and payrolls quickly by performing mail merges without Microsoft Office dependencies. Additionally, it allows you to convert Word documents to PDF, HTML, RTF, ODT, and other formats, protect documents with passwords and restrict editing, perform advanced find and replace operations within documents, and split documents into multiple parts or merge multiple documents into one. The framework is optimized for server environments, ensuring low memory usage and high speed.

Explore our tutorial videos: https://www.syncfusion.com/tutorial-videos

Example project: https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Find-and-Replace

Getting Started with the Angular File Upload Component

Arun — Tue, 30 Jul 2024 10:25:50 +0000

Learn how to add the Syncfusion Angular File Upload component to an Angular application. With the File Upload component, you can upload one or multiple files, including images, documents, audio, video, and other files to a server. It has a rich set of features that includes multiple file selection, progress bars, auto-uploading, drag and drop, directory uploading, file validation, and more.

In this video, you will learn to create an Angular app, add the Syncfusion Angular File Upload component to it, and use its basic features: dragging and dropping files, uploading one or multiple files, saving and removing files using the API, validating files before uploading them, and preloading files.

The Angular File Upload component allows you to pause, resume, retry, and cancel a file upload. This helps users upload high-resolution images, videos, and other large files safely. Additionally, it lets you pause and resume automatically based on the server connection. The component allows you to upload and resize images. You can also show an image preview or thumbnail before uploading them.

The Angular File Upload component provides a simple interface to delete wrongly uploaded files from a server. Also, users can configure previously uploaded files. The component displays a built-in progress bar with the progress percentage during each file upload.

Explore our tutorial videos: https://www.syncfusion.com/tutorial-videos

Example Project: https://github.com/SyncfusionExamples/getting-started-with-the-angular-file-upload-component

Merging PDF Documents Using the .NET PDF Library

Arun — Mon, 29 Jul 2024 11:53:22 +0000

Learn how to merge PDF documents using the Syncfusion .NET PDF Library. In this video, we demonstrate the various options available for merging PDF files. These include importing specific ranges of pages from different PDF documents, optimizing the merged PDF file size using the optimized resource property, and extending PDF document margins.

This high-performance library lets you effortlessly create, read, and edit PDF files right from your .NET applications. With no Adobe dependencies, enjoy seamless PDF viewing, reviewing, and printing. Convert documents into professional PDFs in a snap! Transform HTML, Word, Excel, PowerPoint, and images into high-quality PDF formats with ease. Syncfusion offers cost-effective solutions without any hidden fees. Experience unparalleled versatility across platforms! Whether building for .NET, Blazor, .NET MAUI, .NET Core, Flutter, WinUI, Xamarin, or UWP, our PDF framework has you covered.

Create PDFs from scratch, modify existing ones, and add advanced features like forms, annotations, and digital signatures. Optimize PDFs with compression, encryption, and redaction tools. Bring your PDFs to life with interactive viewer components! Engage users with our web, desktop, and mobile PDF viewers. Enable seamless viewing, annotation, and form filling. Easily convert PDF pages to popular image formats like JPG, PNG, TIFF, and BMP. Streamline your development process and deliver exceptional PDF functionalities with Syncfusion. Extensive documentation and sample code make it easy to get started.

Explore our tutorial videos: https://www.syncfusion.com/tutorial-videos

Example project: https://github.com/SyncfusionExamples/PDF-Examples/tree/master/Merge%20PDFs

How to Group Nodes and Connectors in the Vue Diagram Component

Arun — Wed, 12 Jun 2024 11:29:25 +0000

Learn how to group nodes and connectors in the Syncfusion Vue Diagram component. This video demonstrates how to group nodes programmatically and dynamically. It also shows how to update a node group and add annotations to it. Finally, it shows how to create a nested group.

The Vue Diagram is a feature-rich component for visualizing, creating, and editing interactive diagrams. It supports creating flowcharts, organizational charts, mind maps, and BPMN charts through code or a visual interface. Grouping is used to cluster multiple nodes and connectors into a single element.

A group acts like a container for its children. Every change made to the group also affects the children. Child elements can be edited individually. A group can be added to the diagram model through a nodes collection. To define an object as a group, we need to add the child objects to the children collection of the group. We need to declare child nodes before creating the group.

To add nodes to existing groups, use the Diagram’s group method. The Diagram’s unGroup method is used for ungrouping. Groups can even be nested within the child nodes of other groups.

Explore our tutorial videos: https://www.syncfusion.com/tutorial-videos

Example project: https://github.com/SyncfusionExamples/How-to-Group-Nodes-and-Connectors-in-the-Vue-Diagram-Component

Getting Started with the Vue Circular Gauge Component

Arun — Thu, 06 Jun 2024 11:40:46 +0000

Learn how to add the Syncfusion Vue Circular Gauge Component to a Vue application. The Vue Circular Gauge is a component used to visualize numeric values on a circular scale with multiple axes and rounded corners.

This video demonstrates how to create a Vue app and add the Circular Gauge component to it. It shows how to customize the axis pointer value, start and end angles, axis radius, and start and end ranges. The gauge axes are circular scales on which values can be plotted based on any business logic.

We can easily customize the appearance of the axes, and the look and feel of the default labels by changing the font style, size, and color. Prefix or suffix text can also be added to the labels. We can customize the gauge’s appearance to simulate speedometers, meter gauges, analog clocks, etc.

We can define the desired style for major and minor ticks by changing their height, width, and color. A range in a Vue Circular Gauge helps visualize where a value falls on the axis quickly.

This component provides a visually appealing way to view its pointers with animated transitions for a certain duration. Experience smooth pointer transitions by moving the pointer from one place to another. A legend provides additional information that helps identify the ranges in a Circular Gauge. It can be docked at the left, right, top, and bottom of the plot area.

Explore our tutorial videos: https://www.syncfusion.com/tutorial-videos

Example project: https://github.com/SyncfusionExamples/getting-started-with-the-vue-circular-gauge-component

Getting Started with the React Radio Button and Checkbox Components

Arun — Wed, 29 May 2024 08:38:42 +0000

Learn how to add Syncfusion React Radio Button and CheckBox components to the React application.

This video demonstrates how to customize the label position, size, and rendering direction of these components. The React Radio Button is a custom radio-type HTML5 input component that allows you to select one option from a list of predefined choices. It supports different states, sizes, labels, label positions, and UI customizations.

The appearance of the Radio Button UI can be completely customized. The React Checkbox is a custom checkbox-type HTML5 input component that allows you to select one or more options from a list of predefined choices. It supports an indeterminate state, various sizes, custom labels and positions, and UI customization.

Tutorial videos: https://www.syncfusion.com/tutorial-videos

Download the example from GitHub: https://github.com/SyncfusionExamples/getting-started-with-the-react-radiobutton-and-checkbox-components

Getting Started with the React 3D Charts Component

Arun — Wed, 15 May 2024 09:39:31 +0000

Learn how to create and configure the Syncfusion React 3D Charts component. In this video, I will also show you how to use a few of its basic features: data labels, legends, and tooltips.

The React 3D Charts component provides a graphical representation of data in three dimensions, effectively illustrating relationships and trends among variables. It has support for six chart types: column, bar, stacking column, stacking bar, 100% stacked column, and 100% stacked bar.

The 3D chart control offers options for displaying tooltips, providing detailed information about pointer values when the mouse hovers over them. It can accommodate various data types such as numbers, date-time, logarithmic, and strings.

You can insert a legend to furnish additional information about a series and customize it as needed. Furthermore, the chart's axis elements can be customized to enhance readability. Data labels are also supported to annotate points. Users can customize the color of data points, adjust the wall's depth, and alter the wall color of the 3D charts using built-in APIs. The ability to plot multiple series in a single chart enables easy comparison of different data values. The end-user experience is significantly enhanced with a range of interactive features such as rotation, tilt, selection, and highlight.

Tutorial videos: https://www.syncfusion.com/tutorial-videos

Download the example from GitHub: https://github.com/SyncfusionExamples/getting-started-with-the-react-3d-charts-component

How to Add Blazor Components to a Blazor WPF App

Arun — Thu, 02 May 2024 09:06:55 +0000

Learn to create a new Blazor WPF app and add Syncfusion Blazor components using Visual Studio 2022. In this video, you will learn to configure the Syncfusion Blazor DataGrid component in a Blazor WPF app.  

The Syncfusion DataGrid control displays and allows users to manipulate data in a tabular view. Its wide range of functionalities includes an adaptive UI layout for all devices, selection, and support for Excel, CSV, and PDF formats.    Use the grid column components of templates to apply a custom layout and display custom element values or content for each column. 

The Syncfusion DataGrid control can display table data in a hierarchical structure that can be expanded or collapsed with a button. Through paging, a segment of data can be viewed from the assigned data source. Use the built-in, customizable pager UI with an on-demand paging mode for effective data retrieval from remote web services. Customize the style of individual cells and rows.  

The Blazor DataGrid provides support for create, read, update, and delete (CRUD) operations. In addition to built-in editor components for editing column values, use templates to create custom editor components that suit application needs. Perform editing operations with a list of business objects or a remote data service with the help of the data manager. 

The Blazor DataGrid header must be in a fixed position when scrolling the document vertically to visualize the content along with the column header. You can drag and drop rows to another DataGrid or custom component. You can also drag and drop rows within the same DataGrid using the drag icon.  

Explore tutorial videos: https://www.syncfusion.com/tutorial-videos  

Example project: https://github.com/SyncfusionExamples/blazor-with-wpf/tree/master

How to Open and Save Excel Files in the Vue Spreadsheet

Arun — Wed, 27 Mar 2024 10:48:27 +0000

Learn how to open and save Excel files using the Syncfusion Vue spreadsheet component. This video demonstrates how to open and save Excel files using the Syncfusion Vue spreadsheet component. It also showcases how to load an Excel file when the application loads, configure a server, and send custom parameters.

The Vue Spreadsheet, an Excel viewer, is a feature-rich component for web applications to organize and analyze data in tabular format, like Microsoft Excel. It provides all the common spreadsheet features, including data binding, selection, freeze panes, editing, formatting, protection, resizing, sorting, importing, and exporting Excel documents.

The Vue Spreadsheet is designed and optimized for loading large amounts of data into a worksheet and viewing it on demand with the help of row and column virtualization. A worksheet is a collection of cells arranged in rows and columns that lets you save, format, and work with data.

You can create, delete, and rename worksheets, as well as customize the headers, gridlines, and sheet visibility in our Vue Spreadsheet. The native data format for spreadsheets is JSON. When you open an Excel file, it needs to be read and converted to the client-side spreadsheet model. This converted client-side model is sent as JSON, which is then used to render the spreadsheet. Similarly, when you save the spreadsheet, the client-side model is sent to the server as JSON for processing, and is saved in Excel file formats. Server configuration plays a role in this process.

Tutorial video: https://www.syncfusion.com/tutorial-videos

Download an example from GitHub: https://github.com/SyncfusionExamples/How-to-Open-and-Save-Excel-Files-in-the-Vue-Spreadsheet/

Quick Overview of Blazor Query Builder Component

Arun — Thu, 21 Mar 2024 10:14:16 +0000

In this video, explore the Syncfusion Blazor Query Builder—an intuitive toolset engineered to simplify data filtering for extensive datasets. Discover how to integrate conditions with DataGrids and Charts for instant data visualization.

The Blazor Query Builder generates structured JSON filters that can be seamlessly parsed into SQL queries or data manager predicates. You can also import and export filters in JSON or SQL formats, making it easy to manage and share your filter queries. Additionally, the component offers a Summary view, allowing you to showcase filter queries in SQL format for better clarity and understanding.

Binding data from various sources, including JSON, OData, WCF, RESTful services, and more, is a breeze with the Blazor Query Builder. You can quickly define column schemas on the go and create filters with a simple addition or deletion of conditions or groups, providing you with maximum flexibility and control. Furthermore, the component supports model binding, allowing you to bind properties to the components used in field and operator columns.

You can also organize hierarchical or multilevel data using subfields, ensuring a comprehensive and organized filtering experience. Customization options abound with the Blazor Query Builder. You can customize the UI using templates, adding controls like Checkbox, Slider, and Dropdown List to the header, columns, and value elements. Additionally, you can change the appearance of the component with custom styling and built-in themes, ensuring that it seamlessly integrates with your application's design. Accessibility is a top priority with the Blazor Query Builder, offering complete WAI-ARIA support for screen readers and assistive devices.

Moreover, text direction can be displayed in a right-to-left direction, catering to diverse user needs. With a highly responsive layout and finely optimized design for desktops, touchscreens, and phones, the Blazor Query Builder provides a smooth and seamless filtering experience across devices.

Product overview: https://www.syncfusion.com/blazor-components/blazor-query-builder

Examples: https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=fluent

Blazor DateRangePicker Overview

Arun — Tue, 19 Mar 2024 04:14:58 +0000

In this video, discover the Syncfusion Blazor DateRangePicker, it is a lightweight and mobile-friendly component that allows end users to select start and end dates as a range from a calendar pop-up or by entering the value directly in an HTML input text box.

With preset ranges, you can quickly select from a list of frequently used custom date ranges, saving you time and effort. Plus, instant validation errors provide real-time feedback when the chosen date range is invalid, ensuring accuracy in your selections. Easily customize your date range selections by restricting dates outside your desired ranges and specifying the minimum and maximum number of days that can be selected within that range.

Our Blazor DateRangePicker offers multilanguage calendar support, allowing you to display dates in your preferred language and format. Customize the layout from right to left and even set the first day of the week for each month to match your application's requirements. Take full control of the Blazor DateRangePicker's appearance with custom CSS styling or choose from our selection of built-in themes to match your application's design seamlessly.

Experience a highly responsive layout and optimized design, with a special full-screen mode exclusively designed for tablets and mobile devices, ensuring a smooth user experience across all devices. Accessibility is key, and that's why our DateRangePicker comes with complete WAI-ARIA support, ensuring compatibility with screen readers and assistive devices.

Additionally, navigate effortlessly through every picker element using keyboard shortcuts, making it accessible to all users. The Blazor Date Range Picker component is also available on other major web platforms: JavaScript, Angular, React, Vue, ASP.NET MVC, and ASP.NET Core.

Product overview: https://www.syncfusion.com/blazor-components/blazor-daterangepicker

Examples: https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5