How To: Custom percentage column with RadGridView, RadProgressBar and RadSlider for Silverlight and WPF

Thursday, May 13, 2010 by Vladimir Enchev | Comments 9

Creating custom columns for RadGridView is super easy - all you need to do is to override CreateCellElement and/or CreateCellEditElement methods and return desired controls. To illustrate this I’ve made a column with RadProgressBar for view mode and RadSlider for edit mode:
 CustomPercentageColumn

And here is the code:

public class GridViewPercentageColumn : GridViewDataColumn
{
    public override FrameworkElement CreateCellElement(GridViewCell cell, object dataItem)
    {
        var bar = cell.Content as RadProgressBar;

        if (bar == null)
        {
            bar = new RadProgressBar();
            bar.Height = 20;
            bar.SetBinding(RadProgressBar.ValueProperty, this.DataMemberBinding);
            cell.Content = bar;
        }

        return bar;
    }

    public override FrameworkElement CreateCellEditElement(GridViewCell cell, object dataItem)
    {
        var slider = new RadSlider();
        slider.Maximum = 0;
        slider.Maximum = 100;
        slider.SmallChange = 1;
        slider.LargeChange = 10;
        slider.SetBinding(RadSlider.ValueProperty, this.DataMemberBinding);
        return slider;
    }
} 

 

Enjoy!

9 Comments

  • AlexG 13 May 2010

    This is great, thanks.

    Could you also please provide a sample for binding multiple properties of a more complex custom column's control to multiple DataMembers?

    For example to bind several Slider properties to several properties of the current item?

  • Vlad 13 May 2010
    Hi Alex,

    You can create binding to any property of your object since dataItem argument is the object itself. For example:

    slider.SetBinding(RadSlider.DesiredProperty, new Binding("YourProperty")
    {
      Source = dataItem
    });
    
  • AlexG 14 May 2010
    Got it, thanks!
  • lina 16 Jun 2010
    thank you very much for your article, it's very usefull.
    please, can you tell me wat using should I use to write

    slider.SetBinding(RadSlider.DesiredProperty, new Binding("YourProperty")
    {
      Source = dataItem
    });
    
    ?
    I have an error on
    new Binding.
    The error text: The type or namespace name 'Binding' could not be found (are you missing a using directive or an assembly reference?)  

    thank you.
  • lina 16 Jun 2010
    thank you very much for your article, it's very usefull.
    please, can you tell me wat using should I use to write

    slider.SetBinding(RadSlider.DesiredProperty, new Binding("YourProperty")
    {
      Source = dataItem
    });
    
    ?
    I have an error on
    new Binding.
    The error text: The type or namespace name 'Binding' could not be found (are you missing a using directive or an assembly reference?)  

    thank you.
  • lina 16 Jun 2010
    oh, sorry for my stupid question. everything is too sinple - using System.Windows.Data;
    =)
  • Tim 02 Dec 2010
    If I have a customColumn class as below,

    Imports

     

     

    System

     

     

    Imports

     

     

    System.Net

     

     

    Imports

     

     

    System.Windows

     

     

    Imports

     

     

    System.Windows.Controls

     

     

    Imports

     

     

    System.Windows.Documents

     

     

    Imports

     

     

    System.Windows.Ink

     

     

    Imports

     

     

    System.Windows.Input

     

     

    Imports

     

     

    System.Windows.Media

     

     

    Imports

     

     

    System.Windows.Media.Animation

     

     

    Imports

     

     

    System.Windows.Shapes

     

     

    Imports

     

     

    Telerik.Windows.Controls

     

     

    Imports

     

     

    Telerik.Windows.Controls.GridView

     

     

    Imports

     

     

    System.Windows.Controls.Primitives

     

     

     

    Public

     

     

    Class CustomColumn

     

     

     

     

    Inherits GridViewDataColumn

     

     

     

     

    Public Overrides Function CreateCellElement(ByVal cell As GridViewCell, ByVal dataItem As Object) As FrameworkElement

     

     

     

     

    Dim evt As New EventPage

     

     

     

     

    Dim cb = TryCast(cell.Content, CheckBox)

     

     

     

     

    If cb Is Nothing Then

     

     

    cb =

     

    New CheckBox()

     

    cb.Height = 20

    cb.SetBinding(

     

     

    CheckBox.IsCheckedProperty, Me.DataMemberBinding)

     

    cell.Content = cb

     

     

     

    'cb.IsThreeState = True

     

     

    cell.SetBinding(

     

    GridViewCell.ValueProperty, Me.DataMemberBinding)

     

     

     

     

    Dim column = cell.ParentOfType(Of GridViewColumn)()

     

    column.CellTemplate =

     

     

    TryCast(evt.Resources("Task1CBTemplate"), DataTemplate)

     

     

     

     

    End If

     

     

     

     

    'If cb.IsChecked = "True" Then

     

     

     

     

    'cell.Background = New SolidColorBrush(Colors.Green)

     

     

     

     

    'End If

     

     

     

     

    If cell.Value = "True" Then

     

     

    cell.Background =

     

    New SolidColorBrush(Colors.Green)

     

     

     

     

    End If

     

     

     

     

     

    Return cb

     

     

     

     

    End Function

     

    End

     

     

     

    Class

     

     



    I need to be able to handle Checkbox clicked events for these columns from another class. How can I do this?
  • JTK 08 Dec 2010
    Hello, this is a great post, but could please teach us how to define our own event handlers? (eg, customcolumn_click)
  • JTK 08 Dec 2010
    Hello, this is a great post, but could please teach us how to define our own event handlers? (eg, customcolumn_click)

Add comment

  1. Formatting options
       
     
     
     
     
       
  2. (optional, emails won't be shown on public pages)
  3. (optional)