Blogs - ComponentArt Grid Template

DEVSHED Blog

As always, I welcome your comments!

ComponentArt Grid Template

Jan 12

Written by: Steve Gray
1/12/2011 10:35 AM

When you start a new project, it takes a little time to get the ComponentArt Grid setup. A little more for me, because I use a class to abstract some of the grid setup (it keeps the code cleaner, and the project more consistent).

So, here is the template that I copy into most projects to make things simpler for me.

We’ll need:

The .css file
The images folder
The grid class
The template aspx page, and the code behind.

I’ll not put the images here, you can get that from the ComponentArt sample code.

CSS:

Code Snippet
 .EditField {   font-family: verdana; 
  font-size: 10px; 
}
.Grid 
{ 
  border: 1px solid #57566F; 
  border-bottom: 2px solid #57566F; 
  background-color: #FFFFFF;
  cursor: pointer;
    margin: 0 auto; 
}
 
/* main style for parent and child rows*/
.Row 
{ 
  background-color: #ffffff; height:18px
}
.Row td.DataCell 
{ 
  padding: 3px; 
  padding-top: 2px; 
  padding-bottom: 1px; 
  border-bottom: 1px solid #EAE9E1; 
  font-family: verdana; 
  font-size: 10px; 
} 
 
.Row2 
{ 
  background-color: #a9c7f4;
}
.Row2 td.DataCell 
{ 
  padding: 3px; 
  padding-top: 2px; 
  padding-bottom: 1px; 
  border-bottom: 1px solid #EAE9E1; 
  font-family: verdana; 
  font-size: 10px; 
} 
.RedRow
{
    color:Red;
    }
/*handle the selected row. Copy from 'row', and edit*/
 
.SelectedRow 
{ BACKGROUND-COLOR: #90a8d0;
  height:18px
}
.SelectedRow td.DataCell
{ 
  padding: 3px; 
  padding-top: 2px; 
  padding-bottom: 1px; 
  border-bottom: 1px solid #EAE9E1; 
  font-family: verdana; 
  font-size: 10px; 
}
 
.HeadingRowFlat
{  background-color: #0865ce;
}
.HeadingRow
{  
    background-image: url(/images/menuBg.jpg); 
    height:20px
}
.HeadingCell 
{ 
  color:white;
  padding: 3px; 
  padding-top: 0px; 
  padding-bottom: 0px;  
  height:4px; padding-left:6px
}
.HeadingCellHover
{ 
    background-image: url(/images/menuBg.jpg); 
}
 
.HeadingCellActive
{ 
  background-color: #F6F6F7;  
}
 
.HeadingRow td.FirstHeadingCell
{ 
  background-image: url(/images/menuBg.jpg); 
}
 
.HeadingCellText
{
  font-family: verdana; 
  font-size: 10px; 
  font-weight: bold; 
  text-align: left;
  padding-top: 0px;
  padding-bottom: 0px;
}
 
 
 
.HeadingCell2 
{ 
  background-image: url(/images/menuBg3.jpg); 
  color:white;
  padding: 3px; 
  padding-top: 2px; 
  padding-bottom: 2px;  height:4px; padding-left:6px
}
.HeadingRow2 
{  background-image: url(/images/menuBg3.jpg); 
    height:40px;
}
 
 
 
 
.GridHeader
{
  background-image: url(/images/menuBg.jpg); 
  background-color: #8988A5; 
  border-bottom: 1px solid #57566F; 
  height: 28px;
  padding-left: 3px;
  cursor: default; 
  color: #FFFFFF;  
  font-family: verdana; 
  font-size: 10px;
  font-weight: bold;
  vertical-align: middle;
    
    }
 
.GridHeaderText
{
  color: green;
  font-family: verdana; 
  font-size: 10px;
}
 
/*used for slider grids*/
.GridFooter
{
  cursor: default; 
  padding: 5px;
  height: 45px;
  vertical-align: bottom;
}
/*used for non slider grids*/
.GridFooter2
{
  cursor: default; 
  padding: 5px;
  height: 20px;
  vertical-align: bottom;
}
 
.GridFooterText
{
  color: #000000;  
  font-family: verdana; 
  font-size: 11px;
}
 
 
 
 
 
