We Keep Coding

Showing modal popup extender on click of a link that's in a table

I have a table of users (and their info). I want to have a link so they could edit any given user. I realized that I couldn't use asp:button and asp:hyperlink controls because those controls won't show in the html table. I've tried
Edit
But it won't fire anything in the function below
protected void editBtn_ServerClick(object sender, EventArgs e)
{
//stuff
}
I've tried creating a click event when my page loads (as suggested in another question on stackoverflow) but this too doesn't work...
HtmlAnchor HA = new HtmlAnchor();
HA.ServerClick += new EventHandler(editBtn_ServerClick);
I don't want to send the user to another page but I can't use asp:button to accomplish what I want so thus am using .
Any help would be greatly appreciated! Thank you in advance.

Actually, you can most certainly pop up a dialog or some such to edit a given row.
And you can with ease drop in a plane jane button into that table, or in this case I suggest using a gridview, or even a listview (my favaorte).
so, lets do two simple things:
drop in a control to display our "table" or data. Then drop in a div to edit the data. That "div" will be what we pop up to edit that one row of "details" in a form like display (as opposed as you note trying to edit data "in place" in a row of data which is a poor UI).
So, say we have this markup for hte table (a grid view).
<asp:GridView ID="GridView1"
runat="server" CssClass="table" AutoGenerateColumns="false"
width="45%" DataKeyNames="ID" >
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="HotelName" HeaderText="Hotel Name" />
<asp:BoundField DataField="Description" HeaderText="Description" ItemStyle-Width="270" />
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<asp:Button ID="cmdEdit" runat="server" Text="Edit"
CssClass="btn" OnClick="cmdEdit_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Note how in above we just dropped in a plain jane asp.net button to "edit" the data.
While you can just drag + drop in the button from the toolbox, you can't double click on the button to create a click event, but you CAN in markup type in the onclick=
The instant you write "onclick=", (and hit the = button), then you get this in inteli-sense:
So, choose create event. After you do that, your button will show a plain jane click event, like this:
<asp:Button ID="cmdEdit" runat="server" Text="Edit"
CssClass="btn" OnClick="cmdEdit_Click" />
Might not seem like somthing occured, but we now have a simple click event wrired up and code behind will have such a code stub.
We go back to the above click event in a bit.
Ok, so now we need some code to load up the "table" (gridview).
That code is this:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
LoadData();
}
void LoadData()
{
string strSQL = "SELECT * FROM tblHotelsA ORDER BY HotelName";
DataTable rstData = MyRst(strSQL);
GridView1.DataSource = rstData;
GridView1.DataBind();
}
public 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;
}
And now we see/have this:
Ok, next part:
We need to create a "edit" area on this page. A simple "div" with some text boxes etc. will suffice.
We ALSO need somthing to pop up the "edit area". There are oh so many choices, and since 99% of web sites already have jQuery, then addopting and adding jQuery.UI to our project is a good choice. You don't want to "roll your own" dialog or popup system when so many "great" choices exist.
So, we will assume jQuery, and jQuery.UI for this simple popup.
The next part is some markup in a div for editing the row. It can be anything quite much you cook up, but say for each hotel, I have all the details I want to edit. Place your markup in our div.
So, lets call the div "editrecord".
So, this:
<div id="EditRecord" runat="server" style="float: left; display: none; border: solid 2px; padding: 15px">
<style>
.iForm label {display: inline-block;width: 90px
}
.iForm input {border-radius: 8px;border-width: 1px;margin-bottom: 10px
}
.iForm textarea {border-radius: 8px;border-width: 1px;margin-bottom: 10px
}
.iForm input[type=checkbox] {
margin-right: 8px
}
</style>
<div style="float: left" class="iForm">
<label>HotelName</label>
<asp:TextBox ID="txtHotel" runat="server" Width="280" />
<br />
<label>First Name</label>
<asp:TextBox ID="tFN" runat="server" Width="140" />
<br />
<label>Last Name</label>
<asp:TextBox ID="tLN" runat="server" Width="140" />
<br />
<label>City</label>
<asp:TextBox ID="tCity" runat="server" Width="140" />
<br />
<label>Province</label>
<asp:TextBox ID="tProvince" runat="server" Width="75"></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>
<asp:Button ID="cmdSave" runat="server" Text="Save" CssClass="btn" />
<asp:Button ID="cmdCancel" runat="server" Text="Cancel" CssClass="btn" Style="margin-left: 10px" />
<asp:Button ID="cmdDelete" runat="server" Text="Delete" CssClass="btn" Style="margin-left: 20px" />
</div>
For now, lets just hide table, show edit div.
So,, our edit code becomes this:
protected void cmdEdit_Click(object sender, EventArgs e)
{
Button btn = sender as Button;
GridViewRow gRow = btn.NamingContainer as GridViewRow;
int PKID = (int)GridView1.DataKeys[gRow.RowIndex]["ID"];
string strSQL = "SELECT * FROM tblHotelsA WHERE ID = " + PKID;
DataRow rstData = MyRst(strSQL).Rows[0];
txtHotel.Text = rstData["HotelName"].ToString();
tFN.Text = rstData["FirstName"].ToString();
tLN.Text = rstData["LastName"].ToString();
tCity.Text = rstData["City"].ToString();
tProvince.Text = rstData["Province"].ToString();
chkActive.Checked = (bool)rstData["Active"];
chkBalcony.Checked = (bool)rstData["Balcony"];
txtNotes.Text = rstData["Description"].ToString();
// hide table
GridView1.Style.Add("display", "none");
EditRecord.Style.Add("display", "nomral");
}
So, now we can click on any row, and the gv hides, and our edit area shows.
So, like this:
so, we can of course wire up the buttons to save.
but, the basic above approach quite much gets us our edit system, and one row click to launch edit for one row.
And assuming we have jQuery.UI installed?
Then we can change our edit button to not hide the table, but pop the above gv, and that code would look like:
So, we add this code to the client side:
<style>
.dialogWithDropShadow {
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}
</style>
<script>
function pophotel() {
var mydiv = $("#EditRecord")
mydiv.dialog({
modal: true, appendTo: "form",
title: "Edit Hotel", closeText: "",
width: "835px",
dialogClass: "dialogWithDropShadow"
});
}
function MyClose() {
popdiv = $('#EditRecord')
popdiv.dialog('close')
}
</script>
and our server side (to fill out the div) is now this:
protected void cmdEdit_Click(object sender, EventArgs e)
{
Button btn = sender as Button;
GridViewRow gRow = btn.NamingContainer as GridViewRow;
int PKID = (int)GridView1.DataKeys[gRow.RowIndex]["ID"];
string strSQL = "SELECT * FROM tblHotelsA WHERE ID = " + PKID;
DataRow rstData = MyRst(strSQL).Rows[0];
txtHotel.Text = rstData["HotelName"].ToString();
tFN.Text = rstData["FirstName"].ToString();
tLN.Text = rstData["LastName"].ToString();
tCity.Text = rstData["City"].ToString();
tProvince.Text = rstData["Province"].ToString();
chkActive.Checked = (bool)rstData["Active"];
chkBalcony.Checked = (bool)rstData["Balcony"];
txtNotes.Text = rstData["Description"].ToString();
// pop the edit div using jQuery.UI dialog
Page.ClientScript.RegisterStartupScript(Page.GetType(), "MyJava", "pophotel()", true);
}
So, we now get/see this:
So, note some imporant things:
First up, we don't have to show, expose, or even in the markup hide the database PK "id". The datakeys feature allows us to NOT expose this information to the client side.
And on row click, then we get the index of the clicked row, and then grab the database row, and hten load our "div", and then pop that div.
Note how nice the jQuery.UI dialog is. It gray out the background, and that is a "modal" popup.
As noted, even if you don't adopt jQuery.UI, you can hide the grid, show the edit div, and on save button, save the data, hide the div, and show the gridview. So, the extra "bonus" part 2 with a cool popup is really optional, and does not change much how the code works.
Of course, I should post the "save" button code, and I will if you ask or wish to see how the save button code works.
Edit: How to save the data back
So, in our load data, we save the PK, say like this:
Session["PKID"] = PKID;
and thus save code becomes this:
protected void cmdSave_Click(object sender, EventArgs e)
{
int PKID = (int)Session["PKID"];
string strSQL = "SELECT * FROM tblHotelsA WHERE ID = " + PKID;
using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
{
using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
{
conn.Open();
SqlDataAdapter da = new SqlDataAdapter(cmdSQL);
SqlCommandBuilder daU = new SqlCommandBuilder(da);
DataTable rstData = new DataTable();
rstData.Load(cmdSQL.ExecuteReader());
DataRow OneRow = rstData.Rows[0];
OneRow["HotelName"] = txtHotel.Text;
OneRow["FirstName"] = tFN.Text;
OneRow["LastName"] = tLN.Text;
OneRow["City"] = tCity.Text;
OneRow["Province"] = tProvince.Text;
OneRow["Active"] = chkActive.Checked;
OneRow["Balcony"] = chkBalcony.Checked;
OneRow["Description"] = txtNotes.Text;
da.Update(rstData);
}
// optional show update in gv
LoadGrid();
}
}
You will notice that we don't have to close the pop dialog, since a post-back will blow it out for us. (popup's can't survive a post-back).
You can see a example of mine based on the above.
Try this editing example to see such code in action:
Pop edit example

