I have the following gridview and "loadingbar" div:
<asp:GridView ID="importLogGV"
AutoGenerateColumns="false"
DataKeyNames="id"
OnRowDeleting="DeleteStuff"
runat="server"
CssClass="searchListGridView">
<Columns>
<asp:BoundField HeaderText="ID" DataField="id">
[...]
<asp:TemplateField ItemStyle-Width="120">
<ItemTemplate>
<asp:LinkButton ID="lnkDel" CommandName="Delete" Text='Delete' runat="server"
OnClientClick="return confirm('Really delete?');" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="deleting" style="text-align: center" Visible="False" runat="server"
ClientIDMode="Static">Delete in progress...<br />
<asp:Image runat="server" ID="Image1" ImageUrl="~/Images/ajax-loadingbar.gif"/>
</div>
While the eventhandler "DeleteStuff" runs (it does lots of database things than can take up to 10 seconds) in code behind I need to show the "deleting" div, and when the eventhandler finishes it need to hide the div again.
Here's my eventhandler for the delete in codebehind:
protected void DeleteStuff(object sender, GridViewDeleteEventArgs e)
{
deleting.Visible = true;
System.Threading.Thread.Sleep(5000);
deleting.Visible = false;
}
I've tried using style:display instead of the visible attribute, I've tried using a asp:panel instead of a div, but whatever I do, the eventhandler runs but the div is never shown while it runs.
I thought of showing the div with javascript when the user clicks the delete button, but how would I be able to hide it again then after the DeleteStuff process finishes?
Whenever you click the button to delete, a submit request is sent to the server and your page starts to refresh. The page will be re-rendered after the method on the server finishes execution. So whatever you do inside your method, the last effect will retain. If you want to show busy text on the browser, ajax is the way; you will have to use update panels. Try this:
The javascript:
<script type="text/javascript">
function showDeleteConfirm()
{
var isSure = confirm('Really delete?');
if(isSure)
{
document.getElementById("deleting").style['display'] = 'block';
}
}
</script>
aspx markup:
<asp:UpdatePanel id="up1" runat="server">
<ContentTemplate>
<asp:GridView ID="importLogGV"
AutoGenerateColumns="false"
DataKeyNames="id"
OnRowDeleting="DeleteStuff"
runat="server"
CssClass="searchListGridView">
<Columns>
<asp:BoundField HeaderText="ID" DataField="id">
[...]
<asp:TemplateField ItemStyle-Width="120">
<ItemTemplate>
<asp:LinkButton ID="lnkDel" CommandName="Delete" Text='Delete' runat="server"
OnClientClick="return showDeleteConfirm();" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="deleting" style="text-align: center" style="display:none" runat="server"
ClientIDMode="Static">Delete in progress...<br />
<asp:Image runat="server" ID="Image1" ImageUrl="~/Images/ajax-loadingbar.gif"/>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Code behind:
protected void DeleteStuff(object sender, GridViewDeleteEventArgs e)
{
//... Real task here
System.Threading.Thread.Sleep(5000);
deleteing.Style['display'] = 'none';
}
By the way, you need to add a ScriptManager on the page.
Have you tried:
protected void DeleteStuff(object sender, GridViewDeleteEventArgs e)
{
if (CheckAccess())
{
deleting.Visible = true;
System.Threading.Thread.Sleep(5000);
deleting.Visible = false;
}
else
{
Dispatcher.BeginInvoke((Action) (() => DeleteStuff(sender, e)));
}
}
Btw, you should probably use a Timer instead of Thread.Sleep(5000).
Related
I have a parent gridview with a child gridview
<!-- Parent -->
<asp:GridView ID="gvParent" runat="server" AutoGenerateColumns="false" Width="100%" CssClass="Grid"
DataKeyNames="SupplierReference" OnRowDataBound="gvParent_OnRowDataBound" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<img alt = "" style="cursor: pointer" src="images/plus.png" />
<asp:Panel ID="pnlOrders" runat="server" Style="display: none">
<!-- Child -->
<asp:GridView ID="gvChild" runat="server" AutoGenerateColumns="false" CssClass = "ChildGrid"
ShowFooter = "true" OnRowDataBound="gvChild_OnRowDataBound">
<Columns>
<asp:TemplateField HeaderText="Qty" ItemStyle-Width="100px">
<ItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%#Eval("Qty")%>' />
</ItemTemplate>
</asp:TemplateField >
</Columns>
</asp:GridView>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkSelectQtys" runat="server"
CommandArgument = '<%# Eval("SupplierReference")%>' CommandName="SelectQtys"
OnClientClick = "return confirm('Add these materials to this task?')"
Text = "Add" OnClick="getQty" ></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I am trying to have a textbox that the user can alter the value and when they click add I want to be able to pull that text into the C# code and work with it.
I cant get it into my C# code.
protected void getQty(object sender, EventArgs e)
{
//After clicking "add"....
//Do something here to get text from each TextBox1 in the Child gridview
}
Someone please help before I lose what little hair I have left...
protected void getQty(object sender, EventArgs e)
{
//After clicking "add"....
string s;
for(i=0; i < gvChild.Rows.Count; i++)
{
s = ((TextBox)gvChild.Rows[i].FindControl("TextBox1")).Text;
}
//Do what you want to with this string
}
What should I do to fix this? html inside a asp:button need a fix to be displayed, I use this method (it works unless I do click on the header of any column to sort the gridview):
private void FixGlyph(PlaceHolder ph, Button btn, string iconClass, string customLabelStye = "")
{
if (btn.Visible)
{
var g = new HtmlGenericControl();
g.ID = "labelFor_" + btn.ID;
g.TagName = "label";
g.Attributes.Add("for", btn.ClientID);
g.Attributes.Add("class", "" + btn.CssClass + "");
if (customLabelStye != "")
{
g.Attributes.Add("style", customLabelStye);
}
g.InnerHtml = "<i class='" + iconClass + "'></i> " + btn.Text;
ph.Controls.Add(g);
btn.Attributes.Add("style", "display:none;");
}
}
my gridview is this:
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" AllowPaging="True" AutoGenerateColumns="false" DataSourceID="AccessDataSource1" DataKeyNames="FICHA" runat="server" GridLines="None" OnSorted="GridViewFix" AllowSorting="true" CssClass="table table-hover table-striped" ShowFooter="true" PagerStyle-CssClass="bs-pagination text-center">
<Columns>
<%-- Ficha del empleado --%>
<asp:TemplateField HeaderText="Ficha" SortExpression="FICHA">
<ItemTemplate>
<asp:Label ID="lblFicha" Text='<%# Eval("FICHA") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<%-- columna de eliminar --%>
<asp:TemplateField HeaderText="<span class='glyphicon glyphicon-remove'></span>">
<ItemStyle Width="20" />
<ItemTemplate>
<asp:PlaceHolder ID="delPh" runat="server"></asp:PlaceHolder>
<asp:Button ID="delBtn" CssClass="btn btn-link " data-toggle="modal" ToolTip="Modify" data-target="#deleteModal" runat="server" autopostback="false" OnClick="delBtn_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
my Page_Load is like this
protected void Page_Load(object sender, EventArgs e)
{
foreach (GridViewRow row in GridView1.Rows)
{
Button dbtn = row.FindControl("delBtn") as Button;
PlaceHolder dPH = row.FindControl("delPh") as PlaceHolder;
FixGlyph(dPH, dbtn, "glyphicon glyphicon-remove", "padding:0 !important;");
}
}
and I even tried to use onSorted event for the gridview:
protected void GridViewFix(object sender, EventArgs e)
{
foreach (GridViewRow row in GridView1.Rows)
{
Button dbtn = row.FindControl("delBtn") as Button;
PlaceHolder dPH = row.FindControl("delPh") as PlaceHolder;
FixGlyph(dPH, dbtn, "glyphicon glyphicon-remove", "padding:0 !important;");
}
}
which gets trigged, aparently finds the controls and fix the labels but... then something happend after GridViewFix and reloads the components, again without the glyphicons
I would put your code to add the glyphs in the Page_PreRender method. It's possible that after page_load the Gridview has an event that is firing and recreating the button controls.
well, the question wasn't completly clear.. buttons have data-toggle and data-target atributes which LinkButtons don't and that's why wanted them so bad. I Needed to open a modal at the same time I triggered an event on code behind. so this fix the issue: Just trigger the modal yourself with javascript.
<asp:LinkButton ID="AddAreaBtn" runat="server" autopostback="false" OnClientClick="javascript:$('#BorrarAreaModal').modal('show');" OnClick="BorraArea_Click">
<i aria-hidden="true" class="glyphicon glyphicon-remove"></i>
</asp:LinkButton>
How to get the AppId from gridView in codebehind, if I clicked the edit image button in second row.
Aspx Code:
<asp:BoundField HeaderText="AppId" DataField="AppID" />
<asp:TemplateField HeaderText="Actions" ControlStyle-Width="20px" ItemStyle-Width="130px">
<ItemTemplate>
<asp:ImageButton ID="imgMailCamp" runat="server" ImageUrl="~/Images/AppSetup/Mail.png"
Height="18px" ToolTip="Send Mail Campaign" CssClass="grdImageAlign" CommandName="SendMail" OnClick="btnMailCamp_Click" />
<asp:ImageButton ID="imgViewApp" runat="server" ImageUrl="~/Images/AppSetup/application-view-list-icon.png"
Height="18px" ToolTip="View Appplication" CssClass="grdImageAlign" CommandName="View" OnClick="btnView_Click" />
<asp:ImageButton ID="imgEditApp" runat="server" ImageUrl="~/Images/AppSetup/Action-edit-icon.png"
Height="18px" ToolTip="Edit Application" CssClass="grdImageAlign" CommandName="Edit" OnClick="btnEdit_Click"/>
<asp:ImageButton ID="imgDeleteApp" runat="server" ImageUrl="~/Images/AppSetup/Trash-can-icon.png"
Height="18px" ToolTip="Delete Application" CssClass="grdImageAlign" CommandName="Delete" OnClick="btnDelete_Click" />
</ItemTemplate>
</asp:TemplateField>
C# Code:
protected void btnEdit_Click(object sender, EventArgs e)
{
// I need to get the current row appId, I use this appId in next page for sql query
Response.Redirect("/Secured/EditApplication.aspx?AppID="+AppID);
}
Try Like this....Don't Define Click Event of Button....Define Button Like this...
<asp:ImageButton ID="imgEditApp" runat="server"
ImageUrl="~/Images/AppSetup/Action-edit-icon.png"
Height="18px" ToolTip="Edit Application" CssClass="grdImageAlign"
CommandName="Edit"/>
And
Define Your GridView RowEditing event Like this....
protected void gv_RowEditing(object sender, GridViewEditEventArgs e)
{
Response.Redirect("/Secured/EditApplication.aspx?AppID="+YourGridViewId.Rows[e.NewEditIndex].Cells[1].Text);
}
Edit:
I think you have problem in definig RowEditingEvent.....ok you can do this...nothing to change just write this code in you Click event...
protected void btnEdit_Click(object sender, EventArgs e)
{
ImageButton ib = sender as ImageButton;
GridViewRow row = ib.NamingContainer as GridViewRow;
Response.Redirect("/Secured/EditApplication.aspx?AppID="+YourGridViewId.Rows[row.RowIndex].Cells[1].Text);
}
Edit 2
<asp:ImageButton ID="imgEditApp" runat="server"
ImageUrl="~/Images/AppSetup/Action-edit-icon.png"
Height="18px" ToolTip="Edit Application" CssClass="grdImageAlign"
CommandName="Edit" CommandArgument='<%#Eval("AppID") %>'/>
protected void btnEdit_Click(object sender, EventArgs e)
{
string appid= (sender as ImageButton).CommandArgument;
Response.Redirect("/Secured/EditApplication.aspx?AppID="+appid
}
You can get grid view cell value from this.
GridView.Rows[RowIndex].Cells[CellIndex].Text
Here "RowIndex" is row number from which you want to get data and "CellIndex" is cell number from which you want to get data.
I think event "OnRowCommand" of gridview is best suited for your problem.
use blow link for more details
http://www.codeproject.com/Tips/564619/Example-of-gridview-rowcommand-on-Button-Click
it should be with commandargument
aspx
<asp:ImageButton ID="imgEditApp" CommandArgument='<%# Eval("AppID") %>' runat="server" ... OnClick="btnEdit_Click"/>
code
protected void gv_RowEditing(object sender, GridViewEditEventArgs e)
{
int categoryId = Convert.ToInt32(e.CommandArgument);
Response.Redirect("/Secured/EditApplication.aspx?AppID="+categoryId);
}
or u can use PostBackUrl property of imagebutton and it would be like this:
<asp:ImageButton ID="imgEditApp" PostBackUrl='<%# string.Format("/Secured/EditApplication.aspx?AppID={0}", Eval("AppID")) %>' runat="server" />
Check this code snippet.
This is the code in aspx file having two columns DataBound "AppId" and TemplateColumn "Action" containing Image Button. Observe CommandName and CommandArgument properties of Image Button. Also Define OnRowCommand Event listener for gridview.
<asp:GridView ID="grdDisplayData" runat="server" AutoGenerateColumns="false"
EnableViewState="false" onrowcommand="grdDisplayData_RowCommand">
<Columns>
<asp:BoundField HeaderText="AppId" DataField="AppId" />
<asp:TemplateField HeaderText="Action" >
<ItemTemplate>
<asp:Button ID="btnEdit" runat="server" Text="Edit" CommandName="MyEdit"
CommandArgument="<%# ((GridViewRow) Container).RowIndex%>"/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ImageAction">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" runat="server" Width="15px" Height="15px"
CommandName="ImgEdit" CommandArgument="<%# ((GridViewRow) Container).RowIndex%>"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
And here is the code behind code. The e.CommandArument returns the index of the row in which the image button was clicked.
protected void grdDisplayData_RowCommand(object sender, System.Web.UI.WebControls.GridViewCommandEventArgs e)
{
if (e.CommandName == "ImgEdit")
{
int RowIndex = Convert.ToInt32(e.CommandArgument);
Response.Redirect("/Secured/EditApplication.aspx?AppID=" + grdDisplayData.Rows[RowIndex].Cells[1].Text.Trim());
}
}
Let me know if this fixed your problem.
Cheers!!!
Piyush Deshpande
I need to display a list of clients, but display them differently based on a parameter.
To do this, I have a gridvew, and inside there is a user control. That control has an "if" based on the type.
My problems:
If I add a button inside the control, when it is pressed I get a button validation error.
If I disable validation errors (enableEventValidation="false"), I get button commands to work, but I'm not able to change values on the control either with full postbacks or an updatepanel.
<asp:GridView ID="gvClients" runat="server" AutoGenerateColumns="False" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<xxx:ClientListGridItem ID="ClientListItem1" runat="server" Client='<%# ((Client) Container.DataItem) %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
ClientListGridItem.ascx :
<% if (Client.Style >= 100)
{
%>
<div class="ClientListItem1">
...
<%
}
else
{
%>
<div class="ClientListItem2">
<asp:Button ID="Button2" runat="server" onclick="Button1_Click" Text="Button" />
...
<%
}
%>
I'm sure there is prettier, more object oriented way to do this too...
Changing ClientListGridItem.ascx into:
<asp:Panel id="Div1" CssClass="ClientListItem1" runat="server">
...
</asp:Panel>
<asp:Panel id="Div2" CssClass="ClientListItem2" runat="server">
<asp:Button ID="Button2" runat="server" onclick="Button1_Click" CausesValidation="false" Text="Button" />
..
</asp:Panel>
<script runat="server">
override void OnDataBinding(EventArgs e) {
Div1.Visible = Client.Style >= 100;
Div2.Visible = ! Div1.Visible;
}
</script>
should work.
I need to add a column with a file upload control to my grid view so that I can upload files against any particular row. Is it possible to do this, ideally I need to be able to do this without putting the gridview into it's edit state.
You can use this within the as follows:
<asp:TemplateField HeaderText="UploadImage">
<ItemTemplate>
<asp:Image ImageUrl="~/images/1.jpg" runat="server" ID="image" /> // shown only when not in edit mode
</ItemTemplate>
<EditItemTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" /> // shown only in edit mode
</EditItemTemplate>
</asp:TemplateField>
At last include a as follows to enter edit mode.
<asp:commandField showEditButton="true" showCancelButton="true">
Then add two events as follows:
protected void GridView1_RowEditing(object sender, GridViewUpdateEventArgs e)
{
gvwID.EditIndex=e.NewEditIndex;
BindGrid();
}
protected void GridView1_RowCancelEdit(object sender, GridViewUpdateEventArgs e)
{
gvwID.EditIndex=-1;
BindGrid();
}
The FileUpload control, will not automatically save the uploaded file. To save the file you need to use the FileUpload control’s SaveAs method. Before you can use the SaveAs method you need to get the instance of the FileUpload control for the row you are editing. To get the instance of the control you can hook up to the GridView’s RowUpdating event. The following code will get the instance of the FileUpload control and save the uploaded file:
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
int RowID=Convert.ToInt32(gvwID.DataKeys[e.RowIndex].value);
FileUpload fileUpload = GridView1.Rows[e.RowIndex].FindControl("FileUpload1") as FileUpload;
if(fileUpload.HasFile)
{
fileUpload.SaveAs(System.IO.Path.Combine(Server.MapPath("Images"), fileUpload.FileName));
//update db using the name of the file corresponding to RowID
}
gvwID.EditIndex=-1;
BindGrid();
}
Hope this will help...
The following link will help you:
http://msdn.microsoft.com/en-us/library/7tas5c80.aspx
It has a sample code for adding a DateTimePicker to datagridview cell.
You may add the fileupload control the same way...
Hope this helps...
Sudha have a great post with full functionality of file upload in GridView:
Fileupload control in gridview?
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID"
DataSourceID="AccessDataSource1" Width="148px" OnRowCommand="GridView1_RowCommand">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" SortExpression="ID" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblFileUpLoad" runat="server"></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />
</EditItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowEditButton="true" ShowDeleteButton="true" />
</Columns>
</asp:GridView>
....
The EditTemplate looks like this:
<EditItemTemplate>
<asp:TextBox ID="txtImage" runat="server" Text='<%# Bind("Image") %>' Visible="False"></asp:TextBox>
<asp:FileUpload ID="FileUpload1" runat="server" />
</EditItemTemplate>
In code behind this will upload the file on Row Update:
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
GridViewRow row = GridView1.Rows[e.RowIndex] as GridViewRow;
FileUpload FileUpload1 = (FileUpload)GridView1.Rows[e.RowIndex].FindControl("FileUpload1");
if (FileUpload1 != null && FileUpload1.HasFile)
{
FileUpload1.SaveAs(Server.MapPath("~/uploads/" + myfilename));
}
}
This check is in place in case no file is selected so previous name is picked. Note in edit template we have placed a textbox that has visibility set to false which binds to the image name in the DB
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (GridView1.EditIndex == -1) return;
FileUpload fileUpLoad = GridView1.Rows[GridView1.EditIndex].FindControl("FileUpload1") as FileUpload;
string fileName = fileUpLoad.FileName;
TextBox txtImage = GridView1.Rows[GridView1.EditIndex].FindControl("txtImage") as TextBox;
if (fileUpLoad != null && fileUpLoad.HasFile)
{
txtImage.Text = fileUpLoad.FileName;
}
else
{
txtImage.Text = txtImage.Text;
}
}
<asp:ScriptManager runat="server" ID="scm"></asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="upMain" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView AutoGenerateColumns="False" runat="server" ID="dt">
<Columns>
<asp:TemplateField HeaderText="Catagory">
<ItemTemplate>
<asp:DropDownList runat="server" ID="ddlSubCat">
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Attachments">
<ItemTemplate>
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="updFU"> <ContentTemplate>
<asp:FileUpload runat="server" ID="updCon" /><asp:Button runat="server" ID="btnUpload" Text="Upload" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
</asp:UpdatePanel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>