locked
Stop AutoPostback on Gridview cell click when ModelPopUpExtender opens RRS feed

  • Question

  • User-2054142495 posted

    I have a a Gridview which displays records (training) of various individuals! When you click on the various cells an AJAX ModelPopUpextender opens showing further details relating to that particular training sets!

    The problem I'm having is that when I click on any of the GridView cells and the ModelPopUp opens the Gridview PostsBack. Id like to be able to click on any cell and get the same functinality without the Gridview posting back?

            <asp:GridView ID="GridView1" runat="server" CssClass="rounded-corner" OnPageIndexChanging="GridView1_PageIndexChanging" OnRowDataBound="GridView1_RowDataBound" OnRowCommand="GridView1_RowCommand" DataKeyNames="setName" AutoGenerateColumns="true" >
                <Columns>  
                    <asp:buttonfield commandname="CellClick" runat="server" visible="false"></asp:buttonfield>   
                </Columns>
            </asp:GridView>
    
            <asp:Button runat="server" ID="btnShowModalPopup" Style="display: none" />
            <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnShowModalPopup"
                    PopupControlID="divPopUp" PopupDragHandleControlID="panelDragHandle" DropShadow="False" />
                <br />
                <div class="popUpStyle2" id="divPopUp" style="display: none;">
                    <asp:Panel runat="Server" ID="panelDragHandle" CssClass="drag">
                        Hold here to Drag this Box
                    </asp:Panel>
                    <asp:DetailsView ID="DetailsView1" runat="server" Height="100%" Width="220px" BorderStyle="None" DefaultMode="ReadOnly" GridLines="None" AutoGenerateRows="false"  >
                        <Fields>
                        <asp:TemplateField HeaderText="ID:" HeaderStyle-Font-Bold="true"  ItemStyle-VerticalAlign="Top">
                            <ItemTemplate>
                                <asp:Label ID="lblTrainingId" runat="server" Text='<%# Bind("tt_id") %>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Set Name:" HeaderStyle-Font-Bold="true" ItemStyle-VerticalAlign="Top">
                            <ItemTemplate>
                                <asp:Label ID="lblSetName" runat="server" Text='<%# Bind("setName") %>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Date:" HeaderStyle-Font-Bold="true" ItemStyle-VerticalAlign="Top">
                            <ItemTemplate>
                                <asp:Label ID="lblTDate" runat="server" Text='<%# Bind("t_date", "{0:dd/MM/yy}") %>' />
                            </ItemTemplate>
                        </asp:TemplateField>
    
                        <asp:TemplateField HeaderText="Surname:" HeaderStyle-Font-Bold="true" ItemStyle-VerticalAlign="Top">
                            <ItemTemplate>
                                <asp:Label ID="lblSurname" runat="server" Text='<%# Bind("surname") %>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Outcome:" HeaderStyle-Font-Bold="true" ItemStyle-VerticalAlign="Top">
                            <ItemTemplate>
                                <%--<asp:Label ID="lblOutcome" runat="server" Text='<%# Bind("o_id") %>'></asp:Label>--%>
                                <asp:Image ID="imgStatus" runat="server" ImageUrl='<%# GetImage(CType(Eval("o_id"),Integer)) %>'  />
                            </ItemTemplate>
                        </asp:TemplateField>
                        
                        </Fields>
                    </asp:DetailsView>
                    <asp:Button ID="btnClose" runat="server" Text="Close" />
                    <br />
                </div>
       
      
     Protected Overrides Sub Render(ByVal writer As HtmlTextWriter)
            For Each r As GridViewRow In GridView1.Rows
                If r.RowType = DataControlRowType.DataRow Then
                    For columnIndex As Integer = 0 To r.Cells.Count - 1
                        Page.ClientScript.RegisterForEventValidation(r.UniqueID + "$ctl00", columnIndex.ToString())
                    Next
                End If
            Next
            MyBase.Render(writer)
        End Sub
    
        Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
            If e.Row.RowType = DataControlRowType.DataRow Then
                Dim _singleClickButton As LinkButton = DirectCast(e.Row.Cells(0).Controls(0), LinkButton)
                Dim _jsSingle As String = ClientScript.GetPostBackClientHyperlink(_singleClickButton, "")
                ' Add events to each editable cell
                For columnIndex As Integer = 2 To e.Row.Cells.Count - 1
                    ' Add the column index as the event argument parameter
                    Dim js As String = _jsSingle.Insert(_jsSingle.Length - 2, columnIndex.ToString())
                    ' Add this javascript to the onclick Attribute of the cell
                    e.Row.Cells(columnIndex).Attributes("onclick") = js
                    ' Add a cursor style to the cells
                    e.Row.Cells(columnIndex).Attributes("style") += "cursor:pointer;cursor:hand;"
                Next
            End If
        End Sub
    
        Protected Sub GridView1_RowCommand(ByVal sender As Object, ByVal e As GridViewCommandEventArgs)
            If e.CommandName.ToString() = "CellClick" Then
             
                Dim selectedRowIndex As Integer = Convert.ToInt32(e.CommandArgument.ToString())
                Dim selectedColumnIndex As Integer = Convert.ToInt32(Request.Form("__EVENTARGUMENT").ToString())
                Dim ServiceNo As String = GridView1.HeaderRow.Cells(selectedColumnIndex).Text.Remove(4)
                Dim TrainingId As String = GridView1.Rows(selectedRowIndex).Cells(selectedColumnIndex).Text.Remove(0, 1)
    
                If TrainingId = "nbsp;" Or TrainingId = String.Empty Then
                Else
                    ModalPopupExtender1.Show()
                    'Get the Distinct users in the roles nlAdmin and nlUser
                    Dim strQuery As String = "SELECT string goes here)"
                    Dim cmd As New SqlCommand(strQuery)
                    cmd.Parameters.AddWithValue("@tt_id", TrainingId.ToString)
                   
                    Dim dt As DataTable = GetData(cmd)
    
                    DetailsView1.DataSource = dt
                    DetailsView1.DataBind()
                End If
            End If
        End Sub



    Monday, February 17, 2014 6:45 AM