.SortedDataCell 
{ 
  background-color: #F5F5F5; 
} 
 
 
.Row td.LastDataCell 
{ 
  background-color: #EFEFF4; 
} 
 
 
.GroupHeading
{
  color: #706F91; 
  background-color: #FFFFFF; 
  font-family: verdana; 
  font-weight: bold;
  font-size: 11px; 
  border-bottom: 2px solid #A5A4BD; 
  padding-top: 10px;
  padding-bottom: 3px;
}
 
.GroupByCell
{
  cursor: pointer;
}
 
.GroupByText
{
  color: #FFFFFF; 
  font-size: 11px;   
  font-weight: bold; 
  padding-right: 5px;
}
 
 
.SliderPopup
{
  background-color: #FFF4D7; 
  border: 1px solid #4B4B6F; 
  border-top-color: #9495A2; 
  border-left-color: #9495A2; 
  font-size: 11px; 
  width: 150px;
  height: 30px;
}
 
.ScrollBar
{
  background-image: url(/images/scroller/scroller_bg.gif); 
}
 
.ScrollGrip
{
  background-image: url(/images/scroller/scroll_gripBg.gif); 
}
 
.ScrollPopup
{
  background-color: #FFFFFF; 
  border: 1px solid #666666;
  border-right-width: 2px;
  border-bottom-width: 2px;
  height: 23px;
}
 
.IndentCell 
{
  BORDER-RIGHT: 0px;
  BACKGROUND: #a9c7f4;
  HEIGHT: 20px
}
 
.EditDataCell
{ 
  padding: 0px!important; 
  font-size:8px; 
  background-color: #E2E2E2; 
  border-width:0px!important;
} 
 
.EditDataField
{ 
  padding: 0px; 
  padding-left: 1px; 
  font-family: verdana; 
  font-size: 10px; 
  height: 13px;
  width: 98%!important; 
}
 

The Grid class:

Code Snippet
 Imports Microsoft.VisualBasic
 
Public Class ComponentArtGrid
    Function setup(ByVal grid1 As ComponentArt.Web.UI.Grid) As ComponentArt.Web.UI.Grid
        grid1.RunningMode = ComponentArt.Web.UI.GridRunningMode.Client
        grid1.CssClass = "Grid"
        grid1.ShowHeader = False
        grid1.SearchTextCssClass = "GridHeaderText"
        grid1.HeaderCssClass = "GridHeader"
        grid1.ImagesBaseUrl = "~/images/"
        grid1.TreeLineImagesFolderUrl = "~/images/lines/"
        grid1.TreeLineImageWidth = "20"
        grid1.TreeLineImageHeight = "19"
        grid1.IndentCellWidth = "22"
        grid1.LoadingPanelClientTemplateId = "LoadingFeedbackTemplate"
 
 
        'paging
        grid1.PagerTextCssClass = "GridFooterText"
        grid1.FooterCssClass = "GridFooter2" 'this is for non-slider footers
        grid1.PageSize = "15"
        grid1.PagerStyle = ComponentArt.Web.UI.GridPagerStyle.Numbered 'or buttons or slider
        grid1.PagerButtonWidth = "41"
        grid1.PagerButtonHeight = "22"
        grid1.SliderHeight = "20"
        grid1.SliderWidth = "150"
        grid1.SliderGripWidth = "9"
        grid1.SliderPopupOffsetX = "20"
        grid1.SliderPopupClientTemplateId = "SliderTemplate"
        grid1.AllowMultipleSelect = False
        'grid1.PagerImagesFolderUrl = "~/images/pager/"
 
        'grouping
        'grid1.GroupingNotificationTextCssClass = "GridHeaderText"
        grid1.GroupingNotificationText = "Drag a column to this area to group by it."
        'grid1.GroupingPageSize = "5"
        grid1.PreExpandOnGroup = "true"
        grid1.GroupBySortAscendingImageUrl = "group_asc.gif"
        grid1.GroupBySortDescendingImageUrl = "group_desc.gif"
        grid1.GroupBySortImageWidth = "10"
        grid1.GroupBySortImageHeight = "10"
        grid1.GroupByCssClass = "GroupByCell"
        grid1.GroupByTextCssClass = "GroupByText"
        'grid1.LoadingPanelPosition = ComponentArt.Web.UI.GridRelativePosition.MiddleCenter
 
 
        'grid level 1
        With grid1.Levels(0)
            .AllowGrouping = True 'false
            .ShowTableHeading = False
 
            .ShowSelectorCells = True ' "false"
            .RowCssClass = "Row"
            .ColumnReorderIndicatorImageUrl = "reorder.gif"
            .DataCellCssClass = "DataCell"
            .HeadingCellCssClass = "HeadingCell"
            .HeadingCellHoverCssClass = "HeadingCellHover"
            .HeadingCellActiveCssClass = "HeadingCellActive"
            .HeadingRowCssClass = "HeadingRow"
            .HeadingTextCssClass = "HeadingCellText"
            .SelectedRowCssClass = "SelectedRow"
            .GroupHeadingCssClass = "GroupHeading"
            .SortAscendingImageUrl = "asc.gif"
            .SortDescendingImageUrl = "desc.gif"
            .SortImageWidth = "10"
            .SortImageHeight = "10"
            .EditCellCssClass = "EditDataCell"
            .EditFieldCssClass = "EditDataField"
 
 
        End With
        Return grid1
    End Function
