Building Microsoft® Office® Inspired apps is a snap with DXperience 12.2. From Reporting Controls, Data Grids and Tree Lists to Schedulers,Ribbons and App Skins, the DXperience 12.2 offers a complete set of user interface controls to get you from A to Z in no time.
In previous sections we created a Project Manager App where we can display and manage different kinds of projects and their inter dependencies.
In this article let’s add the ability to track project Tasks. We’ll display and manage our tasks in a similar way that you may find in Microsoft Outlook and we’ll be using a Data Grid Control to do this with stunning results.
Form Layout and Data Binding
Let’s start by dropping a Data Grid Control from the Toolbox, onto a form.
After the Gridis aligned properly, bind it to the same appointmentsBindingSource that the schedulerStorage component is using. This way the data will be in sync.
This is really all there is to it. Very simple. Notice after you run the app that not only did the Grid pick all the columns, defined in the data source, but it also correctly determined the in-place editor for each column type.
Let's customize the Grid even further to take advantage of many other in-place editors that are shipped DXperience 12.2.
Task Grid Customization
You might have noticed the Outlook Style Grouping box when you ran the app. This building functionality could be turned on or off by OptionsView.ShowGroupPanel property.
While in design mode, drag out columns off the grid that you don’t want to be shown by default and leave only: Start Date, End Date, Description, Resource Id, Percent Complete, and Custom Field 1. The remaining columns would still be available in the Column Customization window.
To change an in-place editor for a cell or to assign a new one, simply select a column at design time, and choose an editor from the drop down list. The property that we would need for this is ColumnEdit.
For example, the Percent Complete could be shown with a visual progress indicator, so we’ll assign a ProgressBar editor for that column.
To make it look like this:
Similarly, for the Resource Id column, let’s assign a LookupEdit, this will allow us to map the Id of the resource stored in the database to its readable description.
Once the LookUpEdit editor is created, set its DataSource property to resourcesBindingSource.
DisplayMember to Description - this is the column value that will show and the ValueMember property to Id.
Finally, change the column's caption to Resource and let's see how this looks at runtime.
What's Next?
There is few little tweaks that we still want to make to the app, stay tune for the next part.