ComponentArt Index

Steve Gray — Tue, 07 Apr 2009 02:04:00 GMT

Grid
Iterating through Selected Items

Template code for creating a grid, using a class

Steve Gray — Fri, 28 Nov 2008 15:31:00 GMT

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; 
}

Populating a ComponentArt grid using linq

Steve Gray — Tue, 30 Sep 2008 17:17:00 GMT

Here is a thread that I had with Component Art support. I have not tested this - I have largely dropped my testing of Linq to sql because of this issue. I have problems with Janus Winform grids also.

Sirs:

I'm trying to start using linq in a web form.

I can't get a grid to bind to a resultset that comes from a stored procedure.

The error that I'm getting is 'Object reference not set to an instance of an object' when databinding.

I see a post that mentions converting the ISINGLERESULT into a Datatable, but can't figure that out.

Can you help?

Hello,

That error isn't what I'd expect to see- are you able to bind this linq query to a standard datagrid?

The error we're aware of is that the grid can't enumerate through a linq data source; thus, something like this:

Grid1.DataSource = from person in people select person; Grid1.DataBind();

Fails with a nullreferenceexception. To workaround that, you could do

this:

var linq = from person in people select person; Grid1.DataSource = linq.ToList(); Grid1.DataBind();

So in your code, set your results to a var type, then cast the type to one the grid can enumerate (a list as above, or a DataTable, etc).

Stephen Hatcher

Developer Support Manager

ComponentArt Inc.

Sirs:

Your examples are using standard linq to sql access, I'm using the *stored

procedure* access.

Scott Gu demonstrates this here

http://weblogs.asp.net/scottgu/archive/2007/08/16/linq-to-sql-part-6-ret

riev

ing-data-using-stored-procedures.aspx

All my data access is via stored procs.

I'd be happy with the '.tolist' approach, but I can't get a stored procedure result to do that. Can you help?

Hello,

I see. Unless I'm mistaken (and I very well could be), this article shows you how to do that. Unfortunately it's all images, but take a look at this one:

http://www.scottgu.com/blogposts/linqsproc1/step12.jpg

You can see him casting his proc to a list there. In a previous example, you can see him set the results of his proc to the var type as well:

http://www.scottgu.com/blogposts/linqsproc1/step6.jpg

So you could use that, then use ToList on the var. Does that make sense?

Stephen Hatcher

Developer Support Manager

ComponentArt Inc.