End Class
 

The .aspx template:

Code Snippet
 <%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="EditLink.aspx.vb" Inherits="TEMPLATE_ComponentArt_Grid_EditLink" title="Untitled Page" %>
<%@ Register Assembly="ComponentArt.Web.UI" Namespace="ComponentArt.Web.UI" TagPrefix="ComponentArt" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:Label ID="lblMessage" runat="server"></asp:Label><br />
    
                    <ComponentArt:Grid ID="Grid1" 
                        runat="server">
                        <Levels>
                            <ComponentArt:GridLevel 
                                DataKeyField="intUserID" >
                                <Columns>
                                    <ComponentArt:GridColumn DataCellServerTemplateId="LinkButtonTemplate" />
                                    <ComponentArt:GridColumn DataField="intUserID" AllowGrouping="true" HeadingText="User ID" />
                                    <ComponentArt:GridColumn DataField="vchrUserName" HeadingText="User Name" />
                                </Columns>
                            </ComponentArt:GridLevel>
                        </Levels>
                        <ServerTemplates>
                            <ComponentArt:GridServerTemplate Id="LinkButtonTemplate">
                                <template>
                                    <asp:LinkButton ID="LinkButton1" Runat="server" text="GO" CommandName="Grid1_ItemCommand" CommandArgument='<%# Container.DataItem("intUserID") %>' />
                                </template>
                            </ComponentArt:GridServerTemplate>
                        </ServerTemplates>
                    </ComponentArt:Grid>
 
</asp:Content>
 

The code behind:

Code Snippet
 Imports System.Data
 
Partial Class TEMPLATE_ComponentArt_Grid_EditLink
    Inherits inheritedpage
 
 
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 
 
        'set up the grid
        Dim oGrid As New ComponentArtGrid
        Me.Grid1 = oGrid.setup(Me.Grid1)
        Grid1.Width = "300"
 
        bindgrid()
    End Sub
    Sub bindgrid()
        Grid1.DataSource = dynData.SPs.FP_SOP10100_SEL_byID("", 0, AppUser.strLastDB).getTable
 
        Grid1.DataBind()
 
    End Sub
 
    Protected Sub Grid1_ItemCommand(ByVal sender As Object, ByVal e As ComponentArt.Web.UI.GridItemCommandEventArgs) Handles Grid1.ItemCommand
        'there are three ways to get data from the grid:
 
        '1: in the Command Argument
        Dim intUserID As Integer
        Dim LinkButton1 As New LinkButton
        'get a reference to the control
        LinkButton1 = e.Control
        'get the command argument
        intUserID = LinkButton1.CommandArgument
 
        '2 from  a field in the grid
        Dim strSopnumber As String
        strSopnumber = e.Item("sopnumbe")
 
        '3 if the field is in a template, we have to search for it
        Dim lblSoptype As Label
        lblSoptype = CType(Me.Grid1.FindControl("lblSoptpe"), Label)
        Dim intSoptype As Int16
        intSoptype = lblSoptype.Text
 
 
 
    End Sub
End Class
 

Trackback Print

Tags:

Categories:

Location: Blogs Parent Separator

DEVSHED Blogs Child Separator

ComponentArt

0 comment(s) so far...

As always, I welcome your comments!