I have a simple Aikido Webdatagrid that handles a variety of database tables and so the column names are unknown. I have the grid set up to autogenerate the columns so how can I set the pixel width to a default value? The reason is that without each and every column's width specified, I cannot view the right-most columns as they are chopped off because that's the only way to activate the horizontal scrollbar for the grid.
<ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="350px" Width="100%" DataKeyFields="ROWNUM" EnableDataViewState="True" AltItemCssClass="coloredRow">
<Behaviors>
<ig:Sorting SortingMode="Multi">
</ig:Sorting>
<ig:Selection CellClickAction="Row" RowSelectType="Single" Enabled="False">
</ig:Selection>
<ig:ColumnResizing>
</ig:ColumnResizing>
<ig:VirtualScrolling>
</ig:VirtualScrolling>
</Behaviors>
<AjaxIndicator Enabled="True" BlockArea="Control" ImageUrl="~/ig_res/Default/images/ig_progressIndicator.gif" />
</ig:WebDataGrid>
Hey,
Since you are autogenerating the columns,they do not get placed in the grid's columns collection on the server. So you can not individually set the width. If you are using 9.2, you can set the DefaultColumnWidth property to a value, say "100px", and each column should get that width. I hope this helps.
regards,
David Young
Interesting, because I was able to set the width programmatically as follows:
WebDataGrid1.DataSource = ds
WebDataGrid1.DataBind()
For i As Integer = 0 To WebDataGrid1.Columns.Count - 1
WebDataGrid1.Columns(i).Width = Unit.Pixel(250)
WebDataGrid1.Columns(i).Header.CssClass = "gridHeader"
Next
However, even though the column width did change, the all important horizontal scrollbar DID NOT appear as expected. Furthermore, the attempt at adding the css class appears to not be working or perhaps in conflict with another css property that seems to be controlling the background color of the header text.
...and yes I am using 9.2. Where is the DefaultColumnWidth? Is it in the markup or do I set it via codebehind? Example please.
I worked out an even better solution that provides me much more control over the columns by creating generic bound columns in the code behind. I can then manipulate all of the attributes available to a traditional bound column. Here is my code (thank you to Sarita from Infragistics for her help!):One thing on my wish list is -- I removed row highlighting in order to allow text selecting for copy/paste by my users. It would be nice to have both working. Maybe even with an embedded radio button to select a row would be nice if anybody wants to share how to accomplish both requirements.
<ig:WebDataGrid ID="WebDataGrid1" AutoGenerateColumns="False" runat="server" Height="350px" Width="100%" DataKeyFields="ROWNUM" EnableDataViewState="True">
<ig:VirtualScrolling AverageRowHeight="15">
<ig:ColumnMoving DragStyle="Follow">
</ig:ColumnMoving>
---------------------------------------------------------------------
My Search button click event executes this code…
ds = getSomeData()
CreateBoundGridColumns(ds.Tables(0))
Private Sub CreateBoundGridColumns(ByVal dt As DataTable)
Me.WebDataGrid1.Columns.Clear()
For Each dCol As DataColumn In dt.Columns
Dim boundF As New BoundDataField
boundF.Key = dCol.ColumnName
boundF.Header.Text = dCol.ColumnName
boundF.DataFieldName = dCol.ColumnName
If boundF.Key.ToUpper() = "ROWNUM" Then
'boundF.Hidden = True
'boundF.Header.CssClass = "hide"
'Use a rownum column instead of the row selector when using Virtual Scrolling
boundF.Header.Text = "" 'blank out the header text
boundF.Width = Unit.Pixel(50)
boundF.Header.CssClass = "gridHeader"
boundF.CssClass = "rownum"
Else
boundF.Width = Unit.Pixel(150)
End If
Me.WebDataGrid1.Columns.Add(boundF)
End Sub
.gridHeader
{
height:18px !important;height:26px; /* The latter for IE6 */
font-size:11px;
padding:3px;
color:#165B83;
text-align:center;
vertical-align:middle;
font-weight:normal;
white-space:nowrap;
background: transparent url(/ig_res/Default/images/igg_header.gif) repeat-x;
}
.gridHeader img, .grid img {margin:0;}
.rownum{font-weight:bold;text-align:center;}
.WebDataGrid1.Columns.Clear()
I'm surprised this code changed the width. If you really are having the columns autogenerated, WebDataGrid1.Columns.Count will be 0, so there shouldn't be setting of the width of header css class.
And I see that you found DefaultColumnWidth, but I'll answer that for anyone else who might stumble here. The property is available right on the data grid, on the aspx or in code. So, this.WebDataGrid1.DefaultColumnWidth.
-Dave
I found the DefaultColumnWidth
<
ig:WebDataGrid ID="WebDataGrid1" DefaultColumnWidth="150px"
It worked and now I have my horizontal scrollbar!!!