i will try to explain what i have, what i'm trying to do and what is my problem
what i have:
i have a modal with and update panel (i need it because the postback closes my modal) that has two text box, a button and a gridview.
in the textbox i write the name and the surname of a person and with the button i retrieve the data and put it in a gridview.
the gridview has a control to select the row that i want, with that row, i use the data from first three cells to change some hidenField values to use in another function.
in the bottom of the modal i have the add button that only changes a textbox to show that i have the correct data. that button is not enabled by default and the event must enable it
what i want:
i want to select the row that i need, enable the add button and fetch the data in my textbox.
where is my problem:
when i select my row, selectedindexchanging fires but nevers enables the add button so cant fetch my textbox for using it
code:
front code:
<div class="modal fade" id="modalSocio" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabelSocio">
<asp:Label ID="Label4" runat="server" CssClass="text-primary"></asp:Label>
</h5>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<div class="modal-body">
<div class="row g-3">
<div class="row">
<div class="col-3">
<asp:TextBox ID="txtBusquedaNombre" runat="server" CssClass="form-control" placeholder="Nombre"></asp:TextBox>
</div>
<div class="col-3">
<asp:TextBox ID="txtBusquedaApellido" runat="server" CssClass="form-control" placeholder="Apellido"></asp:TextBox>
</div>
<div class="col-3">
<asp:LinkButton ID="btnBuscarSocio" runat="server" CssClass="btn btn-outline-success" Text="Buscar" CausesValidation="false" ToolTip="Buscar" OnClick="btnBuscarSocio_Click" ><span class="fas fa-search"></span></asp:LinkButton>
</div>
</div>
<div class="table-responsive mt-3">
<asp:GridView ID="gvSocios" runat="server" CssClass="table table-bordered" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" OnSelectedIndexChanging="gvSocios_SelectedIndexChanging" >
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="Legajo" HeaderText="Nro. Socio" ></asp:BoundField>
<asp:BoundField DataField="nombreSocio" HeaderText="Nombre" />
<asp:BoundField DataField="Apellido" HeaderText="Apellido" />
<asp:CommandField ButtonType="Link" HeaderText="Seleccionar" ShowSelectButton="True" SelectText="<i class='fa fa-check-circle'></i>">
<ControlStyle CssClass="btn btn-outline-secondary" />
</asp:CommandField>
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
<EmptyDataTemplate>
<div class="alert alert-primary" role="alert">
No se encontraron registros!
</div>
</EmptyDataTemplate>
</asp:GridView>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div class="modal-footer">
<asp:Button ID="BtnCancelarSocio" runat="server" Text="Cancelar" CssClass="btn btn-secondary" OnClick="btnCancelar_Click" CausesValidation="False" />
<asp:Button ID="BtnAgregarSocio" ClientIDMode="Static" runat="server" CausesValidation="false" Text="Seleccionar" CssClass="btn btn-success" OnClick="BtnAgregarSocio_Click" />
</div>
</div>
</div>
</div>
codeBehind:
protected void BtnAgregarSocio_Click(object sender, EventArgs e)
{
TxtSocio.Text = hfidNombreSocio.Value;
}
protected void gvSocios_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)
{
var row = gvFormasPago.Rows[e.NewSelectedIndex];
BtnAgregarSocio.Enabled = true;
hfSocio.Value = row.Cells[0].Text;
hfidNombreSocio.Value = row.Cells[0].Text + " - " + row.Cells[1].Text + " " + row.Cells[2].Text;
}
i tried to not use the enabled attribute for test but when the click event fires the hfidNombreSocio value in that moment is empty and the modal never closes.
maybe i'm not using the update panel right.
the text box code:
<div class="row">
<div class="col-md-4">
<asp:Label ID="lblSocio" runat="server" Visible="false" Text="Socio Cuenta Corriente" CssClass="form-label"></asp:Label>
<asp:TextBox ID="TxtSocio" runat="server" text="0" CssClass="form-control" ></asp:TextBox>
<asp:LinkButton ID="btnBuscar" runat="server" Visible="false" CssClass="btn btn-outline-success" Text="Buscar" CausesValidation="false" ToolTip="Buscar" OnClick="btnBuscar_Click" ><span class="fas fa-search"></span></asp:LinkButton> <%-- this button open the modal --%>
</div>
Ok, folks, this is one of those I wish someone corrected me!!
I am MOST HAPPY to have big buckets of egg on my face.
I have for some time preached that when you pop a dialog, you can't have post backs in that dialog. I stand MUCH corrected!!!!
So, lets build a grid, it allows a search, and then we can click on (select the row).
We have this:
<div id="hoteldialog1" style="display:normal">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Enter City Name: <asp:TextBox ID="txtSearchCity" runat="server"></asp:TextBox>
<asp:Button ID="cmdSearchCity" runat="server" Text="Search"
style="margin-left:25px" CssClass="btn" OnClick="cmdSearchCity_Click"/>
<br />
<asp:GridView ID="GridHotels" runat="server" AutoGenerateColumns="False"
DataKeyNames="ID" OnSelectedIndexChanged="GridHotels_SelectedIndexChanged"
CssClass="table">
<Columns>
<asp:BoundField DataField="HotelName" HeaderText="HotelName" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="Province" HeaderText="Province" />
<asp:BoundField DataField="Description" HeaderText="Description" />
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:Button ID="cmdHSel" runat="server" Text="Select"
CommandName="Select"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
So, when we run, we get/see this:
Now, in above I DID use CommmandName = "select" because I wanted the select row to work. (and I beyond hate all those extra templates). So I used this code to highlight the row.
protected void GridHotels_SelectedIndexChanged(object sender, EventArgs e)
{
// user selected this row - highlight it
int RowIX = GridHotels.SelectedIndex;
GridViewRow gRow = (GridViewRow)GridHotels.Rows[RowIX];
if ((ViewState["MySel"] != null) && ((int)ViewState["MySel"] != RowIX))
{
GridViewRow gLast = GridHotels.Rows[(int)ViewState["MySel"]];
gLast.CssClass = "";
}
gRow.CssClass = "alert-info";
ViewState["MySel"] = RowIX;
}
Ok, so far so simple. And the search button in above is this:
protected void cmdSearchCity_Click(object sender, EventArgs e)
{
using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
{
using (SqlCommand cmdSQL = new SqlCommand("SELECT * FROM tblHotels ", conn))
{
if (txtSearchCity.Text != "")
{
// filter grid by city
cmdSQL.CommandText += " WHERE City = #City";
cmdSQL.Parameters.Add("#City", SqlDbType.NVarChar).Value = txtSearchCity.Text;
}
conn.Open();
cmdSQL.CommandText += " ORDER BY HotelName";
GridHotels.DataSource = cmdSQL.ExecuteReader();
GridHotels.DataBind();
}
}
}
Again, really simple.
Ok, now the money shot. Now the Rosetta stone. Now the beef, now the magic, now the amazing!!!
The above as noted was placed in a "div", and has a update panel.
So, now lets drop in another grid!!!
We going to display some people, and pop the above hotel selector grid!!
So, we now have this:
<asp:GridView ID="GPeople" runat="server" AutoGenerateColumns="False"
DataKeyNames="ID" >
<Columns>
<asp:BoundField DataField="Firstname" HeaderText="Firstname" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="Province" HeaderText="Province" />
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="cmdGetHotel" runat="server" Text="Hotels"
OnClick="cmdGetHotel_Click"
OnClientClick="return mypop(this);"
/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
And code:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
LoadPeople();
}
void LoadPeople()
{
GPeople.DataSource = MyRst("SELECT * from People Order by FirstName");
GPeople.DataBind();
}
So we now have a grid of people. We now want to on a row click, pop up the hotel list.
So, I suggest jQuery.UI, as is much better (and cleaner then bootstrap dialog).
So we have this row click in above:
<asp:Button ID="cmdGetHotel" runat="server" Text="Hotels"
OnClick="cmdGetHotel_Click"
OnClientClick="return mypop(this);"
/>
So in above, we have both a server side button, and then a client side js function that pops up the dialog (and ONLY returns true if we hit ok.
So, now all we need is the js code to pop up the dialog. That code is this:
<script>
selok = false;
function mypop(btn) {
if (selok)
return true;
var mydiv = $("#hoteldialog1")
mydiv.dialog({
modal: true, appendTo: "form",
title: "Test dialog", closeText: "",
width: "40%",
position: { my: 'left top', at: 'right bottom', of: btn },
buttons: {
Ok: (function () {
selok = true;
btn.click()
}),
Cancel: (function () {
mydiv.dialog("close")
})
}
});
return false;
}
</script>
(set hotel grid display:none - jquery.ui will manage this).
So, now we get this:
So we are free to search, have post-backs, and of course select the row.
If the user hits ok, then the first grid button code runs. I did NOT use the selected index change event for that first grid (I could have), but I used this code:
protected void cmdGetHotel_Click(object sender, EventArgs e)
{
Debug.Print("hotel grid click");
Button btn = (Button)sender;
GridViewRow gRow = (GridViewRow)btn.Parent.Parent;
Debug.Print("Grid row = " + gRow.RowIndex);
Debug.Print("PK = " + GPeople.DataKeys[gRow.RowIndex]["ID"].ToString());
Also note, that while the pop grid is hidden? We can STILL get any data from that row, since the selected index of that grid does persist!!
eg:
GridViewRow gRow = (GridViewRow)GHotels.Rows[GHotels.SelectedIndex];
Debug.Print("Grid row = " + gRow.RowIndex);
Debug.Print("PK = " + GPeople.DataKeys[gRow.RowIndex]["ID"].ToString());
// cells collection, or find control to grab any other value
So, I think you should dump the bootstrap dialog.
Put your 2nd nice grid + searching, post backs - what ever you want into a div with a name, and use jQuery.UI to pop the grid. This will allow searching, post backs and then when the user selects the row and hits ok, then you are now free to close this dialog, and you have "index" of that pop set for you.
am currently trying to find a way to open up a modal box based on the rows in the table. however when i run the program and click the edit button, the modal wont show up. Here is a sample code:
Gridview:
<asp:Gridview CssClass=" table table-borderless" ID="PO_Form" runat="server" AutoGenerateColumns="false" OnRowCommand="PO_Form_RowCommand">
<Columns>
<asp:ButtonField Text="Edit" ControlStyle-CssClass="page-link" CommandName="EditForm"/>
<asp:BoundField DataField="PO_no" HeaderText="PO No." />
<asp:BoundField DataField="supplier_name" HeaderText="Supplier name" />
<asp:BoundField DataField="flight_no" HeaderText="Flight No." />
<asp:BoundField DataField="bkg_date" HeaderText="Booking Date" />
<asp:BoundField DataField="status" HeaderText="Status" />
</Columns>
<HeaderStyle BackColor="#666666" />
</asp:Gridview>
</div>
Modal:
<div id="editmodal" class="modal fade" role="dialog" >
<div class="modal-dialog">
<%-- Modal Content --%>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-default" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
Test
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
back code:
protected void PO_Form_RowCommand(object sender, GridViewCommandEventArgs e)
{
if(e.CommandName == "EditForm")
{
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "Pop", "EditFormModal();", true);
}
}
I am opening a modal window from the below button (btnOpen). This bhutton is located inside a GridView. It needs to open another Gridview in the modal window but my code is not working:
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnOpen" runat="server" Text="Show Gridview" CommandName="cmdDetail" CommandArgument="<%# ((GridViewRow) Container).DataItemIndex %>"/>
</ItemTemplate>
</asp:TemplateField>
My Modal Window:
<div class="modal" id="idModal">
<div class="container">
<div class="modal-header">
<h1>Transaction Details<a class="close-modal" href="#">×</a></h1>
</div>
<div class="modal-body">
<asp:GridView ID="gvDetail" runat="server" AutoGenerateColumns="false" DataSourceID="SqlgvDetail"
OnRowDataBound="gvDetail_RowDataBound" CssClass="table table-hover table-bordered" EmptyDataText="No data to display." >
<Columns>
<asp:BoundField DataField="metalid" HeaderText="Metal ID"/>
<asp:BoundField DataField="enddate" HeaderText="End Date" DataFormatString="{0:dd-MM-yyyy}" />
<asp:BoundField DataField="startdate" HeaderText="Start Date" DataFormatString="{0:dd-MM-yyyy}" />
<asp:BoundField DataField="clientref" HeaderText="Client Ref" />
<asp:BoundField DataField="quantity" HeaderText="Quantity" DataFormatString="{0:N2}" />
</Columns>
</asp:GridView>
</div>
<div class="modal-footer">
<asp:Button ID="btn_close" runat="server" Text="OK" CssClass="close-modal btn-sm btn-primary"/>
</div>
</div>
</div>
<div class="modal-backdrop"></div>
Sql DataSource:
<asp:SqlDataSource ID="SqlgvDetail" runat="server" ConnectionString="<%$ ConnectionStrings:InventoryConnectionString %>">
</asp:SqlDataSource>
Code Behind:
protected void gvSummary_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "cmdDetail")
{
// Retrieve the row index stored in the CommandArgument property.
int index = Convert.ToInt32(e.CommandArgument);
// Retrieve the row that contains the button from the Rows collection.
GridViewRow row = gvSummary.Rows[index];
Button btnOpen = row.FindControl("btnOpen") as Button;
btnOpen.CssClass = "openModal";
string clientRef = row.Cells[0].Text;
SqlgvDetail.SelectCommand = " SELECT td.metalid , td.enddate , td.startdate , td.clientref , td.quantity FROM trxdetail td " +
" WHERE td.clientref = '" + clientRef + "'";
gvDetail.DataBind();
}
}
When I click a button it gets the SQL command correct but doesn't load the modal. If I then click the button again, It brings up the Modal with the SQL command loaded at the first click.
I've been stuck on this for days so any help is appreciated.
I have modal pop up after clicking an asp button :
<div class="form-group">
<asp:Button ID="btnBrand" runat="server" Text="Add brand" CssClass="btn btn-info" OnClick="btnAdd_Click" />
</div>
Code Behind :
protected void btnAdd_Click(object sender, EventArgs e) //Open Model popup
{
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(#"<script type='text/javascript'>");
sb.Append("$('#addModal').modal('show');");
sb.Append(#"</script>");
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "AddShowModalScript", sb.ToString(), false);
}
My popup modal html :
<div id="addModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="addModalLabel">Add brand details</h3>
</div>
<asp:UpdatePanel ID="updAdd" runat="server">
<ContentTemplate>
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group" title="Code">
<div class="input-group FullWidth ">
<label for="Code" class="col-sm-2 control-label">Code</label>
<div class="col-sm-10">
<asp:TextBox ID="txtCodeAdd" runat="server" CssClass="form-control" MaxLength="10" onchange="OnTextChanged()" ToolTip="Colour Code" ValidationGroup="Save"></asp:TextBox>
</div>
</div>
</div>
<div class="form-group" title="Vendor">
<div class="input-group FullWidth">
<label for="Code" class="col-sm-2 control-label">Vendor</label>
<div class="col-sm-5">
<asp:TextBox ID="txtVendorAdd" runat="server" MaxLength="20" CssClass="form-control" ToolTip="Vendor" ReadOnly="true"></asp:TextBox>
</div>
<div class="col-sm-5 row form-inline">
<asp:Button ID="btnLookup" runat="server" Text="Lookup" CssClass="btn btn-info" OnClientClick="openLookup()" />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAddRecord" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>
In this popup modal will trigger new window look-up page, my apsx lookup page as below :
<asp:UpdatePanel ID="upVendorLookup" runat="server">
<ContentTemplate>
<asp:GridView ID="grdVendor" runat="server" Width="100%" HorizontalAlign="Center"
AutoGenerateColumns="false" AllowPaging="True"
DataKeyNames="ID" CssClass="table table-condensed" GridLines="None"
OnPageIndexChanging="grdVendorPageIndexChanging">
<Columns>
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<input name="rdVendor" type="radio" value='<%# Eval("ID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Code" HeaderText="Code" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Tel1" HeaderText="Tel#1" />
<asp:BoundField DataField="Tel2" HeaderText="Tel#2" />
</Columns>
</asp:GridView>
<asp:Button ID="btnSelect" runat="server" Text="Select" CssClass="btn btn-info" OnClick="btnSelectVendor" />
</ContentTemplate>
</asp:UpdatePanel>
Code behind :
protected void btnSelectVendor(object sender, EventArgs e)
{
string selectedValue = Request.Form["rdVendor"];
HttpContext.Current.Items["rdVendor"] = selectedValue;
Server.Transfer("../CodeEntry/Brand.aspx");
}
How do pass back the selected vendorID back to the brand.aspx and refreshing the pop up modal then set the vendorID value to the textbox in the popup modal ? And also closed the pop window..
Does it possible to implement in this way ?
I am now using HttpContext and able to get the vendorID in the pageload function from brand.aspx but unable to set the vendorID to the popup modal..
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
string test = (String)HttpContext.Current.Items["rdVendor"];
txtVendorAdd.Text = test;
}
}
Any idea ?
If you fire up a modal popup using the below approach it would give you complete control on passing values between parent and popup.
http://02e34b5.netsolhost.com/youtube/Zpopup.aspx
I'm using Visual Studio 2012 backed-up by SQL Server Management Studio as its database. I'm using a gridview to see my data. I used a TemplateField I can both edit and delete a data. But it seems that when I'm deleting a certain data, it always delete the first data. What might be the solution?
Here is my asp code:
<asp:Content ID="Content4" ContentPlaceHolderID="full_main" Runat="Server">
<asp:GridView ID="gvUsers" runat="server"
class="table table-bordered data-table" AutoGenerateColumns="False"
AllowPaging="True" onpageindexchanging="gvUsers_PageIndexChanging"
onselectedindexchanged="gvUsers_SelectedIndexChanged" EnableModelValidation="True">
<Columns>
<asp:BoundField DataField="UserID" HeaderText="User ID" InsertVisible="False"
ReadOnly="True" SortExpression="UserID" />
<asp:BoundField DataField="FirstName" HeaderText="First Name"
SortExpression="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="Last Name"
SortExpression="LastName" />
<asp:BoundField DataField="EmailAddress" HeaderText="Email Adress" SortExpression="EmailAddress" />
<asp:BoundField DataField="Street" HeaderText="Street" SortExpression="Street" />
<asp:BoundField DataField="Municipality" HeaderText="Municipality" SortExpression="Municipality" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
<asp:BoundField DataField="ZipCode" HeaderText="Zip Code" SortExpression="ZipCode" />
<asp:BoundField DataField="ContactNo" HeaderText="Contact No" SortExpression="ContactNo" />
<asp:TemplateField HeaderText="Actions">
<ItemTemplate>
<a href="http://localhost:12345/CAPSTONE/Users/Edit.aspx?ID=<%# Eval("UserID") %>"
class="btn btn-primary btn-mini">Edit</a>
Delete
<div id="deleteItem" class="modal hide">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button">×</button>
<h3>Record Deletion</h3>
</div>
<div class="modal-body">
<p>Are you sure you want to delete the record?</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary"
href="http://localhost:12345/CAPSTONE/Users/Delete.aspx?ID=<%# Eval("UserID") %>">Confirm</a>
<a data-dismiss="modal" class="btn" href="#">Cancel</a>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
<center>
<h1>
No records found.</h1>
</center>
</EmptyDataTemplate>
<PagerStyle CssClass="pagination alternate" />
</asp:GridView>
Here is my code behind:
void DeleteUser(int userID)
{
con.Open();
SqlCommand cmd = new SqlCommand();
cmd.Connection = con;
cmd.CommandText = "DELETE FROM Users WHERE UserID=#UserID";
cmd.Parameters.Add("#UserID", SqlDbType.Int).Value = userID;
cmd.ExecuteNonQuery();
con.Close();
Helper.AddLog(Session["userid"].ToString(), "Delete", "Deleted a User");
Response.Redirect("Default.aspx");
}