Hide Delete button until a row is added by clicking Add button, works partially

sammySeltzer
sammySeltzer used Ask the Experts™
on
Greetings mates.

Hope the title of this thread makes sense.

When our users load our current app, it displays among other things, an Add button used to dynamically create additional rows as needed and a Delete button so users can delete any additional rows they added but no longer needs.

This part works great.

However, our boss wanted only show the Add button and only expose the Delete button after a new row is added.

The code below does just that.

<asp:GridView ID="grvGift" AutoGenerateColumns="false" runat="server"
    onrowdatabound="grvGift_RowDataBound">
    <Columns>
        <asp:TemplateField HeaderText="Income">
            <ItemTemplate>
                <asp:TextBox ID="txtGiftname" placeholder="Name..." runat="server" Style="width: 250px;"
                    class="form-control"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="&nbsp;">
            <ItemTemplate>
                <asp:Button ID="ButtonAdd1" runat="server" Text="Add" OnClick="ButtonAdd1_Click" CssClass="grvAddButton" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:CommandField ShowDeleteButton="True">
            <ControlStyle  CssClass="grvDelButton" />
        </asp:CommandField>
    </Columns>
</asp:GridView><br />
<asp:GridView ID="grvOrg" AutoGenerateColumns="false" runat="server"
    onrowdatabound="grvOrg_RowDataBound">
    <Columns>
        <asp:TemplateField HeaderText="Income">
            <ItemTemplate>
                <asp:TextBox ID="txtorgname" placeholder="Name..." runat="server" Style="width: 250px;"
                    class="form-control"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="&nbsp;">
            <ItemTemplate>
                <asp:Button ID="ButtonAdd2" runat="server" Text="Add" OnClick="ButtonAdd2_Click" CssClass="grvAddButton" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:CommandField ShowDeleteButton="True">
            <ControlStyle  CssClass="grvDelButton" />
        </asp:CommandField>
    </Columns>
</asp:GridView><br />
<asp:GridView ID="grvCredit" AutoGenerateColumns="false" runat="server"
    onrowdatabound="grvCredit_RowDataBound">
    <Columns>
        <asp:TemplateField HeaderText="Income">
            <ItemTemplate>
                <asp:TextBox ID="txtCreditname" placeholder="Name..." runat="server" Style="width: 250px;"
                    class="form-control"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="&nbsp;">
            <ItemTemplate>
                <asp:Button ID="ButtonAdd3" runat="server" Text="Add" OnClick="ButtonAdd3_Click" CssClass="grvAddButton" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:CommandField ShowDeleteButton="True">
            <ControlStyle  CssClass="grvDelButton" />
        </asp:CommandField>
    </Columns>
</asp:GridView>



    Protected Sub grvGift_RowDataBound(sender As Object, e As GridViewRowEventArgs)
        If e.Row.RowType = DataControlRowType.Header Then
            If e.Row.RowIndex = -1 Then
                DirectCast(DirectCast(e.Row.Cells(5), System.Web.UI.WebControls.DataControlFieldCell).ContainingField, System.Web.UI.WebControls.CommandField).ShowDeleteButton = False
            End If
        Else
            DirectCast(DirectCast(e.Row.Cells(5), System.Web.UI.WebControls.DataControlFieldCell).ContainingField, System.Web.UI.WebControls.CommandField).ShowDeleteButton = True
        End If
    End Sub

    Protected Sub grvOrg_RowDataBound(sender As Object, e As GridViewRowEventArgs)
        If e.Row.RowType = DataControlRowType.Header Then
            If e.Row.RowIndex = -1 Then
                DirectCast(DirectCast(e.Row.Cells(5), System.Web.UI.WebControls.DataControlFieldCell).ContainingField, System.Web.UI.WebControls.CommandField).ShowDeleteButton = False
            End If
        Else
            DirectCast(DirectCast(e.Row.Cells(5), System.Web.UI.WebControls.DataControlFieldCell).ContainingField, System.Web.UI.WebControls.CommandField).ShowDeleteButton = True
        End If
    End Sub

    Protected Sub grvCredit_RowDataBound(sender As Object, e As GridViewRowEventArgs)
        If e.Row.RowType = DataControlRowType.Header Then
            If e.Row.RowIndex = -1 Then
                DirectCast(DirectCast(e.Row.Cells(5), System.Web.UI.WebControls.DataControlFieldCell).ContainingField, System.Web.UI.WebControls.CommandField).ShowDeleteButton = False
            End If
        Else
            DirectCast(DirectCast(e.Row.Cells(5), System.Web.UI.WebControls.DataControlFieldCell).ContainingField, System.Web.UI.WebControls.CommandField).ShowDeleteButton = True
        End If
    End Sub

