Telerik blogs

During the previous episode we explored some of the controls that are being used within the CRM demo, including RadDomainDataSource, RadSparklines, RadUniformGrid, and RadCoverFlow, but don’t think we stopped there with uses for the RadControls for Silverlight suite. All of those were found within a single view of a single module, helping to better streamline development and provide the performance and functionality we are looking for, but that leaves quite a few other modules to cover. Since we’ll be seeing it pop up more than a few times, I thought it would be best to take a look at one of the more advanced uses of RadGridView that exists in the application today and to explain how the functionality built into this control is helping to enhance our application.

From the Top

The view we will be exploring today is CompanyOpportunitiesUserControl, so we’re still within the Companies module. The purpose of this control is to help display the various opportunities associated with a company along with a few visual indicators to ensure users are instantly aware of what is happening the current company.

We of course start with the initial control declaration:

<telerik:RadGridView x:Name="opportunitiesGrid" ItemsSource="{Binding OpportunitiesForCompany}"                             
                     AutoExpandGroups="True" AutoGenerateColumns="False"
                     CanUserFreezeColumns="False" RowIndicatorVisibility="Collapsed"
                     Tag="OPPORTUNITES"
                     ColumnWidth="*">

Most of the properties here should seem familiar to you, including setting AutoGenerateColumns to false (so we’ll define them manually), AutoExpandGroups to true (so everything remains visible from the outset), of course ItemsSource tells us where data is coming from, and a few lesser properties that don’t warrant discussion. Next up we know we want our data grouped in some logical format, since we’re looking at a list of opportunities we like want to group everything by the current status, ensuring the items that need the most attention will float to the top. Thankfully we have built-in functionality for that with the ability to set not only GroupDescriptors but to choose the member they will group by, the sorting direction for grouping, as well as tack on an aggregate function to see how many opportunities we have for each group at a glance. All that in only7 lines of code:

<telerik:RadGridView.GroupDescriptors>
                <telerik:GroupDescriptor Member="StatusType" SortDirection="Ascending">
                    <telerik:GroupDescriptor.AggregateFunctions>
                        <telerik:CountFunction Caption="Count:"/>
                    </telerik:GroupDescriptor.AggregateFunctions>
                </telerik:GroupDescriptor>
            </telerik:RadGridView.GroupDescriptors>

All About Columns - PriorityType

Now there are quite a few columns we aren’t doing anything exciting with (you know, just showing some data), but the column that we utilize for PriorityType takes advantage of a few of the more advancd features in RadGridView. For starters, we handle some quick formatting by overriding the HorizontalContentAlignment of the GridViewCell style:

<telerik:GridViewDataColumn.CellStyle>                     
                        <Style TargetType="telerik:GridViewCell" BasedOn="{StaticResource GridViewCellStyle}">
                            <Setter Property="HorizontalContentAlignment" Value="Center" />
                        </Style>
                    </telerik:GridViewDataColumn.CellStyle>

Next is the really interesting part – CellTemplateSelectors. Without touching a line of code-behind, RadGridView has logic baked in that allows us to not only define a conditional selector but to put all of the logic we need into a DataTemplateRule, allowing our Xaml alone to define what conditions determine which template we’ll use to display data. This is a very powerful addition to RadGridView that allows for some dynamic display options, except never once having to leave Xaml to define them. The following code shows this in action, deciding between three separate templates based on the Priority condition defined in the template rule:

<telerik:GridViewDataColumn.CellTemplateSelector>
                        <telerik:ConditionalDataTemplateSelector>
                            <telerik:DataTemplateRule Condition="Priority = 0">
                                <DataTemplate>
                                    <Path Data="M0,0 L9,0 L4.5,7 z" Height="7" Stretch="Fill" Stroke="#FF679700" VerticalAlignment="Center" UseLayoutRounding="False" HorizontalAlignment="Center" Width="9"/>
                                </DataTemplate>
                            </telerik:DataTemplateRule>
                            <telerik:DataTemplateRule Condition="Priority = 1">
                                <DataTemplate>
                                    <Rectangle Stroke="#FFDAA125" UseLayoutRounding="True" Height="7" VerticalAlignment="Center" HorizontalAlignment="Center" Width="7" RadiusX="7" RadiusY="7"/>
                                </DataTemplate>
                            </telerik:DataTemplateRule>
                            <telerik:DataTemplateRule Condition="Priority = 2">
                                <DataTemplate>
                                    <Path Data="M5,0 L10,10 L0,10 z" HorizontalAlignment="Center" Height="7" Stretch="Fill" Stroke="#FFDA2525" UseLayoutRounding="True" VerticalAlignment="Center" Width="9"/>
                                </DataTemplate>
                            </telerik:DataTemplateRule>
                        </telerik:ConditionalDataTemplateSelector>
                    </telerik:GridViewDataColumn.CellTemplateSelector>