Add new data to gridview without refreshing entire gridview

I know the title might make my question look like a duplicate so please read the complete question first.
I have 3 dropdowns in my webform and based on those parameters the data is retrieved from the database and my gridview is populated. What I need is that once a result is displayed, if the user changes the parameters, the new retrieved data should be displayed below the old data. But currently my gridview is refreshing entirely and only the data based on new parameters is displayed.
I have read that one way is to use viewstate but I dont understand what it is. Can someone please help? Thank you.

Ok, so this is a difficult question. It is rather easy to filter, and have a cumulative filter.
So, say we have this screen:
And lots more rows.
So, I can say lets filter by a city.
So this:
Note how we do allow multiple city in the multi-select drop down.
So, I now have this:
Now, lets select those ONLY with a description.
So this:
And then say only active ones. So, this:
So, above is quite easy to setup. Note how any option NOT selected is left out of the critera.
but, a BIG problem exists in the above.
What happens if I want Active from say B.C. but NOT active from Alberta???
I can't do that, and hence your problem.
What we could do however is add a button to above to SAVE the resulting filter, and put the "list" of filters say into a list box or collection.
we then have a search button to search on our collection of filters.
Let me see if this can work - I'll add to above a "box" or collection of each filter.
I would think a union query with distinct row for each filter would do the trick.
So, above example is not too hard - a "cumulative" filter. In fact, the code patter for 2 or 15 filters is quite easy to do here.
However, adding up separate filter requests and combine them? That is somewhat difficult to do.
Edit: Multiple filters
so, while in above, I could say filter by city and get all active, but THEN I want to filter by another city, and get all NON active!!!
That's the problem here.
So, we would have to add code to SAVE the filter. And the HUGE problem with that is how then do we save each filter to "add up" each filter set we want?
We could try and save the raw SQL, but such SQL would be subject to sql injection, and we want to always use parameters.
So, we can and could adopt a design in which we SAVE the resulting SqlCommand object. And then merge the results.
So, now our UI becomes like this:
Lets grab and filter all those from city Edmonton, but Active,
so, this:
We now hit save filter and this:
And now we filter by say City = Banff, but don't care about active or not.
So we have this:
We then save that filter - and now we have this:
I now hit the filter button below the list of filters, and we get this:
So, how does this code work?
Well, I simple saved the Sqlcommand object to a collection (list), and thus combine the results.
So, first our markup at the top for the filter stuff.
<h4>Filters</h4>
<div style="float:left">
<asp:Label ID="Label1" runat="server" Text="Search Hotel"></asp:Label>
<br />
<asp:TextBox ID="txtHotel" runat="server"></asp:TextBox>
</div>
<div style="float:left;margin-left:20px">
<asp:Label ID="Label2" runat="server" Text="Search City"></asp:Label>
<br />
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
</div>
<div style="float:left;margin-left:20px">
<asp:Label ID="Label3" runat="server" Text="Must Have Description"></asp:Label>
<br />
<asp:CheckBox ID="chkDescripiton" runat="server" />
</div>
<div style="float:left;margin-left:20px">
<asp:Label ID="Label4" runat="server" Text="Show only Active Hotels"></asp:Label>
<br />
<asp:CheckBox ID="chkActiveOnly" runat="server" />
</div>
<div style="float:left;margin-left:20px">
<asp:Button ID="cmdSearch" runat="server" Text="Search" CssClass="btn" OnClick="cmdSearch_Click"/>
</div>
<div style="float:left;margin-left:20px">
<asp:Button ID="cmdClear" runat="server" Text="Clear Fitler" CssClass="btn" OnClick="cmdClear_Click"/>
</div>
<div style="float:left;margin-left:20px">
<asp:Button ID="cmdTest" runat="server" Text="Save Filter"
CssClass="btn" OnClick="cmdTest_Click"
OnClientClick="return myfilterprompt()"
/>
<asp:HiddenField ID="HFilterName" runat="server" ClientIDMode="Static"/>
<script>
function myfilterprompt() {
sFilter = ""
sFilter = prompt('Enter name for filter ')
if ( (sFilter === null) || (sFilter === "") ){
return false
}
$('#HFilterName').val(sFilter)
return true
}
</script>
</div>
<div style="float:left;margin-left:30px;width:190px">
<asp:ListBox ID="lstFilters" runat="server" Width="100%" Height="100px"
DataTextField="sFilterName" >
</asp:ListBox>
<asp:Button ID="cmdMultiFilter" runat="server" Text="Filter"
CssClass="btn" OnClick="cmdMultiFilter_Click" style="float:left" />
<asp:Button ID="cmdMultiClear" runat="server" Text="Clear"
CssClass="btn" OnClick="cmdMultiClear_Click" style="float:right"/>
</div>
then below above is our grid:
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="ID"
CssClass="table" Width="60%" 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="Province" HeaderText="Province" />
<asp:BoundField DataField="Description" HeaderText="Description" />
<asp:BoundField DataField="Active" HeaderText="Active" />
</Columns>
</asp:GridView>
So, code to load:
List<MyFilter> MyFilters = new List<MyFilter>();
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack == false)
{
SqlCommand cmdSQL = new
SqlCommand("SELECT * FROM tblHotels WHERE ID = 0");
LoadGrid(cmdSQL);
Session["MyFilters"] = MyFilters;
}
else
MyFilters = (List<MyFilter>)Session["MyFilters"];
}
public void LoadGrid(SqlCommand cmdSQL)
{
DataTable rstData = MyRstP(cmdSQL);
GridView1.DataSource = rstData;
GridView1.DataBind();
}
And now our search button:
protected void cmdSearch_Click(object sender, EventArgs e)
{
SqlCommand cmdSQL = GetMyCommand();
LoadGrid(cmdSQL);
}
SqlCommand GetMyCommand()
{
string strSQL = "SELECT * FROM tblHotels ";
string strORDER = " ORDER BY HotelName";
string strFilter = "";
SqlCommand cmdSQL = new SqlCommand();
if (txtHotel.Text != "")
{
strFilter = "(HotelName like #HotelName + '%')";
cmdSQL.Parameters.Add("#HotelName", SqlDbType.NVarChar).Value = txtHotel.Text;
}
if (txtCity.Text != "")
{
if (strFilter != "") strFilter += " AND ";
strFilter += "(City Like #City + '%') ";
cmdSQL.Parameters.Add("#City", SqlDbType.NVarChar).Value = txtCity.Text;
}
if (chkActiveOnly.Checked)
{
if (strFilter != "") strFilter += " AND ";
strFilter += "(Active = 1)";
}
if (chkDescripiton.Checked)
{
if (strFilter != "") strFilter += " AND ";
strFilter += "(Description is not null)";
}
if (strFilter != "") strSQL += " WHERE " + strFilter;
strSQL += strORDER;
cmdSQL.CommandText = strSQL;
return cmdSQL;
}
And now our save the filter button code:
protected void cmdTest_Click(object sender, EventArgs e)
{
MyFilter OneFilter = new MyFilter();
OneFilter.sFilterName = HFilterName.Value;
OneFilter.cmdSQL = GetMyCommand();
MyFilters.Add(OneFilter);
lstFilters.DataSource = MyFilters;
lstFilters.DataBind();
}
public class MyFilter
{
public string sFilterName { get; set; }
public SqlCommand cmdSQL = new SqlCommand();
}
And our multi-filter code button.
Now, for large data sets - not a great idea, but a start:
protected void cmdMultiFilter_Click(object sender, EventArgs e)
{
List<DataTable> MyTables = new List<DataTable>();
foreach (MyFilter OneFilter in MyFilters)
{
DataTable rstDT = MyRstP(OneFilter.cmdSQL);
MyTables.Add(rstDT);
}
DataTable rstData = MyTables[0];
for (int i = 1;i < MyTables.Count;i++)
{
rstData.Merge(MyTables[i]);
}
GridView1.DataSource = rstData;
GridView1.DataBind();
}
so, you can build list up of "filters" and display them in a listbox and then have a filter button that merges all of the filtering.
And one more helper routine I used:
public DataTable MyRstP(SqlCommand cmdSQL)
{
DataTable rstData = new DataTable();
using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
{
using (cmdSQL)
{
cmdSQL.Connection = conn;
conn.Open();
rstData.Load(cmdSQL.ExecuteReader());
}
}
return rstData;
}
These systems can be really nice. Often a group of managers will say, lets grab all customers from west coast. Yuk - too many. Ok, only those with purchases in last 2 months - ah, that's nice.
then they say, lets get all customers who never purchased anything, but from the south - and add those to the list - but only active on our mailing list.
So, this type of slice and dice - get some of those, and then get some of these, and then combine them?
This type of business query system and being able to combine these, and those, and them, and then toss in a few more? Often they will keep going say until such time they get say 10,000 results (which happens to be how many catalogs they have left they would like to send out).

