Unlock Your Productivity Potential with DevExpress: The Unparalleled Developer Tool

Om Balakumar
Sep 11, 2024
5
mins read

What is DevExpress?

DevExpress is a suite of fully integrated and feature-rich developer tools designed to make sure your desktop, web, and mobile applications have the best user experience and deliver outstanding solutions in the shortest possible time.  
 
Several components and libraries for .NET, JavaScript, and other building platforms are developed to extend the functionality, speed, as well as appearance level of applications. It helps in developing feature-rich applications that are loaded with great performance and excellent user interfaces.

Key Components of DevExpress

  • WinForms Controls: Many controls to develop desktop applications, like grids, charts, editors, and many others.
  • WPF Controls: Advanced controls for the needs of countless applications, used in Windows Presentation Foundation applications to give them modern UI/UX.
  • ASP.NET Controls: Web controls and components for strategic development of interactive and aesthetically impressive ASP.NET-based web applications.
  • DevExtreme: Tools and JavaScript-based cross-platform web/mobile applications.
  • Reporting: A unified report server for creating, managing, and delivering interactive reports.
  • XAF: XAF is a framework that facilitates development with reusable components for typical tasks, such as data validation, security, and reporting.

Key Components of DevExpress

Why Use DevExpress?

  1. Multi-platform rich user interface components: Rich UI controls are available for Windows Forms, WPF, ASP.NET, and so on. All these controls help you build highly functional user interfaces intelligently.  
  1. Productivity Tools: DevExpress provides many productivity tools, such as CodeRush for Visual Studio. It makes code-writing easy by including code templates, refactoring, and real-time code analysis.  
  1. High Performance: DevExpress components and controls are optimized to ensure high performance so that applications run smoothly during complex data operations on large datasets.  
  1. Great Support: Developers get nice support since the team at DevExpress is responsive and knowledgeable. There is extensive documentation, tutorials, and a supporting community.  
  1. Regular Updates: DevExpress keeps updating its products with the latest available technologies, meeting the market requirements.

Features of DevExpress

DevExpress' Intuitive UI and UX

DevExpress provides a rich set of user interface components that are designed to facilitate building modern, responsive, and fully functional applications. The key components and their common usage which are used in one of our legacy applications for a client; are below:

  1. GridControl

It is a very powerful, and highly versatile .NET control used to display and manage tabular data in a .NET application. Its design allows complex data presentation to be fulfilled.

=> Suitable for viewing and managing huge volumes of data in tabular format, the component provides features such as sorting, filtering, and grouping, customizing views of the data, and so on. So it is recognized as the apt component for working with vast amounts of data.

DevExpress' Intuitive UI and UX GridControl

Usage

Dim grid As New DevExpress.XtraGrid.GridControl()  

Dim gridView As New DevExpress.XtraGrid.Views.Grid.GridView()  

grid.MainView = gridView  

grid.DataSource = myDataTable

Me.Controls.Add(grid)

  1. GridLookUpEdit

This is a versatile and powerful combo box editor which joins the purposes of a drop-down list with those of a datagrid. This combobox allows end-users to select an item from the list of values shown in a grid.

=> It delivers advanced filtering and search options that allow end users to locate and choose items with minimum effort. The control supports flexible data binding and allows an intuitive user interface with a variety of different customization and event handling options, making it applicable for complex cases of data selection.

DevExpress' Intuitive UI and UX GridLookUpEdit

Usage

' Create and configure the GridLookUpEdit control  

Dim gridLookUpEdit As New DevExpress.XtraEditors.GridLookUpEdit()

' Bind the control to the data source of your data table

gridLookUpEdit.Properties.DataSource = myDataTable gridLookUpEdit.Properties.DisplayMember = "Name"   ' Column to display  

gridLookUpEdit.Properties.ValueMember = "ID"   ' Column to use as value  

' Customize the columns in the dropdown grid Dim view As DevExpress.XtraGrid.Views.Grid.GridView = gridLookUpEdit.Properties.View view.Columns.AddField("ID").Visible = False view.Columns.AddField("Name").Visible = True view.Columns.AddField("Description").Visible = True  

' Add the GridLookUpEdit to the form  

Me.Controls.Add(gridLookUpEdit)

  1. TextEdit

A fully-featured text box for entering and displaying text in .NET applications. This editor extends the standard textbox and adds a number of features to it, thus allowing the functionality to be extended and more flexibility and customizations.

=> Improved text input with capabilities like input masking for layouted data and auto-completion for quick entries. For better look, text can have rich formatting and its appearance and in-laid buttons can be highly customized. Default validation and error notification for data-accuracy. On top of these, it has rich event-handling for easy realization of user-specified interactions.

DevExpress' Intuitive UI and UX TextEdit

Usage

' Create and configure the TextEdit control