Open in new window


The problem is that when you click the Add button and a new row is added successfully, rather than expose the Delete button for that particular GridView, all the Delete buttons for all three Gridviews are exposed.

It is not how we want it to work.

Any ideas what I need to change on any part of the code below to only expose the Delete button for only the GridView control ID that added the new row?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
ste5anSenior Developer

Commented:
Just a comment: Bad idea. A user should see the options he has. Disabling the delete button is the better option.
Top Expert 2011

Author

Commented:
OK, I can see from your comment that you either did not understand the issue I am having or I am not clear about what the issue is.

So, let me try again.

By default, per the code I posted, when the page loads, user only sees Add button.

The Delete button is hidden. Then when the user clicks the Add button and a new row is added, then the Delete button is now visible.

This is the way it is intended to work and that's how it works currently.

Unfortunately, since there are three GridView controls, grvGift, grvOrg and grvCredit, when you click Add to add a new row to say grvGIft, it automatically makes the Delete button visible for all GridView controls.

That's not how we want it to work.

We want it to make Delete button visible for only the GridView control that added a new row.

I hope this is clear. If not, I will be happy to clarify further.
ste5anSenior Developer

Commented:
I understand your problem. But from the UI perspective it is not a good idea to hidde buttons in such scenarios.

After your explanation: You have only *one* button, but three grids??
Exploring SQL Server 2016: Fundamentals

Learn the fundamentals of Microsoft SQL Server, a relational database management system that stores and retrieves data when requested by other software applications.

Top Expert 2011
Commented:
Obviously, this is not an area of expertise for you.
ste5anSenior Developer

Commented:
If you say so..
Top Expert 2011

Author

Commented:
Please delete this question as I have resolved it using the code below:

[CODE]
Protected Sub ButtonAdd_Click(sender As Object, e As EventArgs)
      Dim row As GridViewRow = TryCast(TryCast(sender, Button).NamingContainer, GridViewRow)
      If grvGift.Rows.Count - 1 = row.RowIndex Then
            ViewState("rowIndex" + 0) = row.RowIndex
      End If

      AddNewRowToGrid(0, grvGift)
      Me.BindGridview()
      SetPreviousData(0, grvGift)
      SetPreviousData(1, grvOrg)
End Sub

Protected Sub ButtonAdd_Click1(sender As Object, e As EventArgs)
      Dim row As GridViewRow = TryCast(TryCast(sender, Button).NamingContainer, GridViewRow)
      If grvOrg.Rows.Count - 1 = row.RowIndex Then
            ViewState("rowIndex" + 1) = row.RowIndex
      End If

      AddNewRowToGrid(1, grvOrg)
      Me.BindGridview()
      SetPreviousData(0, grvGift)
      SetPreviousData(1, grvOrg)
End Sub

Private Sub DeleteRow(e As GridViewDeleteEventArgs, rowID As Integer, viewId As Integer, gv As GridView)
      If ViewState("CurrentTable" + viewId) IsNot Nothing Then
            Dim dt As DataTable = DirectCast(ViewState("CurrentTable" + viewId), DataTable)
            If dt.Rows.Count > 1 Then
                  If e.RowIndex < dt.Rows.Count Then
                        dt.Rows.Remove(dt.Rows(rowID))
                  End If
            End If

            ViewState("CurrentTable" + viewId) = dt
            ViewState("rowIndex" + viewId) = rowID - 2
            gv.DataSource = dt
            gv.DataBind()
      End If

      Me.BindGridview()
      SetPreviousData(0, grvGift)
      SetPreviousData(1, grvOrg)
End Sub
[/CODE]

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial