Cell Edit Box Appears in the wrong place, Misaligned Headers and more...

3 replies. Last post: October 24, 2012 5:02 AM by Bernard Xiang
Tags :
  • (None)
  • New Discussion
  • New Question
  • New Product Feedback
Ahmed DajaniMember

Multiple issues: Header misaligned from columns, and clicking a cell to edit sets the wrong cell to edit mode in Firefox.

I bind my friend with 80+ columns. I implemented a feature that allows the user to select which columns they want to see. In the attached images, I narrowed it down to 11 columns.

1. The first image shows the misaligned headers. Below is how I create my grid...

''' <summary>
    ''' 
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    ''' <remarks></remarks>
    Private Sub wb_PrepareDataBinding(ByVal sender As Object, ByVal e As ISNet.WebUI.WebGrid.DataSourceEventArgs) Handles wb.PrepareDataBinding
        'Me.wb.RetrieveHierarchicalStructure()
        ' make sure the codes only executed on page postback, but not an OnTheFly postback.
        'And Not Me.wb.IsFlyPostBack
        If Not Me.hfAccountId.Value.Equals("-1") Then
            Dim user As BLL.User = CType(Session(BLL.User._globalSessionName), BLL.User)
            ' clear the dropdowns and look up values
' we preload some drop downs on the grid, so this function clears them
 GridManager.ClearWebGridDropDownLists(Me.wb) ' load the grid columns
' THIS FUNCTION IS BELOW
 GridManager.LoadGridColumns(Me.hfFiscalYear.Value, Me.hfAccountId.Value, Me.wb, user) ' finally, load dropdown and look up values
' loads values to any column we set as a drop down
 GridManager.LoadWebGridDropDownLists(Me.wb, Session) ' add conditional formatting for linked lines. ' currently the grid employs an alternating row style which we would like preserve. ' just mask lines with an associated line id value with a blue font Dim linkedLineCondition As New ISNet.WebUI.WebGrid.WebGridFormatCondition linkedLineCondition.ColumnMember = "associated_line_id" linkedLineCondition.Operator = ISNet.WebUI.WebGrid.ColumnFilterType.NotIsEmpty linkedLineCondition.Name = "LinkedLine" linkedLineCondition.FormatStyle.ForeColor = Drawing.Color.Blue linkedLineCondition.TargetObject = ISNet.WebUI.WebGrid.TargetObjectType.Row Me.wb.RootTable.FormatConditions.Add(linkedLineCondition) End If End Sub

  Public Shared Sub LoadGridColumns(ByVal fiscalYear As String, ByVal accountId As String, ByRef grid As WebGrid, ByVal user As AARSBLL.User) ' clear any previously created columns grid.RootTable.Columns.Clear() grid.RootTable.SortedColumns.Clear() grid.RootTable.GroupedColumns.Clear() ' this holds the grid columns we save in our system GridColumns.gridColumnsList.Clear() ' reloadss and populates GridColumns.gridColumnsList GridColumns.Load(fiscalYear) '''' ' add account line id Dim accountLineIdCol As ISNet.WebUI.WebGrid.WebGridColumn = CreateGridColumn(GridColumns.GetColumnByName("account_line_id")) 'accountLineIdCol.Visible = False ' add account id Dim accountIdCol As ISNet.WebUI.WebGrid.WebGridColumn = CreateGridColumn(GridColumns.GetColumnByName("account_id")) 'accountIdCol.Visible = False grid.RootTable.Columns.Add(accountLineIdCol) grid.RootTable.Columns.Add(accountIdCol) ' create a webgrid column for the document placeholder Dim docColumn As New WebGridColumn docColumn.AllowSizing = ColumnSizing.No docColumn.AllowGrouping = Grouping.No docColumn.IsAutoWidth = False docColumn.Width = 25 docColumn.Name = "Attachment" 'docColumn.DataMember = "Attachment" docColumn.Caption = "" docColumn.ColumnType = ColumnType.Custom grid.RootTable.Columns.Add(docColumn) For Each col As GridColumns In GridColumns.gridColumnsList ' create the webgrid column Dim column As ISNet.WebUI.WebGrid.WebGridColumn = CreateGridColumn(col) ' i've omitted some code but colWidth and visible come from a different class. column.Width = colWidth ' we get these settings from the database column.Visible = visible ' we get these settings from the datbaase Dim columnType As Integer = GridColumns.GetColumnTypeByColumnName(column.Name) If columnType = 8 Or columnType = 9 Or columnType = 10 Or columnType = 11 Then 'e.Column.NullText = "0" column.DataFormatString = "##,###" End If ' add a hidden data member of associated_line_id to csbaline ' since the user can hide the associated_line_id column, we still need a way to get ' its value on the client side. This is how to do it. If column.Name = "CSBALine" Then column.HiddenDataMember = "associated_line_id" End If grid.RootTable.Columns.Add(column) Next ' hide these columns account_line_id and account_id grid.RootTable.Columns(0).Visible = False grid.RootTable.Columns(1).Visible = False End Sub
