[ASP.NET/VB]select button niet werkzaam in GridView

[Sensei_D]

Ik zit een beetje te spelen met de GridView uit .NET en kom een raar probleem tegen.
Eerst maar wat code:

De GridView zelf:

code:

        <asp:GridView ID="GamesGridView" runat="server" AllowPaging="True" AllowSorting="True" GridLines="None"
            AutoGenerateColumns="False" DataKeyNames="GameID" DataSourceID="odsGamesGrid" Width="100%">
            <Columns>
                <asp:BoundField DataField="Title" HeaderText="Game titel" SortExpression="Title" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Button runat="server" style="display:none" CommandName="Select" Text="Select" ID="btnSelect" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

De OnRowCreated eventhandler

code:

    Protected Sub GamesGridView_RowCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
        Handles GamesGridView.RowCreated
        Dim onMouseOverStyle As String = "this.className='hovered'; this.style.cursor='hand';"
        Dim onMouseOutStyle As String = "this.className='@CssClass';"
        Dim rowCssClass As String = String.Empty
        If e.Row.RowType = DataControlRowType.DataRow Then
            Select Case e.Row.RowState
                Case DataControlRowState.Alternate
                    rowCssClass = GamesGridView.AlternatingRowStyle.CssClass
                Case DataControlRowState.Edit
                    rowCssClass = GamesGridView.EditRowStyle.CssClass
                Case DataControlRowState.Normal
                    rowCssClass = GamesGridView.RowStyle.CssClass
                Case DataControlRowState.Selected
                    rowCssClass = GamesGridView.SelectedRowStyle.CssClass
            End Select
            If Me.GamesGridView.EditIndex = -1 Then
                e.Row.Attributes.Add("onClick", "document.getElementById('" & e.Row.FindControl("btnSelect").ClientID & "').click();")
            End If
            e.Row.Attributes.Add("onmouseover", onMouseOverStyle)
            e.Row.Attributes.Add("onmouseout", onMouseOutStyle.Replace("@CssClass", rowCssClass))
        End If
    End Sub

Het bovenstaande maakt het mogelijk een GridViewRow te "highlighten" en daarnaast is het hiermee mogelijk op een GridViewRow te klikken om deze zo te selecteren.

Het highlighten werkt dus, maar het klikken wordt niet correct afgehandeld.
Nu heb ik uiteraard mijn code al gedebugged () en ben ook achter de oorzaak van de foute afhandeling. Wanneer je namelijk in de HTML output kijkt, zie je dat elke button van elke GridViewRow dezelfde ID heeft, namelijk btnSelect.

Ik snap alleen niet waarom dit is, want als ik i.p.v. de OnRowCreated event het OnRowDataBound gebruik is de HTML output wel correct; elke button van elke GridViewRow heeft een uniek ID. Ik kan echter dat event niet gebruiken voor wat ik wil, omdat mijn routine gerunt dient te worden bij elke "refresh" van de GridView.

Volgens gebruik ik wel het juiste event, maar waarom gaat het dan toch mis?

[Sensei_D]

Ik kan me niet voorstellen dat nooit iemand dergelijke funtionaliteit heeft ingebouwd in de GridView dus daarom even een subtiel schopje

[mulder]

Waarom hang een javascript onclick aan die button? Dan zou die nog altijd een postback moeten doen ipv een click()

[ Voor 3% gewijzigd door mulder op 12-07-2006 10:10 ]

[PhysicsRules]

Je moet even zoeken op de EditCommand en ItemCommand events van datagrids. Misschien helpt je dat.

[Sensei_D]

Don Facundo schreef op woensdag 12 juli 2006 @ 10:10:
Waarom hang een javascript onclick aan die button? Dan zou die nog altijd een postback moeten doen ipv een click()

Hiermee selecteer ik de rij. Onderhuids simuleer ik dus een click op mijn select button; de standaard selectbutton binnen de GridView

[Sensei_D]

PhysicsRules schreef op woensdag 12 juli 2006 @ 10:12:
Je moet even zoeken op de EditCommand en ItemCommand events van datagrids. Misschien helpt je dat.

Hmm, ItemCommand is misschien wel een optie, zal daar vanavond es naar kijken...

[Sensei_D]

Hmm het itemCommand/rowCommand event werkt niet, omdat ik dan niet bij de GridViewRow kan komen, zoals ik nu wel doe.

[Daspeed]

Kun je niet iets fixen met GetPostBackEventReference ?

[Sensei_D]

DrClearbottom schreef op woensdag 12 juli 2006 @ 22:39:
Kun je niet iets fixen met GetPostBackEventReference ?

Ik heb niet het idee dat het aan de afhandeling van de knop ligt, het gaat namelijk daarvoor al mis. Bij het binden van de javascript-onclick event aan de knop staat een clientID in het .NET-OnRowCreated event. Deze is op dat moment altijd "btnSelect" terwijl dat een unieke naam hoort te zijn, wat die wel is als ik mijn routine niet toepas...

[Mastermind]

Ik heb een soortgelijk iets wel eens gemaakt, alleen ik kan geen VB lezen, rare onleesbare syntax.

In de grid de Property editor, dan een Button column maken.
CommandName doe je Select en ButtonType pushbutton.

De event kun je dan oproepen in de ItemCommand van de gridview

C#:

private void MyGrid_ItemCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
    if (e.CommandName.Equals("Select"))
                {
    int buttonIndex =  e.Item.ItemIndex;
                //etc.
    }
}

[ Voor 112% gewijzigd door Mastermind op 13-07-2006 11:09 ]

[Sensei_D]

