iSeller Commerce
iSeller POS Retail
iSeller POS F&B
iSeller POS Express
Crosslight
WebUI
ClientUI
What's New
Download Trial
Web Solution
Mobile Solution
Enterprise Solution
Custom Development
Blog
Community
Latest Development Blogs
ForumPostTopic
Browse By Tag
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.
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
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.
or
Choose this if you're already a member of Intersoft Community Forum. You can link your OpenID account to your existing Intersoft Social ID.
Choose this if you don't have an Intersoft account yet. Your authenticated OpenID will be automatically linked to your new Intersoft account.
Enter your Wordpress Blogname