So, I solved my problem by using a little outside the box thinking. I am posting it here for anyone visiting this question or having a same problem in the future could see this:
So what I did is that I extracted the data from the database based on the parameters selected by the user from the dropdowns. In the database, I had created a temp table to store the extracted temporarily. So I inserted the data into that temporary table and used that table to populate the gridview. I had to add a reset button, when the user clicked it the all the data is deleted from the temp table and also the page reset to its default with gridview not visible and dropdowns having no selection.

How can i get the textbox value in selected row in gridview

I am working on a project in c# asp.net.
I created a gridview and connected it to a database. My code is like that;
<asp:GridView ID="GridView1" runat="server"
class="table table-bordered table table-hover " AutoGenerateColumns="false" HeaderStyle-Height="40px" OnRowCommand="GridView1_RowCommand1" >
<Columns>
<asp:TemplateField HeaderText="Numune Parçası" >
<ItemTemplate>
<asp:Literal ID="Literal22" runat="server" Text='<%# Eval("Açıklama") %>'></asp:Literal>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Analiz">
<ItemTemplate>
<asp:Literal ID="Literal112" runat="server" Text='<%# Eval("Analiz") %>'></asp:Literal>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Tartım" ItemStyle-Width="10%">
<ItemTemplate>
<asp:TextBox id="txttartim" runat="server" class="form-control" ></asp:TextBox>
</ItemTemplate>
<ItemStyle Width="10%"></ItemStyle>
</asp:TemplateField>
<asp:TemplateField HeaderText="Birim">
<ItemTemplate>
<asp:DropDownList ID="birimlist" class="form-control" runat="server" >
<asp:ListItem>g</asp:ListItem>
<asp:ListItem>mg</asp:ListItem>
<asp:ListItem>ml</asp:ListItem>
<asp:ListItem>cm2</asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Kaydet">
<ItemTemplate>
<asp:LinkButton ID="Btn_Indir" runat="server"
class="btn btn-primary btn-sm" Text="Kaydet" CommandName="Open" CommandArgument='<%# Eval("ID") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle BackColor="#D14124" CssClass="gridheader" ForeColor="White" HorizontalAlign="Left" />
</asp:GridView>
And the code behind is like that
protected void GridView1_RowCommand1(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Open")
{
int RowIndex = ((GridViewRow)((LinkButton)e.CommandSource).NamingContainer).RowIndex;
string name = ((TextBox)GridView1.Rows[RowIndex].FindControl("txttartim")).Text;
DropDownList bir = (DropDownList)GridView1.Rows[RowIndex].FindControl("birimlist");
string birim = bir.SelectedItem.Value;
}
}
But my problem is that i can not get the value of textbox and dropdownlist in which selected row.
The strings name and birim is null.

