gridview as a web user control

Reply

anjaliagarwa...

Member

505 Points

1259 Posts

gridview as a web user control

Jan 08, 2021 08:15 PM|anjaliagarwal5@yahoo.com|LINK

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.

Reply

SurferOnWww

Member

150 Points

103 Posts

Re: gridview as a web user control

Jan 08, 2021 10:01 PM|SurferOnWww|LINK

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

Reply

anjaliagarwa...

Member

505 Points

1259 Posts

Re: gridview as a web user control

Jan 08, 2021 10:09 PM|anjaliagarwal5@yahoo.com|LINK

SurferOnWww

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.

Reply

SurferOnWww

Member

150 Points

103 Posts

Re: gridview as a web user control

Jan 08, 2021 10:58 PM|SurferOnWww|LINK

Can you try it without the UpdataPanel?

Reply

anjaliagarwa...

Member

505 Points

1259 Posts

Re: gridview as a web user control

Jan 08, 2021 11:30 PM|anjaliagarwal5@yahoo.com|LINK

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

Reply

SurferOnWww

Member

150 Points

103 Posts

Re: gridview as a web user control

Jan 08, 2021 11:38 PM|SurferOnWww|LINK

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?

Reply

anjaliagarwa...

Member

505 Points

1259 Posts

Re: gridview as a web user control

Jan 10, 2021 04:43 AM|anjaliagarwal5@yahoo.com|LINK

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.

Reply

SurferOnWww

Member

150 Points

103 Posts

Re: gridview as a web user control

Jan 10, 2021 05:19 AM|SurferOnWww|LINK

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?

Reply

anjaliagarwa...

Member

505 Points

1259 Posts

Re: gridview as a web user control

Jan 10, 2021 05:46 AM|anjaliagarwal5@yahoo.com|LINK

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.

Reply

SurferOnWww

Member

150 Points

103 Posts

Re: gridview as a web user control

Jan 10, 2021 06:08 AM|SurferOnWww|LINK

> 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?");'

Reply

anjaliagarwa...

Member

505 Points

1259 Posts

Re: gridview as a web user control

Jan 10, 2021 09:50 PM|anjaliagarwal5@yahoo.com|LINK

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

gridview as a web user control[Answered] RSS

10 replies

Shortcuts

Related Links

gridview as a web user control

Re: gridview as a web user control

Re: gridview as a web user control

SurferOnWww

Re: gridview as a web user control

Re: gridview as a web user control

Re: gridview as a web user control

Re: gridview as a web user control

Re: gridview as a web user control

Re: gridview as a web user control

Re: gridview as a web user control

Re: gridview as a web user control