CODEWITHSUNDEEP
asp.netgridview
user710502
user710502

Reputation: 11471

Adding div to row in asp.net gridview

I have a GridView with templates something like this:

<asp:GridView class="TableContainer" ID="prodGrid" runat="server" AutoGenerateColumns="False"
    EmptyDataText="No products" GridLines="None" CellPadding="4" OnRowCommand="prodGrid_RowCommand"
    OnRowDataBound="prodGrid_RowDataBound" EnableViewState="true" CssClass="Grid">
    <Columns>
      <asp:TemplateField>
            <ItemTemplate>
                <asp:CheckBox ID="chkSelectProduct" AutoPostBack="true" OnCheckedChanged="chkSelectedProduct_CheckChanged" runat="server">
                </asp:CheckBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Image ID="imgProd" ImageUrl="" AlternateText="image" runat="server" >
                </asp:Image>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <FooterStyle CssClass="Footer" />
    <RowStyle CssClass="RowStyle" />
    <HeaderStyle CssClass="HeaderStyle" />
    <AlternatingRowStyle CssClass="AlternatingRowStyle" />
</asp:GridView>

In the html mark up it creates a table with rows, I would like to add a div on demand so that i can put a message in there or add a spanning both columns. The message wont fit in one of the cells, so it will look something like this:

Product    |      Image  |
-------------------------
Bananas        [image]


So if they select the bananas product and it doesnt have enough stock,
 i would like to insert something like

Product   |    Image    |
-------------------------
Bananas        [image]
--- DIV WITH MESSAGE SHOWS HERE ACCROSS THE GRID---

once they fix the quantity i will hid it. I just want to know how i can insert a div given the grid above (there will be multiple rows) so when it can show the message on multiple products. I just would like some advice or idea on how to handle it.

Upvotes: 2

Views: 1995

Answers (1)

Karl Anderson
Karl Anderson

Reputation: 34846

Consider using another image in your TemplateField, such as an alert type icon (read: exclamation point) that will be dynamically shown, along with a tool tip when the user hovers over the image, if the correct criteria are met, like this:

<asp:TemplateField>
    <ItemTemplate>
        <asp:Image ID="imgProd" ImageUrl="" AlternateText="image" runat="server">
        </asp:Image>
        <asp:Image ID="alertProd" ImageUrl="" AlternateText="alert" 
                   runat="server" Visible="False">
        </asp:Image>
    </ItemTemplate>
</asp:TemplateField>

Note: We make the alert image invisible, because it will be optionally shown by logic in the RowDataBound event for the grid view, like this:

protected void prodGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if(e.Row.RowType == DataControlRowType.DataRow)
    {
        // Check conditions here for whether or not to show alert image
        if(ShowAlertImage)
        {
            Image theAlertImage = e.Row.FindControl("alertProd") as Image;

            // Make sure we found the Image control before we try to set its tooltip
            if(theAlertImage != null)
            {
                theAlertImage.ToolTip = "Quantity is too low";
            }
        }
    }
}

Now when the user mouses over the alert image, then they will see the message informing them of the problem with the product.

Upvotes: 1

Related Questions