[CLOSED] Ungrouped datagrid scrolls after databinding and refresh

[gidi]

Hi,


I have the next problem. After a Gridpanel.Refresh, the grid panel scrolls up vertically. Here is a test program. Please scroll down and select. Then press the Databind button.

Gidi

Imports Ext.Net

Public Class grid2

    Inherits System.Web.UI.Page

    Dim aktGrid As New GridPanel

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        Dim aktResourceManager As New ResourceManager
        With aktResourceManager
            .ID = "rm"
            .Theme = Ext.Net.Theme.Neptune
        End With

        With aktGrid

            .ID = "mwgrid"
            .Width = 700
            .Height = 350

            .SelectionModel.Clear()
            .View.Clear()
            .Plugins.Clear()
            .ColumnModel.Columns.Clear()
            .Features.Clear()
            .Store.Clear()

            .EnableLocking = True

            Dim _Store As New Store
            _Store.ID = "store1"

            Dim _Model As New Model

            _Model.IDProperty = "Col1"

            For i As Integer = 1 To 10


                If i = 1 Then
                    _Model.Fields.Add(New ModelField("Col" & i.ToString, ModelFieldType.Int))
                Else
                    _Model.Fields.Add(New ModelField("Col" & i.ToString, ModelFieldType.String))
                End If

            Next

            _Store.Model.Add(_Model)

            _Store.DataSource = Me.Data

            .Store.Add(_Store)

            With .ColumnModel

                Dim nGridCol As New RowNumbererColumn
                With nGridCol
                    .ID = "RowNumber"
                End With

                .Columns.Add(nGridCol)

                For i As Integer = 1 To 10

                    Dim _Col As Object

                    If i = 1 Then
                        _Col = New NumberColumn
                    Else
                        _Col = New Column
                    End If

                    _Col.ID = "Col" & i.ToString
                    _Col.Text = "Col" & i.ToString
                    _Col.DataIndex = "Col" & i.ToString

                    If i = 1 Then _Col.Locked = True

                    .Columns.Add(_Col)

                Next

            End With


            Dim _RowSelModel As New RowSelectionModel

            With _RowSelModel
                .Mode = SelectionMode.Single
            End With

            .SelectionModel.Add(_RowSelModel)

            .Features.Add(New Grouping)

            Dim _View As New GridView
            _View.StripeRows = True
            _View.TrackOver = True

            .View.Add(_View)

        End With

        Dim _button As New Button("Databind")
        AddHandler _button.DirectEvents.Click.Event, AddressOf Click
        '    _button.DirectEvents.Click.Success = "App.mwgrid.getView().refresh()"
        _button.ID = "databind"

        Page.FindControl("form1").Controls.Add(aktResourceManager)
        Page.FindControl("form1").Controls.Add(aktGrid)
        Page.FindControl("form1").Controls.Add(_button)

        If Not Ext.Net.ExtNet.IsAjaxRequest Then

            aktGrid.Store(0).GroupField = "Col2"

            'Dim RM As RowSelectionModel = aktGrid.GetSelectionModel
            'If RM.SelectedRows.Count = 0 Then
            '    RM.SelectedRows.Add(New SelectedRow(5))
            '    RM.UpdateSelection()
            'End If

        End If


    End Sub

    Private Sub Click(sender As Object, e As DirectEventArgs)

        aktGrid.Store(0).DataBind()
        aktGrid.Refresh()

    End Sub


    Private ReadOnly Property Data As Object()
        Get
            Data = New Object() {New Object() {1, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {2, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {3, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", "test1"},
                New Object() {4, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {5, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {6, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {7, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {8, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {9, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {10, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", "test1"},
                New Object() {11, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", "test1"},
                New Object() {12, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {13, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", "test1"},
                New Object() {14, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {15, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {16, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {17, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {18, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {19, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {20, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", "test1"},
                New Object() {21, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", "test1"},
                New Object() {22, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {23, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", "test1"},
                New Object() {24, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {25, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {26, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {27, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {28, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {29, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {30, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", "test1"},
                New Object() {31, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", "test1"},
                New Object() {32, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {33, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", "test1"},
                New Object() {34, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {35, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {36, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {37, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {38, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {39, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {40, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", "test1"},
               New Object() {41, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"}}


        End Get

    End Property

End Class

[fabricio.murta]

Hello, Gidi!

I have just tested your code and it... well... just works!.. I'm not getting any (vertical or horizontal) scroll bars being reset when clicking to refresh data.

I even changed your test case to ensure it's pulling fresh data from the server.

By the way, would you mind changing your test cases to a single-page test case? I've been "converting" your code blocks to this full ASPX file over your previous threads, and it just makes a bit simpler to set up the test cases. I just needed to change two lines to avoid namespace conflicts and so far it's being very congruent to your test cases.

Maybe this time during the conversion I "accidentally" fixed the problem you're facing?

You can just create an empty .aspx file and paste the code below in it and the sample should work:

63387-gridPreserveScroll.aspx

<%@ Page Language="vb" %>

<!DOCTYPE html>

<script runat="server">
    Dim aktGrid As New GridPanel

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim aktResourceManager As New ResourceManager
        With aktResourceManager
            .ID = "rm"
            .Theme = Ext.Net.Theme.Neptune
        End With

        With aktGrid
            .ID = "mwgrid"
            .Width = 700
            .Height = 350

            .SelectionModel.Clear()
            .View.Clear()
            .Plugins.Clear()
            .ColumnModel.Columns.Clear()
            .Features.Clear()
            .Store.Clear()

            .EnableLocking = True

            Dim _Store As New Store
            _Store.ID = "store1"

            Dim _Model As New Model
            _Model.IDProperty = "Col1"

            For i As Integer = 1 To 10
                If i = 1 Then
                    _Model.Fields.Add(New ModelField("Col" & i.ToString, ModelFieldType.Int))
                Else
                    _Model.Fields.Add(New ModelField("Col" & i.ToString, ModelFieldType.String))
                End If
            Next

            _Store.Model.Add(_Model)
            _Store.DataSource = Me.Data
            .Store.Add(_Store)

            With .ColumnModel
                Dim nGridCol As New RowNumbererColumn
                With nGridCol
                    .ID = "RowNumber"
                End With

                .Columns.Add(nGridCol)

                For i As Integer = 1 To 10
                    Dim _Col As Object

                    If i = 1 Then
                        _Col = New NumberColumn
                    Else
                        _Col = New Column
                    End If

                    _Col.ID = "Col" & i.ToString
                    _Col.Text = "Col" & i.ToString
                    _Col.DataIndex = "Col" & i.ToString

                    If i = 1 Then _Col.Locked = True

                    .Columns.Add(_Col)
                Next
            End With

            Dim _RowSelModel As New RowSelectionModel

            With _RowSelModel
                .Mode = SelectionMode.Single
            End With

            .SelectionModel.Add(_RowSelModel)

            .Features.Add(New Grouping)

            Dim _View As New Ext.Net.GridView
            _View.StripeRows = True
            _View.TrackOver = True
            .View.Add(_View)
        End With

        Dim _button As New Ext.Net.Button("Databind")
        AddHandler _button.DirectEvents.Click.Event, AddressOf Click
        '    _button.DirectEvents.Click.Success = "App.mwgrid.getView().refresh()"
        _button.ID = "databind"

        Page.FindControl("form1").Controls.Add(aktResourceManager)
        Page.FindControl("form1").Controls.Add(aktGrid)
        Page.FindControl("form1").Controls.Add(_button)

        If Not Ext.Net.ExtNet.IsAjaxRequest Then
            aktGrid.Store(0).GroupField = "Col2"
            'Dim RM As RowSelectionModel = aktGrid.GetSelectionModel
            'If RM.SelectedRows.Count = 0 Then
            '    RM.SelectedRows.Add(New SelectedRow(5))
            '    RM.UpdateSelection()
            'End If
        End If
    End Sub

    Private Sub Click(sender As Object, e As DirectEventArgs)
        aktGrid.Store(0).DataBind()
        aktGrid.Refresh()
    End Sub

    Private ReadOnly Property Data As Object()
        Get
            Dim tme As String
            tme = DateTime.Now.ToLongTimeString()

            Data = New Object() {
                New Object() {1, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {2, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {3, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", tme},
                New Object() {4, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {5, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {6, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {7, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {8, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {9, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {10, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", tme},
                New Object() {11, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", tme},
                New Object() {12, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {13, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", tme},
                New Object() {14, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {15, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {16, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {17, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {18, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {19, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {20, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", tme},
                New Object() {21, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", tme},
                New Object() {22, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {23, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", tme},
                New Object() {24, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {25, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {26, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {27, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {28, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {29, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {30, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", tme},
                New Object() {31, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", tme},
                New Object() {32, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {33, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", tme},
                New Object() {34, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {35, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {36, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {37, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {38, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {39, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme},
                New Object() {40, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", tme},
                New Object() {41, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", tme}
            }
        End Get
    End Property
</script>
<html>
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    </form>
</body>
</html>

If this code works for you too, maybe the issue you're facing depends on the context where your code behind is inserted to. Something else that could be the problem would be the web browser.

I get you already upgraded Ext.NET from a recent post you made in the forums so that's unlikely the reason it works for me and not for you.

Looking forward to your follow-up!

[gidi]

Hi Fabrício,

Thank you but I still have the problem. For example, if I select the last data set (data row 41) and then click "Databind", the grid scrolls up, also in your example.

Ext.Net 5.3.00

[fabricio.murta]

Hello Gidi!

First and foremost, I apologize for the long delay replying your inquire. We're undergoing some maintenance and this affected the response time. It should be fixed in the next days and we'll return to quicker responses.

What I missed in the test case was the need to select a row in the grid. You have mentioned "select" but I didn't realize it was a row you were referring to and just skipped it.

I was not able to isolate the actual problem, to be honest; that'd take a bit more of investigation. But for now, perhaps you could go with this workaround. I'll use as reference line numbers on the code sample reviewed by us and posted above.

Before triggering the DirectEvent on click by the Databind button, around line 92, add the following handler:

_button.DirectEvents.Click.Before = aktGrid.ClientID & ".scrollPosWorkaround = { x: " & aktGrid.ClientID & ".getScrollX(), y: " & aktGrid.ClientID & ".getScrollY() }"

This would save the current scroll position no matter what, right before the data reloading is triggered from the server.

Then, from the server-side Click() handler, add a script to instruct the grid to get back horizontal and vertical scroll positions. That's around line 111:

aktGrid.AddScript("if (" & aktGrid.ClientID & ".scrollPosWorkaround) " & aktGrid.ClientID & ".scrollTo(" & aktGrid.ClientID & "scrollPosWorkaround.x, " & aktGrid.ClientID & ".scrollPosWorkaround.y, false);"

This would unconditionally wrap the scroll positioning to before - and after - the grid refreshing is fully resolved, and in my tests there was no "flicker" as it scrolls around, so it should be good enough for user experience.

Notice there's potential data change in the grid. The selected row could be moved outside of the view when scroll position is retained; if you want to ensure selection is visible on refresh, instead of preserving scroll, you may want to atkGrid.ClientID & ".getView().focusRow(" & atkGrid.ClientID & ".getSelection()[0]) (check if there's anything selected beforehand -- .getSelection().length > 0).

Let us know if the proposed workaround works for you, if not, we'll try to find the best solution for this case. I believe similar scrolling issues were reported in the past and were fixed, but at least three aspects of your test case makes it uniquely behave:

1. Locking columns; it is pretty complex how the grid syncs the locked/scrollable views and some edge cases are still not well handled in favor of more common uses
2. Multiline cells could take longer, in browser layout lifecycle, to be resolved, and this most likely ensues scroll position "jumps" as the grid is drawn in the browser (thus wrapping way before and way after data binding helps avoid the issue)
3. Data binding with databind+refresh is not used as often as directly binding the store with OnReadData (like the Array With Paging C# Grid Panel example, so it probably misses some special data and layout handling that OnReadData ensures. It may be worth a try to convert your pages to this approach, I believe data binding would be cleaner and more consistent, as you will not need to directly call a server method, but the store's refresh/reload methods.

Hope this helps and the additional thoughts compensate a bit for the delayed response!

[gidi]

Hi Fabrício,

I found a solution.

I select a row before the actual selection and then I select the actual row.
I think the selection is only made if the selection <> RowIndex.

Thanks for your help!

  
Dim _RowIndex As Integer
        _RowIndex = CType(aktGrid.SelectionModel.Primary, RowSelectionModel).SelectedRow.RowIndex

        Ext.Net.X.AddScript("App.GridPanel.getSelectionModel().select(" & (_RowIndex - 1).ToString & ");")
        Ext.Net.X.AddScript("App.GridPanel.getSelectionModel().select(" & (_RowIndex).ToString & ");")

Imports Ext.Net

Public Class grid2

    Inherits System.Web.UI.Page

    Dim aktGrid As New GridPanel

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        Dim aktResourceManager As New ResourceManager
        With aktResourceManager
            .ID = "rm"
            .Theme = Ext.Net.Theme.Neptune
        End With

        With aktGrid

            .ID = "mwgrid"
            .Width = 700
            .Height = 350

            .SelectionModel.Clear()
            .View.Clear()
            .Plugins.Clear()
            .ColumnModel.Columns.Clear()
            .Features.Clear()
            .Store.Clear()

            .EnableLocking = True

            Dim _Store As New Store
            _Store.ID = "store1"

            Dim _Model As New Model

            _Model.IDProperty = "Col1"

            For i As Integer = 1 To 10


                If i = 1 Then
                    _Model.Fields.Add(New ModelField("Col" & i.ToString, ModelFieldType.Int))
                Else
                    _Model.Fields.Add(New ModelField("Col" & i.ToString, ModelFieldType.String))
                End If

            Next

            _Store.Model.Add(_Model)

            _Store.DataSource = Me.Data

            .Store.Add(_Store)

            With .ColumnModel

                Dim nGridCol As New RowNumbererColumn
                With nGridCol
                    .ID = "RowNumber"
                End With

                .Columns.Add(nGridCol)

                For i As Integer = 1 To 10

                    Dim _Col As Object

                    If i = 1 Then
                        _Col = New NumberColumn
                    Else
                        _Col = New Column
                    End If

                    _Col.ID = "Col" & i.ToString
                    _Col.Text = "Col" & i.ToString
                    _Col.DataIndex = "Col" & i.ToString

                    If i = 1 Then _Col.Locked = True

                    .Columns.Add(_Col)

                Next

            End With


            Dim _RowSelModel As New RowSelectionModel

            With _RowSelModel
                .Mode = SelectionMode.Single
            End With

            .SelectionModel.Add(_RowSelModel)

            .Features.Add(New Grouping)

            Dim _View As New GridView
            _View.StripeRows = True
            _View.TrackOver = True

            .View.Add(_View)

        End With

        Dim _button As New Button("Databind")
        _button.ID = "databind"

        Page.FindControl("form1").Controls.Add(aktResourceManager)
        Page.FindControl("form1").Controls.Add(aktGrid)
        Page.FindControl("form1").Controls.Add(_button)

        If Not Ext.Net.ExtNet.IsAjaxRequest Then

            aktGrid.Store(0).GroupField = "Col2"

        End If

    End Sub

    Private Sub Click(sender As Object, e As DirectEventArgs)

        aktGrid.Store(0).DataBind()

        Dim _RowIndex As Integer
        _RowIndex = CType(aktGrid.SelectionModel.Primary, RowSelectionModel).SelectedRow.RowIndex

        Ext.Net.X.AddScript("App.GridPanel.getSelectionModel().select(" & (_RowIndex - 1).ToString & ");")
        Ext.Net.X.AddScript("App.GridPanel.getSelectionModel().select(" & (_RowIndex).ToString & ");")

    End Sub


    Private ReadOnly Property Data As Object()
        Get
            Data = New Object() {New Object() {1, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {2, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {3, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", "test1"},
                New Object() {4, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {5, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {6, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {7, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {8, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {9, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {10, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", "test1"},
                New Object() {11, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", "test1"},
                New Object() {12, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {13, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", "test1"},
                New Object() {14, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {15, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {16, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {17, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {18, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {19, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {20, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", "test1"},
                New Object() {21, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", "test1"},
                New Object() {22, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {23, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", "test1"},
                New Object() {24, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {25, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {26, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {27, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {28, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {29, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {30, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", "test1"},
                New Object() {31, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", "test1"},
                New Object() {32, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {33, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", "test1"},
                New Object() {34, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {35, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {36, "0. Feasibility Study", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {37, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {38, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {39, "I. Engineering", "test1<br/>test", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"},
                New Object() {40, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test", "test1", "test1"},
               New Object() {41, "II. Procurement", "test1", "test1", "test1", "test1", "test1", "test1<br/>test<br/>test", "test1", "test1"}}

        End Get

    End Property

End Class

[fabricio.murta]

Hello again, Gidi!

Thanks for the feedback and glad you found a solution that works for you. It might work also if you clear selection and re-select the row, but there shouldn't really incur any noticeable performance change either way.