locked
gridview as a web user control RRS feed

  • Question

  • User351619809 posted

    Hello All,

    I have a gridview in a web user control. In my Gridview, I have a delete button, a text box. I can increase the number in the textbox and I can also delete the items in the Gridview. Depending on the number in the textbox, I can also calculate the total at the bottom of the gridview. Gridview works fine on the .aspx page, but when I put the Gridview on the .ascx page and put the .ascx page on my web form (aspx) page. Delete button, total  and the text box is not responding at all. Below is my code for the GridView:

    <asp:UpdatePanel ID="updPnl" runat="server" UpdateMode="Always">
    			<ContentTemplate>
    				
    			<asp:GridView ID="grdShoppingCart" runat="server" AutoGenerateColumns="false" class="ui-responsive table-stroke ss-table ui-search-result-table" DataKeyNames="CartID" AllowPaging="false" PageSize="5"  GridLines="None"  OnRowDataBound="grdShoppingCart_RowDataBound" OnRowDeleting="grdShoppingCart_RowDeleting">
    				<Columns>
    					
    					<asp:BoundField DataField="CartID" Visible="false" HeaderText="CartID" />
    					<asp:BoundField DataField="item" HeaderText="Item" HeaderStyle-Font-Bold="true" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="250px" ControlStyle-CssClass="ss-row"    />
    					<asp:TemplateField HeaderText="Description" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="300px" ControlStyle-CssClass="ss-row"    >
    						<ItemTemplate>
    							<asp:Label ID="lblDesc" runat="server" Text='<%# Eval("RequestedFor") %>' /><br />
    							&nbsp;<asp:Label ID="lblReq" Text="Requested By:" runat="server"></asp:Label>&nbsp;<asp:Label ID="lblDesc1" runat="server" Text='<%# Eval("RequestedBy") %>' />
    						</ItemTemplate>
    
    					</asp:TemplateField>
    					   <asp:TemplateField HeaderText="Quantity" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"  ControlStyle-CssClass="ss-row"  >
                            <ItemTemplate>
    									<asp:TextBox Width="45px" min="1" max="99" step="1" TextMode="Number" ID="txtQuantity"  Text='<%#Eval("Quantity") %>'    runat="server" AutoPostBack="true" OnTextChanged="txtQuantity_TextChanged"  ></asp:TextBox>
                            </ItemTemplate>
                        </asp:TemplateField>
    					<asp:BoundField DataField="ExpQuantity"  />
    					<asp:TemplateField HeaderText="Price" HeaderStyle-HorizontalAlign="right" ItemStyle-HorizontalAlign="Right" ItemStyle-Width="100px" ControlStyle-CssClass="ss-row" >
                            <ItemTemplate>
    							<asp:Label ID="lblPrice" runat="server"></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
    					 <asp:TemplateField ShowHeader="False" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center" ItemStyle-Width="150px" ControlStyle-CssClass="ss-row" >
    						<ItemTemplate>
    							 <asp:ImageButton  ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png"     ToolTip="Click To Delete" AlternateText="Click To delete" />                            
    						  <asp:Panel ID="pnlPopUp" runat="server" Style="display: none; background-color:white" >
                                            <asp:Panel ID="pnlDragPopUp" runat="server" Style="cursor: move; background-color: #dddddd; border: solid 1px Gray; color: Black;width:500px">
                                                <div role="main" class="ui-content">
                                                  <h3 class="ui-title">Are you sure you want to remove this item?</h3>
                                                </div>
                                            </asp:Panel>
                                            <div >
                                                <p style="display:flex;align-items:center;justify-content:space-between;width:220px;">
                                                    <asp:Button   ID="OkButton" runat="server"  Text="Remove"  CommandName="delete" CommandArgument='<%#Eval("CartID") %>'/> &nbsp;
                                                    <asp:Button ID="CancelButton"  runat="server" Text="Cancel" />
                                                </p>
                                            </div>
                                        </asp:Panel>
    
    
                                        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"
                                            TargetControlID="imgbtnDelete"
                                            PopupControlID="pnlPopUp"
                                            BackgroundCssClass="modalBackground"
                                            CancelControlID="CancelButton"
                                            DropShadow="true"
                                            PopupDragHandleControlID="pnlDragPopUp" />
    					  </ItemTemplate>
    						</asp:TemplateField>
    				</Columns>
    
    			</asp:GridView>
    				</ContentTemplate>
    					<Triggers>
    						<asp:PostBackTrigger ControlID="grdShoppingCart" />
                      </Triggers>
    		   </asp:UpdatePanel></div>
     
    <div>
                        <asp:UpdatePanel runat="server" ID="UpdInfo" UpdateMode="Conditional">
                                    <ContentTemplate>
                                        <div id="ss-cart-total" class="ss-cart-total">Total: $<asp:Label ID="lbt" runat="server" ></asp:Label> </div>
                                        
                                    </ContentTemplate>
                        </asp:UpdatePanel></div>

    Below is the code behind for deleting, calculating total 

            protected void txtQuantity_TextChanged(object sender, EventArgs e)
            {
                string x;
                TextBox changeTextbox = sender as TextBox;
                GridViewRow row = (GridViewRow)changeTextbox.NamingContainer;
                TextBox tbq = (row.FindControl("txtQuantity") as TextBox);
                Label lblPrice = (row.FindControl("lblPrice") as Label);
    
                lblPrice.Text = (Convert.ToInt32(tbq.Text) * 28).ToString();
                Double t = 0;
                foreach (GridViewRow r in grdShoppingCart.Rows)
                {
                    if (r.Cells[1].Text != "Shipping Request")
                    {
                        t += Convert.ToInt32(((Label)r.FindControl("lblPrice")).Text);
                    }
                    else if (r.Cells[1].Text == "Shipping Request")
                    {
                        t += 7.50;
    
                    }
                }
                lbt.Text = t.ToString();
                UpdInfo.Update();
            }

    Below is the gridview Rowdatabond code:

      protected void grdShoppingCart_RowDataBound(object sender, GridViewRowEventArgs e)
            {
                ShopCart sc = new ShopCart();
    
                if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    Label lbl = (e.Row.FindControl("lblPrice") as Label);
                    TextBox tbq = (e.Row.FindControl("txtQuantity") as TextBox);
                    if (DataBinder.Eval(e.Row.DataItem, "Item").ToString() != "Shipping Request")
                    {
                        if (tbq.Text != "")
                        {
                            lbl.Text = (Convert.ToInt32(tbq.Text) * 28).ToString();
    
                        }
                        sc.CartId = Int32.Parse(DataBinder.Eval(e.Row.DataItem, "CartID").ToString());
                        sc.Quantity = Int32.Parse(DataBinder.Eval(e.Row.DataItem, "Quantity").ToString());
                        sc.Price = Int32.Parse(lbl.Text.ToString());
                        updatePriceData(sc);
                    }
                    else
                    {
                        Label lblReq = (e.Row.FindControl("lblReq") as Label);
                        tbq.Visible = false;
                        lblReq.Visible = false;
                        lbl.Text = "7.50";
                    }
    
                }
    
    
                CalculateTotalPrice(e);
    
    
    
            }
    
            private void CalculateTotalPrice(GridViewRowEventArgs e)
            {
                Double tPrice = 0;
    
                foreach (GridViewRow r in grdShoppingCart.Rows)
                {
                    if (r.Cells[1].Text != "Shipping Request")
                    {
                        tPrice += Convert.ToDouble(((Label)r.FindControl("lblPrice")).Text);
                    }
                    else if (r.Cells[1].Text == "Shipping Request")
                    {
                        tPrice += 7.50;
    
                    }
                }
                lbt.Text = tPrice.ToString();
    
    
            }

    Grid view row deleting code:

     protected void grdShoppingCart_RowDeleting(object sender, GridViewDeleteEventArgs e)
            {
                ShoppingCartData scd = new ShoppingCartData();
                var rowNum = e.RowIndex;
                double tPrice = 0;
                bool checkExpShipping = false;
                GridViewRow row = grdShoppingCart.Rows[e.RowIndex];
                Button btn = (Button)row.FindControl("OkButton");
                int cartId = Convert.ToInt32(btn.CommandArgument);
                scd.DeleteShoppingCartData(cartId, out checkExpShipping);
    
    
                if (checkExpShipping == true)
                {
                    tPrice = (double.Parse(lbt.Text.ToString()) - 7.50);
                    lbt.Text = tPrice.ToString();
                   
                    UpdInfo.Update();
                }
                BindShoppingCart();
    
    
            }

    Below is the Gridvie binding code:

      protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    
                    BindShoppingCart();
                   
                }
            }

    I can see the Gridview populated in the aspx page, but none of the button are responding.

    Friday, January 8, 2021 8:15 PM

