I'm new to C# and asp.net and I have a GridView that has enabled selection on it and I put a button that is called View Products. When a user clicks on View Products, I want to show a panel that has more information for the button.
I have tried everything and looked up multiple ways but nothing is helping me find an answer to my problem.
Picture of the GridView
Ok, this is common, but answers are varied, and I tend to not like how most answers work.
I suggest this approach:
On that page, drop in a "div" with the controls and even additional buttons (such as perhaps a delete command, save command, and "cancel" to simple go back to the grid view.
So, first up, our grid view say like this:
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="ID"
CssClass="table" Width="45%" ShowHeaderWhenEmpty="true">
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="HotelName" HeaderText="HotelName" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="Description" HeaderText="Description" />
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="cmdEdit" runat="server" Text="Edit"
CssClass="btn myshadow"
OnClick="cmdEdit_Click"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
And say right below the above, we can simple drop in some standard text boxes and controls inside of a "div" that we hide/show for the details when clicked on.
So, say like this:
<div id="EditRecord" runat="server"
style="float:left;display:none;border:solid 2px;padding:15px">
<div style="float:left" class="iForm">
<label>HotelName</label>
<asp:TextBox ID="txtHotel" runat="server" width="280" f="HotelName"/> <br />
<label>First Name</label>
<asp:TextBox ID="tFN" runat="server" Width="140" f="FirstName" /> <br />
<label>Last Name</label>
<asp:TextBox ID="tLN" runat="server" Width="140" f="LastName" /> <br />
<label>City</label>
<asp:TextBox ID="tCity" runat="server" Width="140" f="City" />
<br />
<label>Province</label>
<asp:TextBox ID="tProvince" runat="server" Width="75" f="Province" ></asp:TextBox> <br />
</div>
<div style="float:left;margin-left:20px" class="iForm">
<label>Description</label> <br />
<asp:TextBox ID="txtNotes" runat="server" Width="400" TextMode="MultiLine"
Height="150px" f="Description" ></asp:TextBox> <br />
<asp:CheckBox ID="chkActive" Text=" Active" runat="server" TextAlign="Right" />
<asp:CheckBox ID="chkBalcony" Text=" Has Balcony" runat="server" TextAlign="Right" />
</div>
<div style="clear:both"></div>
<button id="cmdSave" runat="server" class="btn myshadow" onserverclick="cmdSave_ServerClick" >
<span aria-hidden="true" class="glyphicon glyphicon-floppy-saved"> Save</span>
</button>
<button id="cmdCancel" runat="server" class="btn myshadow"
style="margin-left:15px" onserverclick="cmdCancel_ServerClick" >
<span aria-hidden="true" class="glyphicon glyphicon-arrow-left"> Back/Cancel</span>
</button>
<button id="cmdDelete" runat="server" class="btn myshadow" style="margin-left:15px">
<span aria-hidden="true" class="glyphicon glyphicon-trash"> Delete</span>
</button>
</div>
Again, nothing speical - just controls and text boxes.
So, now our code to load can be this:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
LoadGrid();
}
void LoadGrid()
{
GridView1.DataSource = MyRst("SELECT * FROM tblHotelsA ORDER BY HotelName");
GridView1.DataBind();
}
Code for when we click on a button:
Now we can't (like normal) double click on the button to create the event since that button is "nested" in the gv. So, in the markup, just type in for the button
onclick=
When you hit "=" sign, a popup gives you the option to create a plane jane click event for the button. So, choose create event.
Thus the button in the gv becomes this:
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="cmdEdit" runat="server" Text="Edit"
CssClass="btn myshadow"
OnClick="cmdEdit_Click"/>
</ItemTemplate>
</asp:TemplateField>
And now our button click event:
it will get the row, load up the controls in that div, and then display the div.
I have this code:
protected void cmdEdit_Click(object sender, EventArgs e)
{
Button cmdEdit = (Button)sender;
GridViewRow gRow = (GridViewRow)cmdEdit.NamingContainer;
int PKID = (int)GridView1.DataKeys[gRow.RowIndex]["ID"];
DataTable rstData = MyRst($"SELECT * FROM tblHotelsA WHERE ID = {PKID}");
General.FLoader(EditRecord, rstData.Rows[0]); // load up the controls
GridView1.Style.Add("display","none");
EditRecord.Style.Add("display", "normal");
}
And the results are thus this:
Note that the cancel button is rather simple.
You hide the "div" and re-show (un-hide) the grid.
this:
protected void cmdCancel_ServerClick(object sender, EventArgs e)
{
GridView1.Style.Add("display", "normal");
EditRecord.Style.Add("display", "none");
}
And I did use a helper routine (just returns a table).
That was this:
DataTable MyRst(string strSQL)
{
DataTable rstData = new DataTable();
using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
{
using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
{
cmdSQL.Connection.Open();
rstData.Load(cmdSQL.ExecuteReader());
}
}
return rstData;
}
So above is the basic idea, and workings.
And we could now that we have a div?
We could call a jQuery.UI "dialog", and that would in place of the div hide/show, simple call jQuery.UI, and then you get this effect:
I can post the code for how that pop up works, but really, the simple idea is a simple button, get PK row id, load that data into some controls, then hide the grid, show the div, and you off and running.
Related
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.
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 searched about this topic all over the internet and have come up with nothing. Either I am having a hardtime wording my problem or I am do something so wrong that no one else has ever even tried it...
I have a gridview. I am using a button in the gridview to execute a command to open a ModalPopupExtender. That part works great. Once I have the popup open, I want to be able to press a button to execute a function which will perform a Sql query and bind a gridview that is INSIDE the popup panel. After that the user can perform an action with the gridview which would close the modal popup.
Here is my HTML -
<cc1:ModalPopupExtender runat="server" ID="MPE_Issue" PopupControlID="pnlIssue" BackgroundCssClass="ModalPopupBG"
TargetControlID="Hid_Sno" CancelControlID="btnIssueCancel">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlIssue" runat="server" Style="display: none" >
<div class="HelloPopup">
<div>
<br />
<h2> Issue Equipment</h2>
<br />
<asp:Panel runat="server" ID="pnlIssueSearch" DefaultButton="btnIssueSearch">
<div class="block" style="text-align: right; margin-left: 50px">
<asp:Label CssClass="lblBlock" runat="server" ID="lblIssueSearch" Text="Search:"></asp:Label>
</div>
<div class="block">
<asp:TextBox runat="server" ID="txtIssueSearch" Width="160px"></asp:TextBox>
<asp:ImageButton runat="server" ID="btnIssueSearch" ImageUrl="../Images/search.png" OnClick="btnIssueSearch_Click" />
</div>
</asp:Panel>
<asp:Panel runat="server" ID="pnlIssueSubmit" DefaultButton="btnIssueSubmit">
<div style="width: 275px; margin: auto; height: 295px; overflow: scroll;">
<asp:GridView runat="server" ID="gvIssue" AutoGenerateColumns="false" CssClass="mGrid" OnRowCommand="gvIssue_RowCommand">
<Columns>
<asp:TemplateField HeaderText="Qty">
<ItemTemplate>
<asp:TextBox ID="txtIssueQty" runat="server" Text='<%# Bind("QTY") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Assignment" DataField="FIRST_NAME" />
</Columns>
</asp:GridView>
</div>
<div class="center">
<asp:Button runat="server" ID="btnIssueSubmit" Text="Issue" OnClick="btnIssueSubmit_Click" />
<input type="button" id="btnIssueCancel" value="Cancel" />
</div>
</asp:Panel>
And the codebehind -
protected void gv1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "issue")
{
GridViewRow gvr3 = (GridViewRow)(((ImageButton)e.CommandSource).NamingContainer);
string itemNo = ((Label)gvr3.Cells[0].FindControl("lblItemNo")).Text;
btnIssueSubmit.Visible = false;
txtIssueSearch.Text = "";
MPE_Issue.Show();
}
protected void btnIssueSearch_Click(object sender, ImageClickEventArgs e)
{
string query = "SELECT QTY, NEW_EMP_ID as NAME FROM TRANSACTION_TRACKING WHERE NEW_EMP_ID = #inputINT";
string inputString = "%" + txtIssueSearch.Text + "%";
int inputINT = Convert.ToInt32(txtIssueSearch.Text);
SqlConnection con = new SqlConnection(CS);
SqlDataAdapter da = new SqlDataAdapter(query, con);
SqlParameter parameter = new SqlParameter("inputString", inputString);
SqlParameter parameter2 = new SqlParameter("inputINT", inputINT);
da.SelectCommand.Parameters.Add(parameter);
da.SelectCommand.Parameters.Add(parameter2);
DataSet ds = new DataSet();
da.Fill(ds);
gvIssue.DataSource = ds;
gvIssue.DataBind();
btnIssueSubmit.Visible = true;
MPE_Issue.Show();
}
EDIT/SOLUTION
I was going about solving this problem wrong. I wanted to override the nature of asp.net instead of going with the flow and solving the problem systematically. To overcome this issue I changed my data bind into its own method and had the button within the panel activate the that method, set the popup control to Open(), and also set a boolean from false to true. Then on the page_load I have an event that checks the boolean and automatically does the data Method if it is true (and therefore a search parameter is in the textbox).
Thanks all for the suggestions and help.
If you make your pnlIssueSubmit an UpdatePanel then do an asyncpostback trigger on btnIssueSearch wouldn't that fix your issue? Because your imageButton needs to do a post back in order to refresh you grid but then you'll lose your modal. Something like this:
<asp:UpdatePanel id="pnlIssueUpdate" runat="server">
<ContentTemplate>
<asp:Panel runat="server" ID="pnlIssueSubmit" DefaultButton="btnIssueSubmit">
<div style="width: 275px; margin: auto; height: 295px; overflow: scroll;">
<asp:GridView runat="server" ID="gvIssue" AutoGenerateColumns="false" CssClass="mGrid" OnRowCommand="gvIssue_RowCommand">
<Columns>
<asp:TemplateField HeaderText="Qty">
<ItemTemplate>
<asp:TextBox ID="txtIssueQty" runat="server" Text='<%# Bind("QTY") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Assignment" DataField="FIRST_NAME" />
</Columns>
</asp:GridView>
</div>
<div class="center">
<asp:Button runat="server" ID="btnIssueSubmit" Text="Issue" OnClick="btnIssueSubmit_Click" />
<input type="button" id="btnIssueCancel" value="Cancel" />
</div>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:asyncPostBackTrigger ControlID="btnIssueSearch" />
</Triggers>
I was going about solving this problem wrong. I wanted to override the nature of asp.net instead of going with the flow and solving the problem systematically. To overcome this issue I changed my data bind into its own method and had the button within the panel activate the that method, set the popup control to Open(), and also set a boolean from false to true. Then on the page_load I have an event that checks the boolean and automatically does the data Method if it is true (and therefore a search parameter is in the textbox).
I need to Edit and Delete Row of GridView using C# ASP.NET.
I tried once and able to fill the data in TextBox after click on Edit Button,But I have also one Image to Edit and what I need is when user will click on Edit Image, The Image will also Display in proper place to Edit.In case of Delete part I have Image in Anchor Tag and I need which event I should pass from GridView and define in code behind page so that I can do the operation.
faq.aspx:
<div class="col-md-6">
<label for="question" accesskey="T"><span class="required">*</span> Question</label>
<asp:TextBox ID="TextBox1" runat="server" size="30" value="" name="question" ></asp:TextBox>
<div id="noty" style="display:none;" runat="server"></div>
<label for="answer" accesskey="A"><span class="required">*</span> Answer</label>
<asp:TextBox ID="TextBox2" runat="server" size="30" value="" name="answer" ></asp:TextBox>
<div id="Div1" style="display:none;" runat="server"></div>
</div>
<div class="col-md-6 bannerimagefile">
<label for="insertimage" accesskey="B"><span class="required">*</span> Insert Image</label>
<asp:FileUpload runat="server" class="filestyle" data-size="lg" name="insertimage" id="FileUpload1" onchange="previewFile()" />
<label for="bannerimage" accesskey="V"><span class="required">*</span> View Image</label>
<div style="padding-bottom:10px;">
<asp:Image ID="Image3" runat="server" border="0" name="bannerimage" style="width:70px; height:70px;" />
</div>
<div class="clear"></div>
<asp:Button ID="Button1" runat="server" Text="Submit" class="submit"
onclick="Button1_Click" />
</div>
</div>
</div>
</div>
<!--end_1st_faq_add_div-->
<!--2nd_list_banner_view_div-->
<div class="widget-area">
<h2 class="widget-title"><strong>FAQ List</strong></h2><asp:HiddenField ID="HiddenField1" runat="server" />
<div class="streaming-table margin-top-zero padding-top-zero">
<div class="table-responsive">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
Width="100%" CssClass="table table-striped table-bordered margin-top-zero"
onselectedindexchanged="GridView1_SelectedIndexChanged">
<Columns>
<asp:TemplateField HeaderText="Sl No">
<ItemTemplate>
<asp:Label ID="faqid" runat="server" Text='<%#Eval("FAQ_ID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Question" >
<ItemTemplate>
<asp:Label ID="question" runat="server" Text='<%#Eval("Question") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Answer" >
<ItemTemplate>
<asp:Label ID="answer" runat="server" Text='<%#Eval("Answer") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Image" >
<ItemTemplate>
<asp:Image ID="Image1" runat="server" border="0" name="bannerimage" style="width:70px; height:70px;" ImageUrl='<%# "/Upload/" + Convert.ToString(Eval("Image")) %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action" >
<ItemTemplate>
</i>
<a href=" " data-toggle="tooltip" title="" class="btn btn-xs btn-danger" data-original-title="Delete"><i class="fa fa-times"></i>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
faq.aspx.cs:
protected void GridView1_SelectedIndexChanged(object sender, GridViewSelectEventArgs e)
{
int index = Convert.ToInt32(e.NewSelectedIndex);
TextBox1.Text = GridView1.Rows[index].Cells[1].Text;
TextBox2.Text = GridView1.Rows[index].Cells[2].Text;
HiddenField1.Value = GridView1.Rows[index].Cells[0].Text;
Button1.Text = "Update";
}
Please help me to resolve this issue.
I see that you have only item temples in grid view.
Hence I'm going to tell you two ways to do this:
1) Add edit template in grid view and handle the OnRowEditing event of grid view.
2) Add a hyperlink with key of row and link to another page where you can design the editor like you have done in this page by pre-populating the data using the key(primary key)
it is better that you use Modern data control like 'entitydataSource' or 'linqdateSource' or 'sqlDataSource' and bind your gridview by them .
using 'itemtemplate' for all rows is not a good way , instead fill you grid with 'dataSource' and use 'itemTemplate' for delete or Edit Button . send button name As commandName and rowID As commandArgument to gridViewItemCommand event in code behind.
in code behindin in GridviewItemcommand_Event with switch statement loop through itemCommands like this :
int itemID = int.parse(e.commandArgument)
switch(e.commandName)
{
case 'DoEdite' :{//some Code
Viewstate["ID"] = itemID;
break;}
case 'DoDelete' :{//some Code
break;}
}
you have the itemID(e.commandeArgument) and know which button clicked(e.commandName) .so you can do what you want.
In edit Mode when you send data to textBoxes use viewstate or other collection to hold your dataID because of after Edit, for Update edited date
you need it,
Hi guys i used a grid view to insert multiple rows of record into the database . this is how my grid view looks like
The problem is that all radio buttons can be selected , i need only 1 radio button to be selected for each row .. . My web form works in the way where user have to select the correct answer out of the two textboxes with a radio button then i will have to submit the checked answer to database . is this possible?
aspx : `
<asp:ButtonField Text="SingleClick" CommandName="SingleClick"
Visible="False" />
<asp:TemplateField HeaderText="Question">
<ItemTemplate>
<br />
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Answer">
<ItemTemplate>
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:RadioButton ID="RadioButton1" runat="server" />
<br />
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:RadioButton ID="RadioButton2" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<FooterTemplate>
<asp:Button ID="btnAdd" runat="server" Text="+" onclick="btnAdd_Click1" />
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>`
code behind :
protected void RadioButton1_CheckedChanged(object sender, EventArgs e)
{
//Clear the existing selected row
foreach (GridViewRow oldrow in GridView1.Rows)
{
((RadioButton)oldrow.FindControl("RadioButton1")).Checked = false;
}
//Set the new selected row
RadioButton rb = (RadioButton)sender;
GridViewRow row = (GridViewRow)rb.NamingContainer;
((RadioButton)row.FindControl("RadioButton1")).Checked = true;
}
I assume you're talking about ASP.NET. Did you try grouping the radio buttons together?
Here's an example.
<asp:RadioButton id="rBtn1" GroupName="Fruits"
Text="Apple" runat="server"/>
<asp:RadioButton id="rBtn2" GroupName="Fruits"
Text="Orange" runat="server"/>
<asp:RadioButton id="rBtn3" GroupName="Colors"
Text="Blue" runat="server"/>
<asp:RadioButton id="rBtn4" GroupName="Colors"
Text="Red" runat="server"/>
When Apple is selected, Orange can't be selected. If Orange is selected while Apple is selected, Apple will automatically be un-selected. But when Apple is selected, when you click Blue, Apple won't be un-selected.
Just try to use a javascript function like
<script language="javascript" type="text/javascript">
function SelectSingleRadiobutton(rdbtnid) {
var rdBtn = document.getElementById(rdbtnid);
var rdBtnList = document.getElementsByTagName("input");
for (i = 0; i < rdBtnList.length; i++) {
if (rdBtnList[i].type == "radio" && rdBtnList[i].id != rdBtn.id)
{
rdBtnList[i].checked = false;
}
}
}
</script>
Grid View
<asp:GridView ID="gvdata" runat="server" CssClass="Gridview" AutoGenerateColumns="false" DataKeyNames="UserId" HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="White">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:RadioButton id="rdbUser" runat="server" OnClick="javascript:SelectSingleRadiobutton(this.id)" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="UserName" HeaderText="Name"/>
<asp:BoundField DataField ="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="Location" HeaderText="Location" />
</Columns>
</asp:GridView>
Try to check aspdotnet
Check this asp.net
Hope it works.
<input id="HDDepMood_0" name="DepMood" type="radio" runat="server" />
Same name for the one group.
I think you may proceed like this :-
protected void rbtnSelect_CheckedChanged(object sender, EventArgs e)
{
RadioButton selectButton = (RadioButton)sender;
GridViewRow gvrow = (GridViewRow)selectButton.Parent.Parent;
var radio = (RadioButton)gvRow.FindControl("rdo");// rdo is ID of your radio button:-
if(radio[0].id=selectButton.id)
radio[1].checked=false;
else if(radio[1].id=selectButton.id)
radio[0].checked=false;
}
Just add some script to your page to set the groupname:
$('input[type=radio]').each(function () {
var array = $(this).attr('name').split('$');
$(this).attr('name', array[array.length - 1]);
});
This wil adjust the name rendered to the correct group name.
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script language="javascript">
function singleRbtnSelect(chb) {
$(chb).closest("table").find("input:radio").prop("checked", false);
$(chb).prop("checked", true);
}
</script>