I create a lot of Componentart grids, and it's convenient to have a sample of code that I can use to keep from writing repetive code. I use a class to popultate a lot of the grid members. That way if you have more than one grid in a project it's that much code you don't have to write, and you have some consistancy
so...
Code for the class
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"
'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"
'19,20
'grid1.LoadingPanelClientTemplateId = "LoadingFeedbackTemplate"
'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"
End With
Return grid1
End Function
End Class
Code for the grid itself
<ComponentArt:Grid ID="Grid1"
runat="server">
<Levels>
<ComponentArt:GridLevel
DataKeyField="intUserID" >
<Columns>
<ComponentArt:GridColumn DataField="intUserID" AllowGrouping="true" HeadingText="User ID" />
<ComponentArt:GridColumn DataField="vchrUserName" HeadingText="User Name" />
</Columns>
</ComponentArt:GridLevel>
</Levels>
</ComponentArt:Grid>
Code to use the class
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)
'set the grid properties
Grid1.Width = "300"
bindgrid()
End Sub
Sub bindgrid()
Grid1.DataSource = NGB.SPs.Sop10100SelByID("", 0).GetDataSet.Tables(0)
Grid1.DataBind()
End Sub
CSS code
.EditField { font-family: verdana;
font-size: 10px;
}
.Grid
{
border: 1px solid #57566F;
border-bottom: 2px solid #57566F;
background-color: #FFFFFF;
cursor: pointer;
}
/* 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;
}
.HeadingCell
{
color:white;
padding: 3px;
padding-top: 2px;
padding-bottom: 2px; height:4px; padding-left:6px
}
.HeadingRowFlat
{ background-color: #0865ce;
}
.HeadingRow
{ background-image: url(/images/menuBg2.jpg);
}
.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/grid_headerBg.gif);
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;
}
.HeadingCellHover
{
background-color: #F6F6F7;
}
.HeadingCellActive
{
background-color: #F6F6F7;
}
.HeadingRow td.FirstHeadingCell
{
background-image: url(/images/header_bg.gif);
}
.HeadingCellText
{
font-family: verdana;
font-size: 10px;
font-weight: bold;
text-align: left;
padding-top: 3px;
padding-bottom: 5px;
}
.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;
background-color: #E2E2E2;
border-width:0px!important;
}
.EditDataField
{
padding: 0px;
padding-left: 1px;
font-family: verdana;
font-size: 10px;
height: 13px;
width: 98%!important;
}