Data Visualization in a Cell? Sure!

Moving further down our column collection we run across the Probability column. While we could write out a good deal of explanation for what this property means to our overall grid and the data we’re looking at, but it would be a much more graceful operation if we could instead bake data visualization into our grid to quickly show probability to our users. RadGridView, once again, has you covered. By replacing the default cell template with a template containing RadBulletGraph, we can quickly put some visual cues in that showcase where our data stands. Even better, this can once again be done entirely through binding so that we don’t need to write a single line of C# to get this functionality working:

<telerik:GridViewDataColumn Header="PROBABILITY" DataMemberBinding="{Binding SuccessProbability}" IsGroupable="False" Width="90">
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <telerik:RadHorizontalBulletGraph VerticalAlignment="Center" HorizontalAlignment="Left"
                                                            Minimum="0" Maximum="100"
                                                            QuantitativeScaleVisibility="Collapsed"
                                                            Background="#33D6D4D4"
                                                            Height="7" Width="100"
                                                            AutoRange="false">
                                <telerik:RadHorizontalBulletGraph.QualitativeRanges>
                                    <telerik:QualitativeRange Brush="{StaticResource AccentBrush}" Value="{Binding SuccessProbability}" />
                                </telerik:RadHorizontalBulletGraph.QualitativeRanges>
                            </telerik:RadHorizontalBulletGraph>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>

You can additionally see a video of this type of functionality in action here in the Telerik Silverlight demos.

Can Rows Have Style, Too?

Everything I’ve been talking about so far is helping to define what column we are grouping by and otherwise how we define a few specific columns, but it gets even better with the ability to conditionally select a row style based on a condition. In our case we want to see if an opportunity is overdue or not, in CRM terms an overdue opportunity can definitely equal missed profit or even losing a contact, something we definitely want to avoid in any business. The RadGridView answer to this is to allow for Xaml-defined conditional style selection. Much like in the cell style example above we can put the condition directly into the style rule, allowing us to define which modification we want to make to our GridViewRow, be it using the very apparent ValidationBrush for overdue opportunities or the standard BasicBrush for opportunities that are still in the works. I know you must be thinking it can’t be that easy, but the following 14 lines of code should prove otherwise:

<telerik:RadGridView.RowStyleSelector>
    <telerik:ConditionalStyleSelector>
        <telerik:StyleRule Condition="IsOverdue">
            <Style BasedOn="{StaticResource GridViewRowStyle}" TargetType="telerik:GridViewRow">
                <Setter Property="Foreground" Value="{StaticResource ValidationBrush}" />
            </Style>
        </telerik:StyleRule>
        <telerik:StyleRule Condition="IsOverdue = False">
            <Style BasedOn="{StaticResource GridViewRowStyle}" TargetType="telerik:GridViewRow">
                <Setter Property="Foreground" Value="{StaticResource BasicBrush}" />
            </Style>
        </telerik:StyleRule>
    </telerik:ConditionalStyleSelector>
</telerik:RadGridView.RowStyleSelector>

Easy, right? And much like with how we defined multiple different conditions for our cell before we can have as many StyleRules as we would like here to better define the visuals for our UI.

Wrapping Up

It has been quite a journey so far and we are getting close to the finish line. We’ve just released the Q3 beta for the Q3 2011 release, so everyone is heads-down busy here collecting feedback, working on the new announced and unannounced controls, and of course putting the finishing touches on this application to get it ready for publishing as a full demo on the site. With only two episodes left until the release we’ve got our work cut out for us, but rest assured as the masters of Telerik UX and UI our team has some more impressive things to showcase in the next few weeks. So grab a copy of the Q3 beta, peruse any previous episodes that you may have missed, and we’ll see you next week for Episode 13!

See you then!


About the Author

Evan Hutnick

works as a Developer Evangelist for Telerik specializing in Silverlight and WPF in addition to being a Microsoft MVP for Silverlight. After years as a development enthusiast in .Net technologies, he has been able to excel in XAML development helping to provide samples and expertise in these cutting edge technologies. You can find him on Twitter @EvanHutnick.

Related Posts

Comments

Comments are disabled in preview mode.