Lightswitch: Enable grouping on Grid

Home » Lightswitch » Lightswitch: Enable grouping on Grid

Lightswitch: Enable grouping on Grid

| Lightswitch | juni 13, 2013

Man, it has been a long time since I’ve been here… I need more time like everyone ;)

A few months ago we started a new LightSwitch project for a new ERP system and our customer was hooked on grouping inside a datagrid, so we had to find a way to make this possible in LightSwitch. We didn’t want to use some 3rd party control, so we looked inside the silverlight grid and enabled his grouping capability!
grouping LightSwitch


As you can see grouping is enabled in the standard LightSwitch grid!


Here is the code for the code behind of the screen:

  Private Sub CustomersOverview_Created()

            'toggle grouping
            m_CustomerGridGroupingHandler = New GridGrouping("CustomerGrid", Me)
        End Sub

CustomerGrid is the name of the grid.

Then create a new class GridGrouping.vb and add this:


Imports System.Windows.Data

Public Class GridGrouping
#Region "Variables"
    Private Const CONST_GROUP_TEXT As String = "[G]"
    Private m_GroupCol As New List(Of String)
    Private m_CustomGrid As DataGrid
    Private m_UsedGrouping As Boolean = False
#End Region

#Region "Constructors"
    Public Sub New(gridName As String, screen As Global.Microsoft.LightSwitch.Client.IScreenObject)
        AddHandler screen.FindControl(gridName).ControlAvailable, AddressOf GroupingGrid_ControlCreated
    End Sub
#End Region

#Region "Properties"
    Public Property HasGridUsedGrouping() As Boolean
            Return m_UsedGrouping
        End Get
        Private Set(value As Boolean)
            m_UsedGrouping = value
        End Set
    End Property
#End Region

#Region "Private help-functions"
    Private Sub GroupingGrid_ControlCreated(sender As Object, e As ControlAvailableEventArgs)
        m_CustomGrid = e.Control
        AddHandler m_CustomGrid.MouseRightButtonUp, AddressOf mouseRightButtonUp

        Me.HasGridUsedGrouping = False
    End Sub
    Private Sub mouseRightButtonUp(sender As Object, e As MouseButtonEventArgs)
        Dim src As DependencyObject = e.OriginalSource
            If TypeOf (src) Is System.Windows.Controls.TextBlock Then
                '1 - Collect Header text
                Dim colHeader As System.Windows.Controls.TextBlock = src
                Dim selectedHeaderCol As Microsoft.LightSwitch.Presentation.Implementation.Controls.ContentItemWrapperForColumnHeader = colHeader.DataContext
                Dim propHeaderCol As Microsoft.LightSwitch.Presentation.Implementation.ContentItemFromDefinition = selectedHeaderCol.ContentItem

                Dim headerText As String = propHeaderCol.Name

                '2 - If header text is a foreign entity
                If colHeader.Text.Contains(CONST_GROUP_TEXT) Then
                    colHeader.Text = colHeader.Text.Replace(CONST_GROUP_TEXT, "")
                    colHeader.Text &= CONST_GROUP_TEXT
                End If

                '3 - Apply the grouping
                Dim view As New PagedCollectionView(m_CustomGrid.ItemsSource)

                Using view.DeferRefresh()

                    For Each col As String In m_GroupCol
                        view.GroupDescriptions.Add(New PropertyGroupDescription(col))
                End Using

                m_CustomGrid.ItemsSource = view
                Me.HasGridUsedGrouping = True
            End If
        Catch ex As Exception
            Dim exeption = ex.Message
        End Try
    End Sub
#End Region

End Class

Have fun!



– Can’t get it to work with numbers…

– If paging is enabled the grouping will only work for the page you are on.


About the author

Partner @ Firmware