Mastermind schreef op donderdag 13 juli 2006 @ 10:50:
Ik heb een soortgelijk iets wel eens gemaakt, alleen ik kan geen VB lezen, rare onleesbare syntax.

In de grid de Property editor, dan een Button column maken.
CommandName doe je Select en ButtonType pushbutton.

De event kun je dan oproepen in de ItemCommand van de gridview

C#:

private void MyGrid_ItemCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
    if (e.CommandName.Equals("Select"))
                {
    int buttonIndex =  e.Item.ItemIndex;
                //etc.
    }
}

offtopic:
Mja ik vind chinees ook rare onleesbare syntax, omdat ik de taal niet ken

Maar ik zal je suggestie vanavond ff proberen. Ik denk echter dat dat hele ItemCommand event bij mij niet wordt getriggerd, omdat de selectbutton verkeerd wordt gerenderd en daardoor een verkeerde postback genereerd, maar ik heb hoop

[Sensei_D]

OK, ik kom nu in de buurt volgens mij, maar nu heb ik een nieuw probleem.
Eerst maar weer wat code:

code:

    Protected Sub GamesGridView_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
        Handles GamesGridView.RowDataBound
        If e.Row.RowType = DataControlRowType.DataRow Then
            If Me.GamesGridView.EditIndex = -1 Then
                e.Row.Attributes.Add("onClick", "document.getElementById('" & e.Row.FindControl("btnSelect").ClientID & "').click();")
            End If
        End If
    End Sub
    
    Protected Sub StyleMyRow(ByVal row As GridViewRow)
        Dim onMouseOverStyle As String = "this.className='hovered'; this.style.cursor='hand';"
        Dim onMouseOutStyle As String = "this.className='@CssClass';"
        Dim rowCssClass As String = String.Empty
        If row.RowType = DataControlRowType.DataRow Then
            Select Case row.RowState
                Case DataControlRowState.Alternate Or 3
                    rowCssClass = GamesGridView.AlternatingRowStyle.CssClass
                Case DataControlRowState.Edit
                    rowCssClass = GamesGridView.EditRowStyle.CssClass
                Case DataControlRowState.Normal
                    rowCssClass = GamesGridView.RowStyle.CssClass
                Case DataControlRowState.Selected
                    rowCssClass = GamesGridView.SelectedRowStyle.CssClass
            End Select
            row.Attributes.Add("onmouseover", onMouseOverStyle)
            row.Attributes.Add("onmouseout", onMouseOutStyle.Replace("@CssClass", rowCssClass))
        End If
    End Sub
    
    Protected Sub GamesGridView_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) _
        Handles GamesGridView.SelectedIndexChanged
        For Each row As GridViewRow In CType(sender, GridView).Rows
            StyleMyRow(row)
        Next
    End Sub

    Protected Sub GamesGridView_RowCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
        Handles GamesGridView.RowCreated
        StyleMyRow(e.Row)
    End Sub

Ik heb nu iets meer eventhandlers. Deze hoeven jullie niet te debuggen, het is puur ter illustratie en zal bijdragen aan de uiteindelijke oplossing in dit topic.

Het gaat nu dus mis in de "StyleMyRow" routine; wanneer ik een normale row selecteer werkt hij perfect, maar wanneer ik een "alternate" row selecteer gebeurt er imho iets raars...

Wanneer ik een alternate row selecteer en ik debug mijn routine dan wordt de rowState van die row "3" Dat is raar, want als ik in VS.NET 2K5 de enum "DataControlRowState" aanroep zie ik geen "3"
Naja ok, wanneer ik er genoegen mee neem en "3" ook afvang zoals te zien in regel 16 dan wordt deze regel niet afgelopen

Ik kan het probleem gewoon niet beter omschrijven, maar dat komt misschien omdat het al wat laat is voor me Hopelijk snapt iemand wel wat ik bedoel...

[edit]
Hmm, inmiddels werkt het, maar ik kan het niet verklaren, hopelijk is er iemand die dat wel kan, want wat is die "3" hieronder

code:

    Protected Sub StyleMyRow(ByVal row As GridViewRow)
        Dim onMouseOverStyle As String = "this.className='hovered'; this.style.cursor='hand';"
        Dim onMouseOutStyle As String = "this.className='@CssClass';"
        Dim rowCssClass As String = String.Empty
        If row.RowType = DataControlRowType.DataRow Then
            Select Case row.RowState
                Case DataControlRowState.Alternate
                    rowCssClass = GamesGridView.AlternatingRowStyle.CssClass
                Case DataControlRowState.Edit
                    rowCssClass = GamesGridView.EditRowStyle.CssClass
                Case DataControlRowState.Normal
                    rowCssClass = GamesGridView.RowStyle.CssClass
                Case DataControlRowState.Selected
                    rowCssClass = GamesGridView.SelectedRowStyle.CssClass
                Case 3
                    rowCssClass = GamesGridView.SelectedRowStyle.CssClass
            End Select
            row.Attributes.Add("onmouseover", onMouseOverStyle)
            row.Attributes.Add("onmouseout", onMouseOutStyle.Replace("@CssClass", rowCssClass))
        End If
    End Sub

Zo werkt ie dus helemaal!

[ Voor 27% gewijzigd door Sensei_D op 13-07-2006 23:12 ]

[Sensei_D]

Even ter afsluiting van dit topic:

code:

namespace System.Web.UI.WebControls {
    [FlagsAttribute]
    public enum DataControlRowState {
        Normal = 0,
        Alternate = 1,
        Selected = 2,
        Edit = 4,
        Insert = 8
      }
}

Blijkbaar is 3 "Selected" en "Alternate" tegelijkertijd, op zich vrij logisch