Home .NET Free grid controller for Xamarin from DevExpress

Free grid controller for Xamarin from DevExpress

by admin

In a previous article ( Features of development under Xamarin.Forms ) I talked about our experience developing for the Xamarin.Forms framework, which allows you to create native user interfaces for three mobile platforms (iOS, Android, Windows Phone) using common C# code and XAML markup.
Today let’s look at the result of our work, our first component for Xamarin.Forms – Data Grid.You can use this component for free by downloading here Along with it you get an application demonstrating the basic functionality of GridControl.
Free grid controller for Xamarin from DevExpress
So, here’s an overview of everything Grid can do right now, plus a little Getting Started.

About component

As it should be, our grid is a component for displaying and editing tabular data, which can be obtained from various types of sources.Let’s see what features it provides for fast and efficient data analysis.

Data Management

  • First, these are all the standard functions needed to work with tabular data – filtering, sorting (including sorting across multiple columns simultaneously), and grouping data.
  • Calculation of summaryinformation ( summary ) for groups and for the whole grid.The five most frequently used functions ( Sum, Average, Max, Min and Count ) are already available by default, but it is also possible to use your own algorithm for calculation.
  • All the configured grid settings can be saved (e.g. in an xml file) and then quickly recreated in the grid.
  • Adding, editing and deleting rows.
  • Ability to export data from grid with all applied settings (sorting, grouping, filters, calculated totals, etc.) in XLS, XLSX or CSV formats.

Free grid controller for Xamarin from DevExpress

Columns

  • We have implemented several standard column types for different types of data: text, numbers, dates, images, and list values ( TextColumn, NumberColumn, DateColumn, ImageColumn, PickerColumn ).For example, when a user starts editing a cell, his tablet or smartphone automatically shows an on-screen keyboard for entering text or a calendar, depending on whether he is editing string data or dates.
    By the way, for each column you can set the format of the values display. For example, available are fractional, monetary, percentage and other formats for numeric data, and special formats for dates and times.
  • If none of the standard column types fits – no problem, you can add to the grid a column defined by a template ( TemplateColumn ).
  • It is not necessary that all columns in the grid correspond to some field from the data source – the grid can contain so called unbound columns – columns whose values are calculated by a given expression based on data from other columns.
  • You can hide and show the columns again, and change their width with a corresponding gesture.

Formatting

  • Conditional formatting is the ability to format cells based on their values, selectively or automatically. For example, this functionality allows you to highlight important information or exclusion values, visualize trends, and more. Our grid supports a variety of conditional formatting options, from simply changing the font color or cell background to using color scales, icon sets, and histograms.
  • Light and dark themes are available for the grid.

Free grid controller for Xamarin from DevExpress

"Mobile Chips"

  • And of course we couldn’t help implementing such familiar to mobile device users "features" as pull-to-refresh (synchronize with the data source and refresh the grid contents by swiping a finger up and down) and load-more (the ability to load more records from the data source when the user is scrolled down to the last row of the grid).
  • Another feature familiar to iPhone and iPad users is Swipe Buttons You can easily extend the standard functionality of our grid by adding additional buttons available to the user when sliding a finger along the grid lines from left to right and vice versa from right to left.

Most of the above features are available to end users by default. For example, through built-in context menus (each of which, by the way, can be easily customized if necessary – for example, adding new items or removing existing ones) or intuitive gestures. Any of the available functions can also easily be made inaccessible to users if needed.
And developers have an API at their disposal, giving them complete freedom of action.

Creating an application

Now let’s see how to add a Grid component to an application and start working with it.
So first, let’s create a new Xamarin.Forms Portable application in Xamarin Studio (in general, Xamarin.Forms applications can be developed in Visual Studio, but in this example we will use Xamarin Studio on OS X).
Next, download the DevExpress Grid component from the Xamarin Components store and add it to Android and iOS projects. It’s very easy to do – right in Xamarin Studio.
Free grid controller for Xamarin from DevExpress
Note that when you add a component, links to all the necessary "platform" builds are automatically added to the Android and iOS projects.
Free grid controller for Xamarin from DevExpress
And here are links to common assemblies DevExpress.Mobile.Grid.v15.1.dll and DevExpress.Mobile.Core.v15.1.dll need to be added to the PCL project manually. You can find them in the directory Components/devexpress-grid-15.1.5.0/lib/pcl/ which is automatically created in the directory of the current application.
If you are working in Visual Studio and your application includes a Windows Phone project, you must also manually add assembly references to it DevExpress.Mobile.Grid.WinPhone.v15.1.dll and DevExpress.Mobile.Core.WinPhone.v15.1.dll
To initialize the grid, add the following line to the files MainActivity.cs and AppDelegate.cs (Android and iOS projects, respectively):

DevExpress.Mobile.Forms.Init();

Now you can create an instance of the grid, remembering to include the namespace DevExpress.Mobile.DataGrid
The data source for the grid is set with the property ItemsSource
By default, the grid will create columns for all fields from the data source. You can change the set or order of columns in the grid by setting them manually using the GridControl.Columns.
Here’s how you can do it using XAML markup, for example.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"x:Class="HelloGrid.MainPage"xmlns:dxg="clr-namespace:DevExpress.Mobile.DataGrid;assembly=DevExpress.Mobile.Grid.v15.1"><dxg:GridControl x:Name="grid" ItemsSource="{Binding Orders}"SortMode="Multiple" AutoFilterPanelVisibility="true"><dxg:GridControl.Columns><dxg:TextColumn FieldName="Product.Name" Caption="Product" Width="170" /><dxg:NumberColumn FieldName="Product.UnitPrice" Caption="Price" DisplayFormat="C0"/><dxg:NumberColumn FieldName="Quantity"/><dxg:NumberColumn FieldName="Total"UnboundType="Integer" UnboundExpression="[Quantity] * [Product.UnitPrice]"IsReadOnly="True" DisplayFormat="C0"/><dxg:DateColumn FieldName="Date" DisplayFormat="d"/><dxg:SwitchColumn FieldName="Shipped" /></dxg:GridControl.Columns><dxg:GridControl.TotalSummaries><dxg:GridColumnSummary FieldName="Total" Type="Sum"DisplayFormat= "Total: {0:C0}"/></dxg:GridControl.TotalSummaries></dxg:GridControl></ContentPage>

In the above code, in addition to defining grid columns, we also :

  • enabled simultaneous sorting by multiple columns,
  • added a panel to filter data by columns,
  • and set total summary to calculate the sum of the Total column.

Now, when you run the application, you get a grid like this, filled with data from a given source.
Free grid controller for Xamarin from DevExpress
You can watch a little promo video about our GridControl here :

Conclusion

There you go. We now have a grid component for the Xamarin platform in our product lineup as well. If you’re looking into developing mobile applications using Xamarin.Forms technology, then be sure to try our grid – it’s easy, it’s free and easy to integrate into your project. We’ll be happy to answer your questions and hear your suggestions in the comments to this article.

You may also like