UI Toolkit
Rock has a collection of fantastic UI controls that will help you develop blocks much quicker than if you has to write everything from scratch.
The Rock Grid makes it a breeze to quickly display your entity lists.
Set the Grid's Actions.IsAddEnabled to true to enable the Add icon on the grid toolbar. Add your custom handler to the grid's Actions.AddClick hander as shown in the example below.
This generates a native XLSX file. If the grid's Caption property is set it will be used for the filename. There is a property on the grid ShowActionExcelExport that allows the developer to disable the display of the icon.
Set the Grid's Actions.IsExcelExportEnabled to false to prevent the default Export to Excel functionality.
Tap into the grid's drag-and-drop reordering capabilities by binding your custom reorder handler to the grid's GridReorder event handler. Since the Rock.Data.Service has a Reorder() method, any entity service class that inherits from Service<t> can easily have its items reordered.
protected override void OnInit( EventArgs e )
{
// ...
gMyGrid.GridReorder += gMyGrid_GridReorder;
gMyGrid.Actions.IsAddEnabled = true;
gMyGrid.Actions.AddClick += gMyGrid_Add;
}
void gMyGrid_GridReorder( object sender, GridReorderEventArgs e )
{
// ...
Service.Reorder( mylist, e.OldIndex, e.NewIndex, CurrentPersonId );
BindGrids();
}
void gMyGrid_Add( object sender, EventArgs e )
{
ShowEdit( 0 ); // a method that builds a form for your entity/item
}In addition to the three classes (grid-table, table-bordered, and table-stripped; see Bootstrap Base CSS Tables) used to style the Grid, there are two other classes (full and light) which are used based on the grid type (GridDisplayType).
Additionally, setting the DisplayType property of the grid to "Light" will create a simplified grid without a heavy header or footer.
<Rock:Grid ID="gMarketingCampaignAudiencesPrimary" runat="server" DisplayType="Light">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Primary Audience" />
<Rock:DeleteField OnClick="gMarketingCampaignAudiences_Delete" />
</Columns>
</Rock:Grid>
The Rock Grid uses bootbox which uses Twitter Bootstrap Modals for things like delete confirmation, etc. Therefore theme makers will be able to style the modals to suite their needs.
The GridFilter provides a standard mechanism for filtering your grid and for retaining the values a user sets in the filter.
An excerpt from the Financial.ascx block.
<Rock:GridFilter ID="rFilter" runat="server" OnApplyFilterClick="rFilter_ApplyFilterClick">
<Rock:DateTimePicker ID="dtStartDate" runat="server" SourceTypeName="Rock.Model.FinancialTransaction, Rock"
PropertyName="TransactionDateTime" LabelText="From Date" />
<Rock:DateTimePicker ID="dtEndDate" runat="server" SourceTypeName="Rock.Model.FinancialTransaction, Rock"
PropertyName="TransactionDateTime" LabelText="To Date" />
<Rock:LabeledTextBox ID="txtFromAmount" runat="server" LabelText="From Amount"></Rock:LabeledTextBox>
<Rock:LabeledTextBox ID="txtToAmount" runat="server" LabelText="To Amount"></Rock:LabeledTextBox>
<Rock:LabeledTextBox ID="txtTransactionCode" runat="server" LabelText="Transaction Code"></Rock:LabeledTextBox>
<Rock:LabeledDropDownList ID="ddlFundType" runat="server" LabelText="Fund Type" />
<Rock:LabeledDropDownList ID="ddlCurrencyType" runat="server" LabelText="Currency Type" />
<Rock:LabeledDropDownList ID="ddlCreditCardType" runat="server" LabelText="Credit Card Type" />
<Rock:LabeledDropDownList ID="ddlSourceType" runat="server" LabelText="Source Type" />
</Rock:GridFilter>
Notice how the GridFilter's ApplyFilterClick event tied to an event handler in the code behind. By calling the filter's SaveUserPreference(string key, string value) method with the value of each field, Rock will store the user's preferences for re-use next time they use the filter/grid on this page.
protected void rFilter_ApplyFilterClick( object sender, EventArgs e )
{
rFilter.SaveUserPreference( "From Date", dtStartDate.Text );
rFilter.SaveUserPreference( "To Date", dtEndDate.Text );
rFilter.SaveUserPreference( "From Amount", txtFromAmount.Text );
rFilter.SaveUserPreference( "To Amount", txtToAmount.Text );
// ...
rFilter.SaveUserPreference( "Source", ddlSourceType.SelectedValue != All.Id.ToString() ?
ddlSourceType.SelectedValue : string.Empty );
BindGrid();
}The next time the user views the grid on that page, the filter grid will display the user's previously stored preferences.
Normally, this is handled automatically by the framework, however in certain cases the value that is stored is a primary key which is not suitable for displaying. In this case, you can handle the GridFilter's DisplayFilterValue event in your code. For example, suppose we've got a dropdown list of SourceTypes in our filter. To display the name of the selected item in the dropdown list we must convert the stored key value to the proper name as shown in this code snippet from the Financial.ascx.cs block.
Note: remember to wire up the OnDisplayFilterValue event handler inline or in the code behind of your OnInit() method.
protected void rFilter_DisplayFilterValue( object sender, Rock.Web.UI.Controls.GridFilter.DisplayFilterValueArgs e )
{
switch ( e.Key )
{
// Handle each case as needed
// ...
case "Source":
int definedValueId = 0;
if ( int.TryParse( e.Value, out definedValueId ) )
{
var definedValue = DefinedValueCache.Read( definedValueId );
if ( definedValue != null )
{
e.Value = definedValue.Name;
}
}
break;
}
}Notice how the e.Value is parsed and used to fetch the corresponding DefinedValue from the cache. If it was found, the e.Value is set to its Name property.