Private Shared Function CreateGridColumn(ByRef col As GridColumns.GridCols) As ISNet.WebUI.WebGrid.WebGridColumn
        ' initialize WebGridColumn
        Dim gridCol As New WebGridColumn
        If Not IsNothing(col) Then
            ' set the colum name, caption and data member
            gridCol.DataMember = col.ColumnName
            gridCol.Caption = col.ColumnDisplayName
            gridCol.Name = col.ColumnName
            gridCol.AllowGrouping = ISNet.WebUI.WebGrid.Grouping.No
            ' set column /cell edit types    just sets to dropdownlist, checkbox, no edit...etc.
            SetColumnType(col, gridCol)
        End If
        Return gridCol
    End Function

On the aspx page:

// do some initialization
        $(document).ready(function () {
            // resize grid to fit the page
            height = screen.height;
            width = screen.width;
            var divGrid = $('#divGrid').height(height - 200);
        });

<div id="div1" style="margin-top: 27px;"> <div id="div2" runat="server" style="background-color: Red; text-align: right; padding: 5px;"> <asp:Label ID="Label1" runat="server" /> </div> <ISWebGrid:WebGrid ID="wb" runat="server" Width="100%" Height="100%" UseDefaultStyle="true" EnableWebResources="Always" DataSourceID="odsAccountLineList" CustomSchemaRetrieval="UseWebGrid"> <RootTable GridLineStyle="NotSet" DataKeyField="account_line_id" RowHeaders="Yes"> </RootTable> <LayoutSettings DisplayDetailsOnUnhandledError="false" InProgressUIBehavior="ChangeCursorToHourGlass" StatusBarVisible="true" NewRowLostFocusAction="AlwaysUpdate" RowLostFocusAction="AlwaysUpdate" AllowColumnMove="Yes" AllowFilter="No" AllowGrouping="No" AllowSelectColumns="Yes" AllowSorting="No" GroupByBoxVisible="false" AutoHeight="false" AutoWidth="false" PagingMode="None" AllowEdit="Yes" AllowDelete="Yes" AllowMultipleSelection="Yes" UseRelativePositioning="true" CellClickAction="CellSelect" ApplyChangesKey="Enter"> <AlternatingRowStyle CustomRules="text-overflow: ellipsis; overflow-x: hidden" BackColor="LightGray" Wrap="false" Font-Size="8pt" Font-Names="Arial Monospaced"></AlternatingRowStyle> <RowStyle CustomRules="text-overflow: ellipsis; overflow-x: hidden" BackColor="White" Font-Size="8pt" Wrap="false" Font-Names="Arial Monospaced"></RowStyle> <ClientSideEvents OnRowContextMenu="wb_OnRowContextMenu" OnColumnContextMenu="wb_OnColumnContextMenu" OnEnterEditMode="wb_OnEnterEditMode" OnScroll="wb_OnScroll" OnEditKeyDown="wb_OnEditKeyDown" /> </LayoutSettings> </ISWebGrid:WebGrid>

<!-- some omitted code -->

 </div>

 </div>


I don't understand why it does this...

2. Further more, due to this issue, when I click into "Work 2BA" column as provided in the attached image, the edit activates in the same row but wrong column "Stub". I don't understand why that is happening either.

Sometimes, If I resize some columns around manully on this screen, things align properly. But that is not optimal and isn't always a sure thing either.

I am way past deadline on my project and issues like this keep coming up. Your support is much appreciated.

All times are GMT -5. The time now is 3:24 PM.
Previous Next