Give this a go:
if (e.CommandName == "Open")
{
GridViewRow selectedRow = ((GridViewRow)((LinkButton)e.CommandSource).NamingContainer);
string name = ((TextBox)selectedRow.FindControl("txttartim")).Text;
DropDownList bir = (DropDownList)selectedRow.FindControl("birimlist");
string birim = bir.SelectedItem.Value;
}

Ok, I often just drop in a plane jane asp.net button, and I don't bother with using the GV built in commands (such as command).
However, you have a command, so you can trigger the "row" command as you have.
And the "row command" fires before the selected index fires, and in fact fires before the selected index triggers.
I note that you passing the "ID". It not really necessary, since a GV has what is called DataKeys feature. That feature lets you get the row (database) PK id, but REALLY nice is you don't have to expose, show, or even use a hidden field, or anything else to get that data key. (this is great for several reasons - one being that you don't have to hide or shove away, or even use the command argument to get that database PK row. The other HUGE issue is then your database pk values are NEVER exposed client side - so nice for security).
Ok, So, make sure your row event is being triggered, and you should be able to use this, first the markup for the Linkbutton:
<asp:TemplateField HeaderText="View" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:LinkButton ID="cmdView" runat="server" Text="View" CommandName="Open" cssclass="btn btn-info" />
</ItemTemplate>
</asp:TemplateField>
Note how I do NOT worry or pass the "ID". As noted, datakeys takes care of this, and in the GV def, we have this:
<asp:GridView ID="GVHotels" runat="server" class="table"
AutoGenerateColumns="false" DataKeyNames="ID"
bla bla bla
So, now our code is this:
protected void GVHotels_RowCommand(object sender, GridViewCommandEventArgs e)
{
LinkButton lBtn = e.CommandSource as LinkButton;
GridViewRow gRow = lBtn.NamingContainer as GridViewRow;
int PKID = (int)GVHotels.DataKeys[gRow.RowIndex]["ID"];
Debug.Print("Row index click = " + gRow.RowIndex);
Debug.Print("Database PK id = " + PKID);
// get combo box for this row
DropDownList cbo = gRow.FindControl("cboRating") as DropDownList;
Debug.Print("Combo box value = " + cbo.SelectedItem.Value);
Debug.Print("Combo box Text = " + cbo.SelectedItem.Text);
Output:
Row index click = 7
Database PK id = 68
Combo box value = 2
Combo box Text = Good
So, use datakeys - you thus DO NOT have have to put in extra attributes here and there and everywhere to get the PK row value.
In fact, really, using row command is often MORE of a pain, and you can DUMP the command name to trigger that button click. And REALLY nice then is you get a separate nice command "code stub" for each button (or link button) in the GV. (no need to try and shove all that code into the row command, and then a bunch of if/then or "case" statements to run code for a given command.
So, I in fact suggest you use this:
<asp:TemplateField HeaderText="View" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:LinkButton ID="cmdView" runat="server" Text="View"
OnClick="cmdView_Click1" cssclass="btn btn-info" />
</ItemTemplate>
</asp:TemplateField>
So, all we did was add a plane jane good old regular click event. It will not fire row command, and in fact will not trigger "selected index changed" for the GV, but in most cases I don't need them. So, now, if you 2 or 5 buttons, you just think of them as plane jane regular buttons. (just type in onclick in teh markup, and choose "create new event" that intel-sense pops up). So, now our code for the button is seperate, and not part of the row command. Our code thus becomes this:
protected void cmdView_Click1(object sender, EventArgs e)
{
LinkButton lBtn = sender as LinkButton;
GridViewRow gRow = lBtn.NamingContainer as GridViewRow;
int PKID = (int)GVHotels.DataKeys[gRow.RowIndex]["ID"];
Debug.Print("Row index click = " + gRow.RowIndex);
Debug.Print("Database PK id = " + PKID);
// get combo box for this row
DropDownList cbo = gRow.FindControl("cboRating") as DropDownList;
Debug.Print("Combo box value = " + cbo.SelectedItem.Value);
Debug.Print("Combo box Text = " + cbo.SelectedItem.Text);
}
So, I tend to not bother with row command - better to just have that plane jane click event. Note the use of naming container - but the rest of the code is the same. I would ONLY use "commandName" to trigger the row event, since THEN the gv index changed event fires - and that useful for highlighting the whole row - but if you don't care, then don't even bother with CommandName - just use regular click events, and as noted, this is even better, since then each button gets it 100% own nice little code stub like any other button click tends to have.
So I grabbed a dropdownlist but your code could be say this:
TextBox tBox = gRow.FindControl("txttartim") as TextBox;
debug.Print (tBox.Text);

I solve the problem.
When i write the code in the Page_load section, it works! It is not null anymore.
if (!Page.IsPostBack)
{
load();
..
}

Gridview in parent page is not refreshing after closing child page - ASP.NET WEB APP

I have a parent page and it contains a gridview and an aspx button. when user clicks on this button a child page will popup as modal. After inserting data from child page it should close and refresh the parent page. As a result gridview on parent page should show the inserted data. But using below code gridview is not refreshing.
Parent.aspx Page:
if (!IsPostBack)
{
string sqlquery=""//query here
SqlDataAdapter da = null;
da = new SqlDataAdapter(sqlquery);
DataTable dt = new DataTable();
da.Fill(dt);
dt.AcceptChanges();
gv_dept.DataSource = null;
gv_dept.DataSource = dt;
gv_dept.DataBind();
update_gv.Update();
}
<a href="#" id="toolbar_day2" onclick="create();">
Add New</a>
<div align="center">
<asp:UpdatePanel ID="update_gv" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="gv_dept" runat="server" AutoGenerateColumns="False"
GridLines="Both" DataKeyNames="dept_id">
<Columns>
<asp:BoundField DataField="dept_name" HeaderText="Name" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
JS:
function create(start, end, resource) {
createModal().showUrl('Child.aspx');
}
function createModal() {
var modal = new DayPilot.Modal();
modal.closed = function () {
if (this.result && this.result.refresh) {
dp_day.commandCallBack("refresh", { message: this.result.message });
dp_week.commandCallBack("refresh", { message: this.result.message });
dp_month.commandCallBack("refresh", { message: this.result.message });
}
dp_day.clearSelection();
dp_week.clearSelection();
dp_month.clearSelection();
};
return modal;
}
DayPilot.Modal = function() {
// default values
this.autoStretch = true; // height will be increased automatically to avoid scrollbar, until this.maxHeight is reached
this.autoStretchFirstLoadOnly = false;
this.border = "10px solid #008080";
this.corners = 'Rounded';
this.className = null;
this.dragDrop = true;
this.height = 650; // see also autoStretch
this.maxHeight = null; // if not set, it will stretch until the bottom space is equal to this.top
this.opacity = 30;
this.scrollWithPage = true; // modal window will scroll with the page
this.top = 3;
this.useIframe = true; // only for showHtml()
this.width = 880;
this.zIndex = null;
}
Child.aspx Page:
protected async void ButtonOK_Click(object sender, EventArgs e)
{
//Inserting data here.
Hashtable ht = new Hashtable();
ht["refresh"] = "yes";
ht["message"] = "Created.";
Modal.Close(this, ht);
Page.ClientScript.RegisterStartupScript(this.GetType(), "RefreshParentPage", "<script language='javascript'>RefreshParentPage();</script>");
}
function RefreshParentPage() {
window.location.href="Parent.aspx";
}
When putting breakpoints on gridview binding, the datatable reflects the newly inserted rows. But gridview is not refreshing with it.

Ok here how we can do this.
the BIG WHOPPER issue is we don't really know what kind of dialog you are popping.
And I count about what, 150 DIFFERENT dialog utilities we can go and grab?
But, lets use one of the more popular ones. (jQuery.UI). Since we all use jQuery rather often, might as well add the jQuery.UI to your application.
However, ANY KIND of dialog system will work.
So, lets assume we have a Grid, say like this:
<asp:GridView ID="MyGrid" runat="server" CssClass="table table-hover"
DataKeyNames="ID" AutoGenerateColumns="false" >
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" />
<asp:BoundField DataField="HotelName" HeaderText="Hotel Name" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="Province" HeaderText="Province" />
<asp:CheckBoxField DataField="Active" HeaderText="Active" />
</Columns>
</asp:GridView>
<br />
<asp:Button ID="cmdAdd" runat="server" Text="Add Hotel" OnClientClick="popadd();return false;"/>
And our code behind to load this grid:
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack == false)
{
LoadGrid();
}
}
public void LoadGrid()
{
using (SqlCommand cmdSQL = new SqlCommand("SELECT * From tblHotels ORDER by HotelName",
new SqlConnection(Properties.Settings.Default.TEST3)))
{
// now load grid
cmdSQL.Connection.Open();
MyGrid.DataSource = cmdSQL.ExecuteReader();
MyGrid.DataBind();
}
}
Ok, the above, we now have this:
And note the above plain jane button - add hotels.
We like most dialog systems, now have to add our "add hotel" markup.
A simple div, with some text boxes, and of course a add or cancel button.
So, I have this simple markup:
<div id="mypop" style="display:none">
<br />
<div style="text-align:right">
<p>Hotel Name:<asp:TextBox ID="txtHotel" runat="server"></asp:TextBox></p>
<p>First Name:<asp:TextBox ID="txtFirst" runat="server"></asp:TextBox></p>
<p>Last Name:<asp:TextBox ID="txtLast" runat="server"></asp:TextBox></p>
<p>City:<asp:TextBox ID="txtCity" runat="server"></asp:TextBox></p>
<p>Province:<asp:TextBox ID="txtProvince" runat="server"></asp:TextBox></p>
<p>Is Active:<asp:CheckBox ID="chkActive" runat="server"></asp:CheckBox></p>
<p>
<asp:Button ID="cmdAddOk" runat="server" Text="Ok-add" OnClick="cmdAddOk_Click" />
<asp:Button ID="cmdCancel" runat="server" Text="Cancel" Style="margin-left:25px"
OnClientClick="MyClose();return false"/>
</p>
</div>
</div>
(note how display = none - the dialog (jQuery.UI) will turn on the display of this dialog for us.
And now our JS code for the pop button.
<script>
function popadd() {
var mydiv = $('#mypop')
mydiv.dialog({
autoOpen: false, modal: true, title: 'Add Hotel', width: '400px',
position: { my: 'top', at: 'top+150' },
closeText: ''
});
// Open the dialog
mydiv.parent().appendTo($("form:first"))
mydiv.dialog('open')
}
function MyClose() {
var mydiv = $('#mypop')
mydiv.dialog('close')
}
</script>
And now we simple write some code to add a row to the data table. There are a gazillion ways to do this, but I often actually use a data row, since it saves me a HUGE WACK OF SQL and parameters - this approach can be a real time saver.
And it feels like MS Access or old FoxPro days - easy code to write!!!
So, in the dialog, we have two buttons. the cancel button just closes the dialog.
but the cmdAdd, that is again plane jane code behind, and looks like this:
protected void cmdAddOk_Click(object sender, EventArgs e)
{
using (SqlCommand cmdSQL = new SqlCommand("SELECT * FROM tblHotels WHERE ID = 0",
new SqlConnection(Properties.Settings.Default.TEST3)))
{
cmdSQL.Connection.Open();
DataTable rst = new DataTable();
rst.Load(cmdSQL.ExecuteReader());
SqlDataAdapter dUpdate = new SqlDataAdapter(cmdSQL);
SqlCommandBuilder sUpdate = new SqlCommandBuilder(dUpdate);
DataRow OneRow = rst.NewRow();
OneRow["FirstName"] = txtFirst.Text;
OneRow["LastName"] = txtLast.Text;
OneRow["HotelName"] = txtHotel.Text;
OneRow["City"] = txtCity.Text;
OneRow["Province"] = txtProvince.Text;
OneRow["Active"] = chkActive.Checked;
rst.Rows.Add(OneRow);
dUpdate.Update(rst);
// now refresh grid to show new row
LoadGrid();
}
}
So the final result looks like this:
And if I ok to add, then we get this:
So some suggestions here:
You do NOT need to post large amounts of HTML, but you REALLY NEED TO SHARE how you popping up that dialog - just plain silly to make the readers here have to guess.
And you needed to show your button add code and code behind to add the row.
Again, no need for HUGE WHACKS of code, but at least make a half baked effort here.
However, the above is one of 10,000 ways of doing this, and I choose to use jQuery.UI for this, and as noted, I have no idea which of the 10,000 possible choices and options you are or were using to pop your prompt dialog, since you failed to share that with us.
Now, I am zero upset here - but I MOST certainly am giving you a big push on how to ask better questions here.
The above should give you at least a working design pattern that you can use for popping a dialog, and then prompting the user, adding the row, and THEN VERY important is to re-load the grid to show that row just added.
There are some great ideas in the above - and you can use them for years to come. Good luck!
Edit:
Ok, the new example is the pop page is a DIFFERNT page.
So we have a page called AddHotelPop.aspx.
It looks like this:
<form id="form1" runat="server">
<div>
<br />
<div style="text-align:right">
<p>Hotel Name:<asp:TextBox ID="txtHotel" runat="server"></asp:TextBox></p>
<p>First Name:<asp:TextBox ID="txtFirst" runat="server"></asp:TextBox></p>
<p>Last Name:<asp:TextBox ID="txtLast" runat="server"></asp:TextBox></p>
<p>City:<asp:TextBox ID="txtCity" runat="server"></asp:TextBox></p>
<p>Province:<asp:TextBox ID="txtProvince" runat="server"></asp:TextBox></p>
<p>Is Active:<asp:CheckBox ID="chkActive" runat="server"></asp:CheckBox></p>
<p>
<asp:Button ID="cmdAddOk" runat="server" Text="Ok-add" OnClick="cmdAddOk_Click" />
<asp:Button ID="cmdCancel" runat="server" Text="Cancel" Style="margin-left:25px"
OnClientClick="MyClose();return false"/>
</p>
</div>
</div>
</form>
Note how we have the cancel button when clicked will actually call the js code to dismiss the dialog - but the js code to close still remains on the calling page.
Now this works, because the add code in this 2nd page JUMPS BACK to our original page. So the Add button on that 2nd page looks like this:
protected void cmdAddOk_Click(object sender, EventArgs e)
{
using (SqlCommand cmdSQL = new SqlCommand("SELECT * FROM tblHotels WHERE ID = 0",
new SqlConnection(Properties.Settings.Default.TEST3)))
{
cmdSQL.Connection.Open();
DataTable rst = new DataTable();
rst.Load(cmdSQL.ExecuteReader());
SqlDataAdapter dUpdate = new SqlDataAdapter(cmdSQL);
SqlCommandBuilder sUpdate = new SqlCommandBuilder(dUpdate);
DataRow OneRow = rst.NewRow();
OneRow["FirstName"] = txtFirst.Text;
OneRow["LastName"] = txtLast.Text;
OneRow["HotelName"] = txtHotel.Text;
OneRow["City"] = txtCity.Text;
OneRow["Province"] = txtProvince.Text;
OneRow["Active"] = chkActive.Checked;
rst.Rows.Add(OneRow);
dUpdate.Update(rst);
Response.Redirect("GridViewFun.aspx");
}
}
So now our first page? It just loads the grid - code is same as before.
But, now our pop code and markup is this:
<asp:Button ID="cmdAdd" runat="server" Text="Add Hotel" OnClientClick="popadd();return false;"/>
</div>
<div id="mypop" style="display:none">
</div>
<script>
function popadd() {
var mydiv = $('#mypop')
mydiv.dialog({
autoOpen: false, modal: true, title: 'Add Hotel', width: '400px',
position: { my: 'top', at: 'top+150' },
closeText: ''
});
// Open the dialog
// mydiv.parent().appendTo($("form:first"))
mydiv.load("AddHotelPop.aspx")
mydiv.dialog('open')
}
function MyClose() {
var mydiv = $('#mypop')
mydiv.dialog('close')
}
</script>
Note NOW how the div pop up is BLANK. We will load + pop the 2nd other page into that div for display.
The results now look the same. The only real differnce is that the add button in the 2nd page does that re-direct back to the first page.
And thus our page will now have the first load - not a post back, and our gird will re-load again.
As noted, we using jQuery.UI for the above, and that .Load() feature is what allows one to pull + load into that div a whole other page.
The UI and screen shots look and work identical as to the above screen shots, but the dialog pop page is now a separate aspx page.

Access HyperLink inside ItemTemplate inside TemplateField ASP.Net WebForms

I have an ASP TemplateField inside a data populated GridView as follows:
<asp:GridView ID="gvReport" runat="server" AutoGenerateColumns="False" ShowHeaderWhenEmpty="true" OnRowDataBound="gvReport_RowDataBound" CssClass="table table-bordered">
<Columns>
<asp:BoundField DataField="Delete" HeaderText="Delete" SortExpression="Delete" />
<asp:TemplateField HeaderText="Delete">
<ItemTemplate>
<asp:HyperLink runat="server" NavigateUrl='<%# "Edit?from=Delete&ID=" + Eval("ID") %>' ImageUrl="Assets/SmallDelete.png" SortExpression="PathToFile" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
In other words, at the end of each row, there is a delete 'button'. I can tell whether a particular row/record has been deleted by checking the true/false value of the BoundField Delete in my code behind as follows:
if (e.Row.RowType == DataControlRowType.DataRow)
{
TableCell statusCell = e.Row.Cells[0];
if (statusCell.Text == "True")
{
//change ImageUrl of Hyperlink for this row
}
}
Right now, my icon is red for delete, but in the case that a record has already been deleted,
I would like to change the image to a different icon (a blue one).
How can I change this ImageUrl if statusCell evaluates to true?

ok, so we will need two parts here:
We need (want) to persist the data table that drives the grid).
The REASON for this?
We kill about 3 birds with one stone.
We use the data table store/save/know the deleted state
We use that delete information to toggle our image
(and thus don't have to store the state in the grid view).
We ALSO then case use that table state to update the database in ONE shot, and thus don't have to code out a bunch of database operations (delete rows). We just send the table back to the database.
In fact in this example, I can add about 7 lines of code, and if you tab around, edit the data? It ALSO will be sent back to the database. And this means no messy edit templates and all that jazz (which is panful anyway).
Ok, so, here is our grid - just some hotels - and our delete button with image:
markup:
<div style="width:40%;margin-left:20px">
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False"
DataKeyNames="ID" CssClass="table table-hover borderhide" >
<Columns>
<asp:TemplateField HeaderText="HotelName" >
<ItemTemplate><asp:TextBox id="HotelName" runat="server" Text='<%# Eval("HotelName") %>' /></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="FirstName" SortExpression="ORDER BY FirstName" >
<ItemTemplate><asp:TextBox id="FirstName" runat="server" Text='<%# Eval("FirstName") %>' /></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="LastName" >
<ItemTemplate><asp:TextBox id="LastName" runat="server" Text='<%# Eval("LastName") %>' /></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="City" >
<ItemTemplate><asp:TextBox id="City" runat="server" Text='<%# Eval("City") %>' /></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Delete">
<ItemTemplate>
<asp:ImageButton ID="cmdDelete" runat="server" Height="20px" Style="margin-left:10px"
ImageUrl="~/Content/cknosel.png"
Width="24px" OnClick="cmdDelete_Click"></asp:ImageButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<asp:Button ID="cmdDeleteAll" runat="server" Text="Delete selected" Width="122px"
OnClientClick="return confirm('Delete all selected?')" />
</div>
Ok, and the code to load up the grid - NOTE WE persist the data table!!!!!
Code:
DataTable rstTable = new DataTable();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
LoadGrid();
else
rstTable = (DataTable)ViewState["rstTable"];
}
void LoadGrid()
{
// load up our grid
using (SqlCommand cmdSQL = new SqlCommand("SELECT * from tblHotels ORDER BY HotelName ",
new SqlConnection(Properties.Settings.Default.TEST4)))
{
cmdSQL.Connection.Open();
rstTable.Clear();
rstTable.Load(cmdSQL.ExecuteReader());
GridView1.DataSource = rstTable;
GridView1.DataBind();
}
ViewState["rstTable"] = rstTable;
}
Ok, so far, real plain jane. The result is this:
Ok, so now all we need is to add the delete button click event.
That code looks like this:
protected void cmdDelete_Click(object sender, ImageClickEventArgs e)
{
ImageButton btn = (ImageButton)sender;
GridViewRow rRow = (GridViewRow)btn.Parent.Parent;
DataRow OneRow = rstTable.Rows[rRow.DataItemIndex];
// toggle data
if (OneRow.RowState == DataRowState.Deleted)
{
// undelete
OneRow.RejectChanges();
btn.ImageUrl = "/Content/cknosel.png";
}
else
{
// delete
OneRow.Delete();
btn.ImageUrl = "/Content/ckdelete.png";
}
}
Again, really simple. But NOTE how we use the data table row state (deleted or not).
And this ALSO toggles the image for the delete button.
So, we don't have to care, worry, or store/save the sate in the grid.
So, if I click on a few rows to delete, I now get this:
So far - very little code!!!
Ok, so now the last part. the overall delete selected button. Well, since that is dangerous - note how I tossed in a OnClientClick event to "confirm the delete. if you hit cancel, then of course the server side event does not run.
But, as noted since we persisted the table? Then we can send the table deletes right back to the server without a loop. The delete code thus looks like this:
protected void cmdDeleteAll_Click(object sender, EventArgs e)
{
// send updates (deletes) back to database.
using (SqlCommand cmdSQL = new SqlCommand("SELECT * from tblHotels WHERE ID = 0",
new SqlConnection(Properties.Settings.Default.TEST4)))
{
cmdSQL.Connection.Open();
SqlDataAdapter daUpdate = new SqlDataAdapter(cmdSQL);
SqlCommandBuilder daUpdateBuild = new SqlCommandBuilder(daUpdate);
daUpdate.Update(rstTable);
}
LoadGrid(); // refesh display
}
So, note how easy it is to update (delete) from the database. If you look close, I used text boxes for that grid - not labels. The reason of course is that if the user tabs around in the grid (and edits - very much like excel), then I can with a few extra lines of code send those changes back to the database. In fact the above delete button code will be 100% identical here (it will send table changes back with the above code. So, if we add rows, edit rows then the above is NOT really a delete command, but is in fact our save edits/deletes/adds command!