I have a grid with the definition below. I would like to use client binding given the page's requirements, but I am currently having multiple issues.
Thanks!
<ig:WebDataGrid ID="wdgPlanningAddIncreases" runat="server" AutoGenerateColumns="False" EnableClientRendering="true" AltItemCssClass="rowAlternateGrid" EnableTheming="False" ItemCssClass="rowStyleGrid" DataKeyFields="IncreaseInst" BorderColor="Gray" BorderStyle="None" DefaultColumnWidth="100px" BorderWidth="1px" CellSpacing="1" HeaderCaptionCssClass="headerGrid" ClientIDMode="Static" Height="125px" CssClass="ui-widget-content"> <Columns> <ig:BoundDataField DataFieldName="IncreaseDate" DataFormatString="{0:d}" DataType="System.DateTime" Key="IncreaseDate" CssClass="gridCenterAlign"> <Header Text="Increase Date" CssClass="gridCenterAlign" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="IncreaseTypeText" DataType="System.String" Key="IncreaseTypeText" CssClass="gridCenterAlign"> <Header Text="Increase Type" CssClass="gridCenterAlign" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="IncreaseAmount" DataType="System.String" CssClass="gridRightAlign" Key="IncreaseAmount"> <Header Text="Increase Amount" CssClass="gridRightAlign" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="IncreaseFrequencyTypeText" DataType="System.String" CssClass="gridCenterAlign" Key="IncreaseFrequencyTypeText"> <Header Text="Frequency" CssClass="gridCenterAlign" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="NewScheduledAmount" DataType="System.Decimal" DataFormatString="{0:C2}" CssClass="gridRightAlign" Key="NewScheduledAmount" Width="150px"> <Header Text="Amount" CssClass="gridRightAlign" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="IncreaseInst" DataType="System.Int32" Hidden="True" Key="IncreaseInst"> <Header Text="IncreaseInst" /> </ig:BoundDataField> </Columns> <Behaviors> <ig:Selection CellClickAction="Row" CellSelectType="Single" RowSelectType="Single" SelectedCellCssClass="rowSelectedGrid"> <SelectionClientEvents RowSelectionChanged="wdgPlanningAddIncreases_RowSelectionChanged" /> </ig:Selection> <ig:EditingCore Enabled="true"> </ig:EditingCore> </Behaviors> </ig:WebDataGrid>
Ok, I've come up with workarounds for issues 1 and 2, although I'd still be curious as to why the behavior is different with server vs client rendering.
For #1 I got rid of my ItemCssClass and AltItemCssClass and just modified ig_dataGrid.css to style the grid the way I want. I didn't want to do this as I have many UltraWebGrids that still use those css classes and didn't want to maintain two different sets of classes. But I can live with it.
For #2 I simply added a read-only property to the object I am binding to which exposes the date field as a string with the proper formatting. No big deal at all.
#3 is still a problem though. Any ideas?
Just found the answer to #3 as well in case it helps anyone out. The DefaultColumnWidth attribute causes hidden columns to be visible for client rendered grids. Taking that off and specifying the width explicitly on each column fixed the issue.
IG, you might want to log this as a minor bug.