When a view is set in ComponentOne Olap for Lightswitch and user right clicks on the grid, a Details View dialog is shown. As per your project’s requirement, you may want to change the look and feel of the table show. For instance, you may want to hide a column, change grid styles, etc.

For such modifications, we need to suppress the default dialog and make our own customized dialog.

In this blog, we’ll discuss steps to create a custom DetailsView dialog. For our implementation, we will hide few columns (Quantity, ID) in the grid.

Creating Olap Screen

Lets start by creating our datatable. We will use Product table as data source with Id, ProductName, Category, UnitPrice and Quantity fields.

Add a new Olap screen for this data. Now we’ll write some code for setting the custom DetailView dialog in AnalyzeProducts_Created event. To do this, select the screen layout, go to the upper right, open the “Write Code” dropdown, and select AnalyzeProducts_Created.

In the code behind, add the following statements so that you can access Olap controls later :

using C1.Silverlight.Olap;
using C1.Silverlight.FlexGrid;
using C1.Olap;

namespace LightSwitchApplication
{
    public partial class AnalyzeProducts
    {
        C1OlapPage _olapPage;
        C1OlapGrid _olapGrid;
        C1OlapEngine _olapEngine;
        partial void AnalyzeProducts_Created()
        {
        }
    }
}

Note : If the C1Silverlight namespaces are not automatically available then, you will need to manually add reference. For this, switch to File View, open the Client project, and add a reference to C1.Silverlight.dll, C1.Silverlight.Data.dll, C1.Silverlight.Olap.4.dll.

Add the following code to you AnalyzeProducts_Created() function :

partial void AnalyzeProducts_Created()
{
    IContentItemProxy _olapPageProxy = this.FindControl("C1OlapPage");
    _olapPageProxy.ControlAvailable += new EventHandler<ControlAvailableEventArgs>(_olapPageProxy_ControlAvailable);
}
void _olapPageProxy_ControlAvailable(object sender, ControlAvailableEventArgs e)
{
    // get OlapPage to work with
    _olapPage = e.Control as C1OlapPage;

    // prevent default details (i.e. with ID) from being displayed
    _olapPage.ShowDetailOnRightClick = false;

    // get OlapGrid to work with
    _olapGrid = _olapPage.OlapGrid;

    // get OlapEngine to work with
    _olapEngine = _olapPage.OlapEngine;

    // add event to display new details
    _olapGrid.MouseRightButtonUp += (_s, _e) =>
    {
        // get OlapGrid information for the mouse position
        C1.Silverlight.FlexGrid.HitTestInfo hti = _olapGrid.HitTest(_e.GetPosition(_s as C1OlapGrid));

        // make sure we are working with a cell
        if (hti.CellType == C1.Silverlight.FlexGrid.CellType.Cell)
        {
            // get data using OlapEngine
            var data = _olapEngine.GetDetail(_olapEngine.OlapTable.Rows[hti.Row], _olapEngine.OlapTable.Columns[hti.Column].ColumnName);

            // create new details window and pass it data
            DetailsWindow details = new DetailsWindow(data);

            // shows new window
            details.Show();
        }
    };
}

Custom Details View Dialog

Now let’s create the DetailsWindow. To do this, we will need to be in File View. To begin, go to the Client project, right-click it, select “Add New Item”, and a dialog will appear. From the dialog, select Silverlight Child Window and name it “DetailsWindow”.

In this child window, we will place a C1Flexgrid for Silverlight control and then handle the hiding of columns at the grid level :

<c1:C1FlexGrid x:Name="detailsGrid" AutoGenerateColumns="False" ItemsSource="{Binding}">
    <c1:C1FlexGrid.Columns>
        <c1:Column Binding="{Binding Path=ID}" Header="Id" Visible="False" />
        <c1:Column Binding="{Binding Path=ProductName}" Header="ProductName" />
        <c1:Column Binding="{Binding Path=Category}" Header="Category" />
        <c1:Column Binding="{Binding Path=UnitPrice}" Header="UnitPrice" />
        <c1:Column Binding="{Binding Path=Quantity}" Header="Quantity" Visible="False" />
    </c1:C1FlexGrid.Columns>
</c1:C1FlexGrid>

Switch to the code behind and add a new constructor to accept data:

//create new constructor to accept a parameter (i.e. data from HitTest() method)
public DetailsWindow(object Data)
{
      InitializeComponent();
      detailsGrid.DataContext = Data;
}

Default Behavior of the Details view dialog is :

New Customized DetailView looks as follows :

In the end, I would like to thank Raleigh Johnson for suggesting the approach for creating custom dialog in Olap.