[CLOSED] Problem with locked Column

[gidi]

Hi,

I have problems with locked columns. Normally I use the following script to display tooltips. This works very well until I lock the first column with Column.Locked.

  
 Dim _ToolTip As ToolTip = aktSiteManager.WebObjekte("GridToolTip_1")
                                _ToolTip.Target = "={#{" & aktID & "}.getView().el}"
                                _ToolTip.Delegate = ".x-grid-cell"
                                _ToolTip.TrackMouse = False
                                _ToolTip.Listeners.Show.Handler = "onShow(this, #{" & aktID & "});"

Dim _Script As String = " <script> "
                                _Script &= "      var onShow = function (toolTip, grid) { "
                                _Script &= "        var view = grid.getView(),"
                                _Script &= "        store = grid.getStore(),"
                                _Script &= "        record = view.getRecord(view.findItemByChild(toolTip.triggerElement)),"
                                _Script &= "        column = view.getHeaderByCell(toolTip.triggerElement),"
                                _Script &= "        data =  record.get(column.dataIndex);"
                                _Script &= "        toolTip.update(data);"
                                _Script &= "};"
                                _Script &= "   </script>"

Here is the script error

"view.findItemByChild is not a function"

I hope you can help me

Thanks
Gidi

[fabricio.murta]

Hello, Gidi!

Hard to tell without a test sample we could run, but it looks like you should use the grid's normal/locked views when the grid has locking enabled, that's probably why view.findItemByChild() occasionally becomes undefined.

Hope this helps!

[gidi]

Thanks for your answer. Here is my example.

If you comment out the line " If i = 1 Then _Col.Locked = True" then everything works and the tooltip is shown.

Gidi

Imports Ext.Net

Public Class grid

    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

        Dim _ToolTip As New ToolTip
        _ToolTip.ID = "mwtooltip"
        _ToolTip.Target = "={#{mwgrid}.getView().el}"
        _ToolTip.Delegate = ".x-grid-cell"
        _ToolTip.TrackMouse = False
        _ToolTip.Listeners.Show.Handler = "onShow(this, #{mwgrid});"

        Dim _Script As String = " <script> "
        _Script &= "      var onShow = function (toolTip, grid) { "
        _Script &= "        var view = grid.getView(),"
        _Script &= "        store = grid.getStore(),"
        _Script &= "        record = view.getRecord(view.findItemByChild(toolTip.triggerElement)),"
        _Script &= "        column = view.getHeaderByCell(toolTip.triggerElement),"
        _Script &= "        data =  record.get(column.dataIndex);"
        _Script &= "        toolTip.update(data);"
        _Script &= "};"
        _Script &= "   </script>"

        Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "onShow", _Script)



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

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


            Dim _Model As New Model

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

            _Store.Model.Add(_Model)

            _Store.DataSource = Me.Data

            .Store.Add(_Store)

            With .ColumnModel

                For i As Integer = 1 To 10
                    Dim _Col As New Column
                    _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)

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

            .View.Add(_View)

        End With


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


    End Sub

    Private ReadOnly Property Data As Object()
        Get

            Data = New Object() {New Object() {"1", "test1", "test1", "test1", "test1", "test1", "test1", "test1", "test1", "test1"},
            New Object() {"2", "test1", "test1", "test1", "test1", "test1", "test1", "test1", "test1", "test1"},
            New Object() {"3", "test1", "test1", "test1", "test1", "test1", "test1", "test1", "test1", "test1"},
            New Object() {"4", "test1", "test1", "test1", "test1", "test1", "test1", "test1", "test1", "test1"},
            New Object() {"5", "test1", "test1", "test1", "test1", "test1", "test1", "test1", "test1", "test1"},
            New Object() {"6", "test1", "test1", "test1", "test1", "test1", "test1", "test1", "test1", "test1"},
            New Object() {"7", "test1", "test1", "test1", "test1", "test1", "test1", "test1", "test1", "test1"},
            New Object() {"8", "test1", "test1", "test1", "test1", "test1", "test1", "test1", "test1", "test1"},
            New Object() {"9", "test1", "test1", "test1", "test1", "test1", "test1", "test1", "test1", "test1"},
            New Object() {"10", "test1", "test1", "test1", "test1", "test1", "test1", "test1", "test1", "test1"},
            New Object() {"11", "test1", "test1", "test1", "test1", "test1", "test1", "test1", "test1", "test1"}}

        End Get

    End Property

End Class

[fabricio.murta]

Hello again, Gidi!

Thanks for the test case, it really looks like we'd need to handle the specific Normal and Locked views. In my initial evaluation of the problem and solutions, I see most of the related client-side aspects are private or undocumented. We'll need a bit more of time to check whether there's a proper solution relying on public and documented client-side code to avoid the issue. The extra effort is usually worth it for new versions won't break your code without notice if only the public API is referenced.

We'll get back to you soon!

[fabricio.murta]

Hello once again, Gidi!

Sorry for the delay, we've checked your test case, and it seems the following is enough to get the tooltip working:

Change your test case line 26 to read:

_Script &= "        var view = grid.lockedGrid ? grid.lockedGrid.getView() : grid.getView(),"

That is, check if the grid has locking enabled and, if so, get the locked grid's view reference instead of the main view one. Please be aware this code relies on undocumented Sencha Ext JS (client-side) code, and the steps to get the locking state of a grid might change in the future. Unfortunately I couldn't find a more "supported" way to do this with what's documented on Sencha API, so you may want to leave an upgrade note to double check whether that code still works between Ext.NET upgrades, especially between major versions.

The following documentation entry explains why the grid behaves so differently when locking is enabled: Ext.panel.Table.enableLocking config option. Basically it turns the grid into two grids laid in a hBox (horizontal, boxed) layout, with the left (usually) locked grid, and right (again, usually) the scrollable one.

Even though we get both the locked and normal grid instances, binding to either grid's view works in the test case provided, as both are "different views" to the "same data set" (records).

This locking design is there for some time now, and it seems to be reasonably safe to rely on the suggested code. It's just that we cannot guarantee a next version would break this without any notice or changelog entry about it.

Notice that, ironically, the documented config, enableLocking didn't manifest in your test case as true (App.mwgrid.enableLocking => undefined), so it was not a reliable way to tell whether the grid had locking enabled in this special case, when one or more columns has locked = true.

Hope this helps!

[gidi]

thanks, that helps me a lot!

[fabricio.murta]

Glad it helped, thanks for the feedback!