Answers

  • User-1545767719 posted

    > The only reason, I am using the ModalPOP upExtender is when the user clicks on the Gridview delete button, I want to ask for confirmation through modalPOPUPExtender.

    It is not good idea to use the ModalPopup for such purpose,

    So, forget about the ModalPopup and consider to use javascript confirm method instead.

    I guess you use the ImageButton as the delete button. If so, set the script to the OnClientClick property such like:

    OnClientClick='janascript: return confirm("are you sure to delete?");'



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, January 10, 2021 6:08 AM

All replies

  • User-1545767719 posted

    Did you confirm that the postback occurs as expected when you operate the button?

    Friday, January 8, 2021 10:01 PM
  • User351619809 posted

    Did you confirm that the postback occurs as expected when you operate the button?

    If I put the Gridview on  .aspx page then postback occurs, but when I put the gridview on .ascx page and then click the gridview delete button on aspx page then postback does not occur.

    then postback does not occur.

    Friday, January 8, 2021 10:09 PM
  • User-1545767719 posted

    Can you try it without the UpdataPanel?

    Friday, January 8, 2021 10:58 PM
  • User351619809 posted

    I commented out the updatePanel. still the postback is not occurring when I tried to delete the GridView row.

    Friday, January 8, 2021 11:30 PM
  • User-1545767719 posted

    Can you minimize the current code by removing the portion not required to reproduce the issue (i.e, no postback occurs) so that you will be able to identify the cause?

    Friday, January 8, 2021 11:38 PM
  • User351619809 posted

    I minimized the code. It seems everything is working except when I click on delete button , modal pop does not show in the side panel and that causes not the  post back issue. I am not sure how to show the modal pop when user clicks the delete button. I can show the modal pop up in the panel or outside the side panel or may be the modal pop up is showing but it is coming to the right side of the panel and I cannot see it.This is a very simple example that I created:

    Below is the .ascx page code:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GridViewUserControl.ascx.cs" Inherits="SidePanelGridViewTest.GridViewUserControl" %>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:IdDatabase %>" 
        SelectCommand="SELECT TOP 5 [CartID], [Item], [RequestedBy], [RequestedFor] FROM [ShopCart]">
    </asp:SqlDataSource>
    <asp:ScriptManager ID="scMan" runat="server"></asp:ScriptManager>
     <asp:UpdatePanel ID="updPnl" runat="server" UpdateMode="Always">
    			<ContentTemplate>
    				
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="CartID" DataSourceID="SqlDataSource1" OnRowDeleting="OnRowDeleting"  OnRowDataBound="OnRowDataBound">
        <Columns>
            <asp:BoundField DataField="Item" HeaderText="ProductID" 
                InsertVisible="False" ReadOnly="True"  />
            <asp:BoundField DataField="RequestedBy" HeaderText="ProductName"
                 />
         	 <asp:TemplateField ShowHeader="False" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center" ItemStyle-Width="150px" ControlStyle-CssClass="ss-row" >
    						<ItemTemplate>
    							 <asp:ImageButton  ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png"     ToolTip="Click To Delete" AlternateText="Click To delete" />                            
    						  <asp:Panel ID="pnlPopUp" runat="server" Style="display: none; background-color:white" >
                                            <asp:Panel ID="pnlDragPopUp" runat="server" Style="cursor: move; background-color: #dddddd; border: solid 1px Gray; color: Black;width:500px">
                                                <div role="main" class="ui-content">
                                                  <h3 class="ui-title">Are you sure you want to remove this item?</h3>
                                                </div>
                                            </asp:Panel>
                                            <div >
                                                <p style="display:flex;align-items:center;justify-content:space-between;width:220px;">
                                                    <asp:Button   ID="OkButton" runat="server"  Text="Remove"  CommandName="delete" CommandArgument='<%#Eval("CartID") %>'/> &nbsp;
                                                    <asp:Button ID="CancelButton"  runat="server" Text="Cancel" />
                                                </p>
                                            </div>
                                        </asp:Panel>
    
    
                                        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"
                                            TargetControlID="imgbtnDelete"
                                            PopupControlID="pnlPopUp"
                                            BackgroundCssClass="modalBackground"
                                            CancelControlID="CancelButton"
                                            DropShadow="true"
                                            PopupDragHandleControlID="pnlDragPopUp" />
    					  </ItemTemplate>
    						</asp:TemplateField>
        </Columns>
    </asp:GridView>
                    </ContentTemplate></asp:UpdatePanel>

    below is the code behind of .ascx page:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace SidePanelGridViewTest
    {
        public partial class GridViewUserControl : System.Web.UI.UserControl
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void OnRowDeleting(object sender, GridViewDeleteEventArgs e)
            {
                int index = Convert.ToInt32(e.RowIndex);
    
    
            }
    
            protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
            {
                string x = "Test";
    
            }
        }
    }

    I didn't put any code inside OnRowDeleting because I just want to see the postback and the postback is not occurring because of modalpopup.

    below is my .aspx page:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="SidePanelGridViewTest.WebForm1" %>
    <%@ Register TagPrefix="uc" Src="~/GridViewUserControl.ascx" TagName="MyUserControl" %>
    <!DOCTYPE html>
    <head>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
    </head> <div class="ss-header-actions"> <a href="#panel1" class="ss-header-actions-cart"> <span class="ss-header-labels" id="ss-cart-label">shop Cart</span> </a> <div class="ss-clear"></div> </div> <form id="form1" runat="server"> <div data-role="panel" id="panel1" data-display="overlay" data-position="right" style="width:400px"> <h3>This is a Test</h3> <uc:MyUserControl runat="server"></uc:MyUserControl> </div> <br /><br /><br /><br /> <div> This is a Test: <asp:TextBox ID="txtTest" runat="server"></asp:TextBox> </div> </form></div></div>

    There is no code behind the .aspx page.

    Sunday, January 10, 2021 4:43 AM
  • User-1545767719 posted

    Are you using both the jquery mobile overlay panel and the ModalpopupExtender? It is completely out of my understanding.

    What you mentioned in your previous thread as your requirement was that “click the shopping cart button at the top of the page” slides and shows the shopping cart in the user control. I understand the it could be done through the Q&A in the pervious thread.

    Now you are adding the ModalpopupExtender. How do you expect the jquery mobile overlay panel and the ModalpopupExtender interact? Isn’t there any conflict between then?

    Sunday, January 10, 2021 5:19 AM
  • User351619809 posted

    Yes, I am using both the  mobile overlay panel and the ModalpopupExtender. I think there is a conflict between them because I don't see modal pop up extender. The only reason, I am using the ModalPOP upExtender is when the user clicks on the Gridview  delete button, I want to ask for confirmation through modalPOPUPExtender. I don't know any other way. Can you please suggest if I can use something else. All I want to do is show the gridview in a panel that extends from the right side of the screen and gridview is a web user control. I want to show the conformation box when user tries to delete the row from the gridview.

    Highly appreciate your help.

    Sunday, January 10, 2021 5:46 AM
  • User-1545767719 posted

    > The only reason, I am using the ModalPOP upExtender is when the user clicks on the Gridview delete button, I want to ask for confirmation through modalPOPUPExtender.

    It is not good idea to use the ModalPopup for such purpose,

    So, forget about the ModalPopup and consider to use javascript confirm method instead.

    I guess you use the ImageButton as the delete button. If so, set the script to the OnClientClick property such like:

    OnClientClick='janascript: return confirm("are you sure to delete?");'



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, January 10, 2021 6:08 AM
  • User351619809 posted

    Yes, everything work. I can delete the gridview row. Although, the pop up box look ugly, but it works. Thanks.

    Sunday, January 10, 2021 9:50 PM