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

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?
LVL 29
sammySeltzerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ste5anSenior DeveloperCommented:
Just a comment: Bad idea. A user should see the options he has. Disabling the delete button is the better option.
sammySeltzerAuthor 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 DeveloperCommented:
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??
PMI ACP® Project Management

Prepare for the PMI Agile Certified Practitioner (PMI-ACP)® exam, which formally recognizes your knowledge of agile principles and your skill with agile techniques.

Start Today!
sammySeltzerAuthor Commented:
Obviously, this is not an area of expertise for you.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ste5anSenior DeveloperCommented:
If you say so..
sammySeltzerAuthor 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]
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
DataGridView

From novice to tech pro — start learning today.