Windows 10 UWP

DataGrid Alternatives in UWP

If you’re coming from Windows Forms or WPF, odds are you’ll have used DataGrid or DataGridView. Neither is available in UWP. The following are the alternatives available to you. EDIT – note that I’ll be listing free alternatives. There are other paid alternatives out there.

EDIT 25 June 2017

I wrote this post back in Oct 2015, back when Windows Phone was still a thing.

MS still doesn’t have a DataGrid control in UWP. The simple answer to readers today is to just get the Telerik DataGrid control. It’s free. From what I understand, it’s part of the Windows Template Studio.

Why DataGrid?

They are great for display a lot of information in a grid format. It also allows in-grid editing, sorting, grouping and more.

DataGrid example
Example DataGrid from an MSDN Blog

Why No DataGrid in UWP?

This control hasn’t been around since Windows 8 was introduced. The reason for this is that Windows 8 was all about creating touch-based applications. DataGrid isn’t touch friendly.

UWP is different Windows 8/8.1 app development. UWP is about catering to all types of devices and different inputs. That includes desktop (large screen) and mouse users. I had hoped there would be something like DataGrid but still nothing.

The following are the options I found. Note that I strongly recommend option 3.

Option 1: MyToolkit.Extended

This is available as a NuGet package within Visual Studio. It’s also an open-source project (here’s the link to GitHub). For the grid you want the MyToolkit.Extended nuget package.

Sample grid using MyToolkit.Extended
Sample grid using MyToolkit.Extended. Photo taken from StackOverflow

I liked that it was open-source, you could sort columns and do other basic things like set alternate row colours.

In the end I found it was like a slightly more intelligent GridView. It’s strength is primary displaying static content. It was possible to add editable cells, such as a Textbox, but it was problematic (i.e. the sort had issues) and it didn’t look as good. There was also a whole host of other features I wanted.

That being said, it is open source so you can edit/extend it as you see fit.

Summary: I found it good for displaying dataand sorting columns but that’s about it. I could use this for simple scenarios.

Option 2: Syncfusion

There are several control vendors with DataGrids. Syncfusion is one of them. As I write this, they have a collection of 35 controls for UWP.

The reason I suggest them is that they have a “community edition” licence – much like Visual Studio – meaning it’s free for teams of 5 or less and with revenues under $1M USD. Otherwise it’s $400 USD (as I write this).

The Syncfusion demo application for their DataGrid
The Syncfusion demo application for their DataGrid

The grid is impressive. It does pretty much everything I could ask for and plenty more. Using it and integrating it was a piece of cake, especially with all the same code.

In the sample application their DataGrid control is marked as being in preview. The one worrying problem I noticed was that it was slow in loading the first time. It’s only a brief, but noticeable, lag on my relatively grunty Surface Pro 3. I could see in the VS2015 performance tool that there was a clear uptick in RAM usage. This made me wonder: how would it work on a lower-end device? And do I want to use this when it’s only in Preview? Perhaps these two issues will get ironed out over time.

Another issue is that it is closed source. After spending years relying on third party controls, only to find out they have bugs in specific situations, I have to admit I feel a bit wary of committing to use it – especially as I’m not paying for it and may not have access to support or future upgrades in the future.

Summary: fantastic product and I’m sure they will iron out the speed issue in a future release. But keep in mind it’s closed source and has limitations on number of users, etc.

Option 3: Use a Different Design

When I was initially researching a solution I saw this second answer on a StackOverflow article. To quote from Jim O’Neil:

You don’t want to ‘lift and shift’ paradigms you’ve used before, but rather embrace the unique features of the platform, like its touch first nature, to rethink the navigation and build a new type of application

If we have this in mind, how should we approaching our problem?

Our primary goal with UWP should be to have content that can laid out / workable across different screen sizes and inputs types. A DataGrid, with lots of columns, will suck on small screens and those primarily requiring touch.

Why do we currently use the DataGrid? The functionality we want is:

  • Handle a lot of data
  • Enable adding
  • Enable editing / deleting of specific data (once the user finds the record(s) they want)
  • Have some form of functionality to enable a basic search

A better solution is to look at how you can use UI Guides for GridView and ListView. A good model is the Master-Detail model you see in the People application.

The People app in Windows 10 (aka Contacts)
The People app in Windows 10 (aka Contacts)

In the picture above, you’ll see the area in white. This is the “Master” section containing a GridView, which shows a summary of the data (the person’s name and photo). To help you search for data you have a Search field as well as a SemanticZoom. There is also an Add button. On a small screen, this Master pane could be displayed by itself.

On the right hand side is the Detail section where you can view all the information, edit the info and more. This too can be displayed by itself on a small screen. Best of all: we’re free of the limitations of displaying and/or editing data within a cell.

Using this Master-Detail model we can meet all our basic requirements, be touch friendly and support different screen sizes.

This model can also be extended or tweaked to meet additional requirements. For example: if you want your customers to easily view People by their home country, you could have an option in the master pane to group by Country and change the item view so it clear indicates the country and maybe even displays a flag by their name.

Before you say “…. but what about situation X where I use DataGrid?”, ask yourself why you want to use this model, how users primarily use your grid and if it really makes sense to just display all this info to users?

Conclusion

There are options available if you want something akin to a DataGrid but, before you use one, seriously consider an alternative design. I’m a long-time user of DataGrid and the like and, the more I think about it, the more I think I should be moving on.

5 comments

  1. Oh yeah, point number three, for sure. This is why there are no spreadsheet applications on Windows Phone. Oh wait, there are. Well, at least there are no spreadsheet applications from Microsoft, because they are totally against having a grid on Windows Phone. Oh wait, they have Excel. Are you delusional Jim O’Neil or just lazy? What is the real reason there is no data grid control in Windows Phone 8?

    Liked by 1 person

    1. If you want to create a spreadsheet, use one of the other controls above, buy a high quality grid control or build your own. Yep, Excel is on the phone… and the UX (user experience) sucks. It’s only really good for simple work or read-only operations. On your Windows Phone, notice how MS didn’t put all your contacts in a “spreadsheet”?

      The vast majority of people using DataGrid, etc are not writing spreadsheets. They’re using them to display information in a grid, possibly allow in-cell editing, etc. Essentially copying the “spreadsheet” UX pattern. That’s the problem. We, as devs, are poor at UI/UX design. We resort to copying existing patterns we’ve seen. That works really well in a lot of cases but with UWP we have new challenges: touch friendly, performance, has to work on vastly different resolutions, etc. The classic DataGrid or “spreadsheet” is terrible for lower res, touch friendly scenarios.

      So no, #3 is not lazy. Rather the opposite. It’s really hard coming up with alternative UX patterns, especially in the world of UWP.

      Like

  2. I understand why this approach is good for small screens, but I think it’s a mistake to force this touch friendly paradigm to desktop applications where screen is sufficiently large and user interacts with mouse and keyboard. It makes it really hard to develop any desktop oriented LOB application with UWP.

    Liked by 1 person

  3. And one other thing to consider now, and that is the upcoming HoloLens. The small-ness of the phone compared to the desktop is nothing compared to the large-ness of the holo-space to the desktop. I think tables/Grids will be quite important, and the UWP is what is used for building HoloLens apps.

    Like

Comments are closed.