Intersoft Community - WebGrid Enterprise - Cell Edit Box Appears in the wrong place, Misaligned Headers and more...

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

bernard — Wed, 24 Oct 2012 05:02:33 GMT

Hi Ahmed,

Unfortunately, these issue doesn't happen in our local end. I am using XHTML doctype to replicate this issue like yours. I tried to replicate the first one, but it seems the textbox fits perfectly with WebGrid's cell. Also for the ToolTip it not went to far from the cell that I'm hovering.

For the length issue, I think the data truncated because the length of string exceed beyond database limit (like varchar(50) but there's 60 characters to update). WebGrid will throw this exception on this scenario. I also tried to update the long character column on my sample but it still can be updated either the column is narrow or wide. I attach the screenshot of my sample here. Hope this helps.

Sorry for my lack to understanding your issue but I believe this issue couldn't be replicate in our local end. It would help us if you have any simple sample that can replicate the sample in our local end, so we can identify what is the real problem of your WebGrid and we will provide you the workaround if possible. To communicate with us directly, you can call us at +62-21-4587-3998 (Indonesia) in our work time. We will gladly help you to solved your problem. or you can use our live chat in Developer Network. We serve you starting from 8am until 5pm (GMT +7).

Look forward to hear any feeedback from you so I can help you further.

Regards,
Bernard

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

adajani@najiasystems.com — Wed, 24 Oct 2012 01:40:22 GMT

Bernard,

I am using WebGerid 7 and the follwing for DocType. Please note, changing the doctype is not an option as it throws off the entire display of my application at the moment:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I tried recreating the issue in a separate project but have not been 100% successful. The behavior I was able to recreate was that double clicking or hitting the enter key in a cell to open it in edit more will render the edit text box about 10 or so pixels down from the cell I clicked.

Debugging my own project where the intial error occurs I noticed the following. I have a column that is 255 characters long, let's call it "Stub" which is a text column. It can be resized in the grid to any size. For some reason, when I hover the right adjacent column, the tool tip that comes up is of the column to the left and not the one I'm hovering over. That leads me to believe there is an issue in rendering. If I resize "Stub" to a wide enough width, it goes away. But if it's a small size where most of the data is truncated the problem occurs. I have not seen this problem occur in with any other columns.

I understand you are not able to recreate this on your end. However, it is very frustrating for me to run into different issues under different browsers. It is even more frustrating when I cannot recreate it due to some anamloy. I also understand there is a time difference between us. However, I cannot afford to wait another day on this project as my client has grown extremely impatient with us and I am already past deadline.

I need a direct way of communicating with intersoft to fix this problem ASAP please.

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

bernard — Mon, 22 Oct 2012 23:33:18 GMT

Hi Ahmed,

I couldn't replicate your issue here. I tried to replciate your sample by making my own code but it works properly. Could you tell me the doctype and the version of WebGrid did you used? If possible, could you give me a simple sample that can replicate your issue in our local end? As far as I know, the first issue only happen in newest Google Chrome, but it has been fixed by our developer in Webgrid 8. Look forward to hear any feedback from you so I can help you further.

Regards,
Bernard

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

adajani@najiasystems.com — Mon, 22 Oct 2012 19:37:29 GMT

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.