Answers

  • User-2054142495 posted

    Hi,

    Thanks a lot for all the help  however I fould out what the problem was!

    As you can see the code created worked well but i was having touble with postback.  Previously trying to use the trigger I was trying to use the buttonfield 

    <asp:ButtonField CommandName="CellClick" runat="server" Visible="false"  ></asp:ButtonField>

    I was unable to achieve what i wanted this way as the trigger wouldn't work directly with a buttonfield.  I also tried to change the buttonfield to a linkbutton in a templatfield but this produced the wrong outcomes!

    However the solution WAS to use asyncpostbacktrigger! Instead of trying to find a way of using (finding) the buttonfield ID (controlid) and the eventname (CellClick) on the buttonfield I used the gridview GridView1 as the controlid and rowcommand as the eventname

     <Triggers>
    <asp:asyncpostbacktrigger controlid="GridView1" EventName ="RowCommand" />
    
    </Triggers>

    also using

    CancelControlID="btnClose"

    on the Modelpopupextender to close the popup.

    Works a charm.

    Once again thanks for your help

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 20, 2014 12:01 PM

All replies

  • User2117486576 posted

    You will need to change your design a little.  With your current design the postback is required in order to populate the fields in the popup.  If you want to eliminate a trip to the server, then these fields need to be populated when the GrdiView is data bound.  You can do this by using template columns and declaring the Panel control which will be used for the popup and adding a ModalPopupExtender.  Each row of your GridView will then have a Panel control and a ModalPopupExtender declared.

    If your issue is not the trip to the server but a full screen redraw, then you can use an UpdatePanel or just handle the trip to the server with a client side function which makes an Ajax request, populates the fields in the popup and shows the popup by calling the ModalPopupExtenders client side show() function.

    Monday, February 17, 2014 1:45 PM
  • User-2054142495 posted

    Hi RichardY not sure the first part of this (changing the design a little , paragraph 1) is feasible! As theres a lot of other things going on in the page which is affected by the use of  the datatable in a Gridview method!

    With the present design when the gridview is bound, when a cell is clicked I need to exclude the Gridview from postback!

    The second paragraph seems to be a possiblity! Do you know of any good examples which would clarify this for me?

    Tuesday, February 18, 2014 12:07 PM
  • User-2054142495 posted

    Hi Chetan, not really sure how 'thickbox' helps the situation?

    Tuesday, February 18, 2014 12:11 PM
  • User-417640953 posted

    Hi I-Weedy,

    Thank you post the issue to our forum.

    As RichardY mentioned, you should do a post back because you want populate data to the DetailsView in the pop up.

    If you do not want a full post back, you can use ajax to call the server and request the fields data. Then open the ModalPopupExtender using javascript.

    http://blogs.msdn.com/b/phaniraj/archive/2007/02/20/show-and-hide-modalpopupextender-from-javascript.aspx

    In my mind, I think it is a better solution provided by RichardY. And your code is also works good.

    Thanks.

    Best Regards!

    Thursday, February 20, 2014 3:25 AM
  • User-2054142495 posted

    Hi,

    Thanks a lot for all the help  however I fould out what the problem was!

    As you can see the code created worked well but i was having touble with postback.  Previously trying to use the trigger I was trying to use the buttonfield 

    <asp:ButtonField CommandName="CellClick" runat="server" Visible="false"  ></asp:ButtonField>

    I was unable to achieve what i wanted this way as the trigger wouldn't work directly with a buttonfield.  I also tried to change the buttonfield to a linkbutton in a templatfield but this produced the wrong outcomes!

    However the solution WAS to use asyncpostbacktrigger! Instead of trying to find a way of using (finding) the buttonfield ID (controlid) and the eventname (CellClick) on the buttonfield I used the gridview GridView1 as the controlid and rowcommand as the eventname

     <Triggers>
    <asp:asyncpostbacktrigger controlid="GridView1" EventName ="RowCommand" />
    
    </Triggers>

    also using

    CancelControlID="btnClose"

    on the Modelpopupextender to close the popup.

    Works a charm.

    Once again thanks for your help

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 20, 2014 12:01 PM