Dim textEdit As New DevExpress.XtraEditors.TextEdit()

 

' Set properties

textEdit.Properties.Mask.EditMask = "\d{3}-\d{2}-\d{4}"  ' Mask for a Number format

textEdit.Properties.Mask.MaskType = DevExpress.XtraEditors.Mask.MaskType.RegEx

 

' Add a custom button inside the TextEdit control

Dim clearButton As New DevExpress.XtraEditors.Controls.EditorButton(DevExpress.XtraEditors.Controls.ButtonPredefines.Clear)

textEdit.Properties.Buttons.Add(clearButton)

 

' Handle the button click event to clear the text

AddHandler textEdit.Properties.ButtonClick, Sub(sender, e)

   If e.Button Is clearButton Then

       textEdit.EditValue = String.Empty

   End If

End Sub

' Add the TextEdit control to the form

Me.Controls.Add(textEdit)

  1. GridLookupEdit Search Problem

Even with all the numerous and working UI components that DevExpress has given us, there was an issue in the Legacy Application with the filter control of the grid. When the user cleared the filter on the GridControl, the grid could not refresh a second time correctly, hence leaving what the user would see in the display in the wrong state.

This led to a problem in the user experience: on removing the filter, the grid was not reflecting the actual data set, which can result in misinterpretations and, therefore, errors in data handling.

Our Solution

To address this pitfall, we implemented the fix in a step-by-step manner so that the grid would refresh correctly upon clearing of the filter.

We subscribed to the ColumnFilterChanged event. Also, we processed the MouseUp and MouseDown events to make it possible to track the user's interaction with the set grid.

There has been created a custom method — RestoreSelection — in order to save the state of selected columns. There also has been created a custom list for selected columns just during the initialization in order to store all selected columns according to the user.

Clearing the filter reset this list and called RestoreSelection, which reapplied the correct column selections.

The grid could now always show the most current data correctly and remember the user's selections, which was a much better user experience.

Share :

Join the conversation

Other blogs

Unlocking the Power of Azure App Service: A Comprehensive Guide for Developers

Azure App service is a fully managed Platform-as-a-service (PaaS) provided by Microsoft Azure. It allows Developers to easily build and deploy Web and API applications without worrying about the underlying infrastructure. It supports multiple programming languages and frameworks. It includes .NET, Java, Node.js, Python, and PHP.

Cybersecurity: The Modern-Day Reality

Today's world is an e-generation where everything-from banking to shopping-is done online. Very little exists in our life without tech, and with this trend of humans relying on the net, the cyber threat is a high chance. This blog will learn what cybersecurity is, what various threats exist today, and how we can protect ourselves in the modern world.

Challenges and the Future of Gen AI

Artificial intelligence is fast approaching a tipping point— ushering in the era of the emergence of General Artificial Intelligence, variously known as Gen AI. Its stronger potential for transforming most areas of human society, from health to transport, education, and entertainment, is indeed huge.

September 11, 2024
|
5
mins

Unlock Your Productivity Potential with DevExpress: The Unparalleled Developer Tool

Om Balakumar

What is DevExpress?

DevExpress is a suite of fully integrated and feature-rich developer tools designed to make sure your desktop, web, and mobile applications have the best user experience and deliver outstanding solutions in the shortest possible time.  
 
Several components and libraries for .NET, JavaScript, and other building platforms are developed to extend the functionality, speed, as well as appearance level of applications. It helps in developing feature-rich applications that are loaded with great performance and excellent user interfaces.

Key Components of DevExpress

  • WinForms Controls: Many controls to develop desktop applications, like grids, charts, editors, and many others.
  • WPF Controls: Advanced controls for the needs of countless applications, used in Windows Presentation Foundation applications to give them modern UI/UX.
  • ASP.NET Controls: Web controls and components for strategic development of interactive and aesthetically impressive ASP.NET-based web applications.
  • DevExtreme: Tools and JavaScript-based cross-platform web/mobile applications.
  • Reporting: A unified report server for creating, managing, and delivering interactive reports.
  • XAF: XAF is a framework that facilitates development with reusable components for typical tasks, such as data validation, security, and reporting.

Key Components of DevExpress

Why Use DevExpress?

  1. Multi-platform rich user interface components: Rich UI controls are available for Windows Forms, WPF, ASP.NET, and so on. All these controls help you build highly functional user interfaces intelligently.  
  1. Productivity Tools: DevExpress provides many productivity tools, such as CodeRush for Visual Studio. It makes code-writing easy by including code templates, refactoring, and real-time code analysis.  
  1. High Performance: DevExpress components and controls are optimized to ensure high performance so that applications run smoothly during complex data operations on large datasets.  
  1. Great Support: Developers get nice support since the team at DevExpress is responsive and knowledgeable. There is extensive documentation, tutorials, and a supporting community.  
  1. Regular Updates: DevExpress keeps updating its products with the latest available technologies, meeting the market requirements.