5 Responses to "Lightswitch: Enable grouping on Grid"
  • NESTicle 8Bit 10/03/2013

    Do you have the C# code?, i really appreciate it if you paste it, anyways, good tutorial :)

  • Drew Richardson 03/06/2014

    Hello, I tried to convert the code to C# and it seems to compile but I’m having trouble actually turning on the grouping in my grid in the _Created() method. using visual studio 2013. is there anything else I need to to do to group by “county” besides new up a new instance of GridGrouping like you have in the example?

    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Input;
    using System.Windows.Data;
    using System.Collections.Generic;
    using Microsoft.LightSwitch.Presentation;
    using Microsoft.LightSwitch.Client;
    using Microsoft.LightSwitch;
    using Microsoft.LightSwitch.Presentation.Extensions;
    using Microsoft.LightSwitch.Presentation.Implementation.Controls;
    using Microsoft.LightSwitch.Presentation.Implementation;

    namespace LightSwitchApplication.UserCode
    public class GridGrouping
    #region Variables
    //private static string CONST_GROUP_TEXT = "[G]";
    private const string CONST_GROUP_TEXT = "County";
    private List m_GroupCol;
    private DataGrid m_CustomGrid;
    private bool m_UsedGrouping;

    private IVisualCollection _collection;
    private string _dialogName;
    private string _entityName;
    private IScreenObject _screen;
    private IContentItemProxy _window;
    private IEntityObject _entity;

    #region "Constructors"
    public GridGrouping(string gridName, IScreenObject screen)
    screen.FindControl(gridName).ControlAvailable += GroupingGrid_ControlCreated;
    m_GroupCol = new List();
    m_UsedGrouping = false;
    //public GridGrouping(IVisualCollection visualCollection, string dialogName, string entityName = "")
    // _collection = visualCollection;
    // _dialogName = dialogName;
    // _entityName = ((entityName != "") ? entityName : _collection.Details.GetModel().ElementType.Name);
    // _screen = _collection.Screen;
    // _window = _screen.FindControl(_dialogName);


    #region "Properties"
    public bool HasGridUsedGrouping
    get { return m_UsedGrouping; }
    private set { m_UsedGrouping = value; }

    #region "Private help-functions"
    private void GroupingGrid_ControlCreated(object sender, ControlAvailableEventArgs e)
    m_CustomGrid = (DataGrid)e.Control;
    m_CustomGrid.MouseRightButtonUp += mouseRightButtonUp;

    this.HasGridUsedGrouping = false;
    private void mouseRightButtonUp(object sender, MouseButtonEventArgs e)
    DependencyObject src = (DependencyObject)e.OriginalSource;
    if (src is System.Windows.Controls.TextBlock)
    //1 - Collect Header text

    TextBlock colHeader = (TextBlock)src;
    ContentItemWrapperForColumnHeader selectedHeaderCol = (ContentItemWrapperForColumnHeader)colHeader.DataContext;
    ContentItemFromDefinition propHeaderCol = (ContentItemFromDefinition)selectedHeaderCol.ContentItem;

    string headerText = propHeaderCol.Name;
    //2 - If header text is a foreign entity
    if (colHeader.Text.Contains(CONST_GROUP_TEXT) )
    colHeader.Text = colHeader.Text.Replace(CONST_GROUP_TEXT, "");
    colHeader.Text += CONST_GROUP_TEXT;
    //3 - Apply the grouping
    PagedCollectionView view = new PagedCollectionView(m_CustomGrid.ItemsSource);

    using (view.DeferRefresh()) {

    foreach (string col in m_GroupCol) {
    view.GroupDescriptions.Add(new PropertyGroupDescription(col));

    m_CustomGrid.ItemsSource = view;
    this.HasGridUsedGrouping = true;

    }catch (Exception ex)
    dynamic exeption = ex.Message;



    • LaurentzT 04/28/2014

      use this code in the Created function:

      'toggle grouping
      Dim grouping = New GridGrouping("ArticlesFilterGrid", Me)

      ArticlesFilterGrid is the name of the grid

  • Drew Richardson 03/06/2014

    I see now, you must right click the column header to group. Thank you for this code. It works.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

De volgende HTML-tags en -attributen zijn toegestaan: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>