Features of DevExpress

DevExpress' Intuitive UI and UX

DevExpress provides a rich set of user interface components that are designed to facilitate building modern, responsive, and fully functional applications. The key components and their common usage which are used in one of our legacy applications for a client; are below:

  1. GridControl

It is a very powerful, and highly versatile .NET control used to display and manage tabular data in a .NET application. Its design allows complex data presentation to be fulfilled.

=> Suitable for viewing and managing huge volumes of data in tabular format, the component provides features such as sorting, filtering, and grouping, customizing views of the data, and so on. So it is recognized as the apt component for working with vast amounts of data.

DevExpress' Intuitive UI and UX GridControl

Usage

Dim grid As New DevExpress.XtraGrid.GridControl()  

Dim gridView As New DevExpress.XtraGrid.Views.Grid.GridView()  

grid.MainView = gridView  

grid.DataSource = myDataTable

Me.Controls.Add(grid)

  1. GridLookUpEdit

This is a versatile and powerful combo box editor which joins the purposes of a drop-down list with those of a datagrid. This combobox allows end-users to select an item from the list of values shown in a grid.

=> It delivers advanced filtering and search options that allow end users to locate and choose items with minimum effort. The control supports flexible data binding and allows an intuitive user interface with a variety of different customization and event handling options, making it applicable for complex cases of data selection.

DevExpress' Intuitive UI and UX GridLookUpEdit

Usage

' Create and configure the GridLookUpEdit control  

Dim gridLookUpEdit As New DevExpress.XtraEditors.GridLookUpEdit()

' Bind the control to the data source of your data table

gridLookUpEdit.Properties.DataSource = myDataTable gridLookUpEdit.Properties.DisplayMember = "Name"   ' Column to display  

gridLookUpEdit.Properties.ValueMember = "ID"   ' Column to use as value  

' Customize the columns in the dropdown grid Dim view As DevExpress.XtraGrid.Views.Grid.GridView = gridLookUpEdit.Properties.View view.Columns.AddField("ID").Visible = False view.Columns.AddField("Name").Visible = True view.Columns.AddField("Description").Visible = True  

' Add the GridLookUpEdit to the form  

Me.Controls.Add(gridLookUpEdit)

  1. TextEdit

A fully-featured text box for entering and displaying text in .NET applications. This editor extends the standard textbox and adds a number of features to it, thus allowing the functionality to be extended and more flexibility and customizations.

=> Improved text input with capabilities like input masking for layouted data and auto-completion for quick entries. For better look, text can have rich formatting and its appearance and in-laid buttons can be highly customized. Default validation and error notification for data-accuracy. On top of these, it has rich event-handling for easy realization of user-specified interactions.

DevExpress' Intuitive UI and UX TextEdit

Usage

' Create and configure the TextEdit control

Dim textEdit As New DevExpress.XtraEditors.TextEdit()

 

' Set properties

textEdit.Properties.Mask.EditMask = "\d{3}-\d{2}-\d{4}"  ' Mask for a Number format

textEdit.Properties.Mask.MaskType = DevExpress.XtraEditors.Mask.MaskType.RegEx

 

' Add a custom button inside the TextEdit control

Dim clearButton As New DevExpress.XtraEditors.Controls.EditorButton(DevExpress.XtraEditors.Controls.ButtonPredefines.Clear)

textEdit.Properties.Buttons.Add(clearButton)

 

' Handle the button click event to clear the text

AddHandler textEdit.Properties.ButtonClick, Sub(sender, e)

   If e.Button Is clearButton Then

       textEdit.EditValue = String.Empty

   End If

End Sub

' Add the TextEdit control to the form

Me.Controls.Add(textEdit)

  1. GridLookupEdit Search Problem

Even with all the numerous and working UI components that DevExpress has given us, there was an issue in the Legacy Application with the filter control of the grid. When the user cleared the filter on the GridControl, the grid could not refresh a second time correctly, hence leaving what the user would see in the display in the wrong state.

This led to a problem in the user experience: on removing the filter, the grid was not reflecting the actual data set, which can result in misinterpretations and, therefore, errors in data handling.

Our Solution

To address this pitfall, we implemented the fix in a step-by-step manner so that the grid would refresh correctly upon clearing of the filter.

We subscribed to the ColumnFilterChanged event. Also, we processed the MouseUp and MouseDown events to make it possible to track the user's interaction with the set grid.

There has been created a custom method — RestoreSelection — in order to save the state of selected columns. There also has been created a custom list for selected columns just during the initialization in order to store all selected columns according to the user.

Clearing the filter reset this list and called RestoreSelection, which reapplied the correct column selections.

The grid could now always show the most current data correctly and remember the user's selections, which was a much better user experience.

Other BLOGS