I have a Gridview with the following markup:
<asp:GridView ID="gdvResxKeyValue" runat="server" Width="100%" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Image ID="imgEditResxValue" CssClass="sfEdit" runat="server" ImageUrl="~/Administrator/Templates/Default/images/imgedit.png" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I need to have a handler for the Image click event. Is there any easier way to do so?
You can use an Image Button instead of Image. Try this code.
<asp:GridView ID="gdvResxKeyValue" runat="server" Width="100%" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="imgEditResxValue" CssClass="sfEdit" runat="server" ImageUrl="~/Administrator/Templates/Default/images/imgedit.png" OnClick="YourEventName" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
You just need to specify your server side event name here.
Use an asp button and set its style to be display:none
<asp:Image ID="imgEditResxValue" CssClass="sfEdit" runat="server" ImageUrl="~/Administrator/Templates/Default/images/imgedit.png" onclick="ClickImage(this)" />
.......
<asp:Button ID="hiddenButton" runat="server" OnClick="hiddenButton_Click" style="display:none"></asp:Button>
<script type="text/javascript">
function ClickImage(imageControl)
{
document.getElementById('<%=hiddenButton.ClientID%>').click();
}
</script>
This will raise the server side event of the button and you can do your work there.
Try this:
jquery Solution
<asp:Image ID="imgEditResxValue" CssClass="sfEdit" runat="server" ImageUrl="~/Administrator/Templates/Default/images/imgedit.png" onclick="this.next().click()"/>
<asp:LinkButton Text="text" runat="server" OnClick="call_method"/>
Related
Problem:
FileUpload's File name not accessible inGridView
Explanation:
I have FileUpload in GridView, On GridView RowUpdate, i select a file in FileUpload, but when I couldn't get file Name in GridView's Rowupdate.
<asp:TemplateField HeaderText="Select Report">
<EditItemTemplate>
<asp:FileUpload ID="fuMaintenanceScanedReport" runat="server" Width="248px" Font-Size="Smaller" EnableViewState="true"/>
</EditItemTemplate>
<ItemTemplate>
<asp:FileUpload ID="fuMaintenanceScanedReport" runat="server" Width="248px" Font-Size="Smaller" />
</ItemTemplate>
<ItemStyle Width="250px" />
</asp:TemplateField>
Here is my Code behind code
protected void GvSchedule_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
string fileUpload = ((FileUpload)GvSchedule.Rows[e.RowIndex].Cells[3].FindControl("fuMaintenanceScanedReport")).FileName;
}
I was using Update Panel, and due to that it was not posting back FileUpload server control, that is why not getting files.
I simply remove the Update panel
Put it in updatepanel inside gridview and add trigers for that.
<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:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" /> // shown only in edit mode
<asp:Button ID="GridUploadButton" runat="server" Text="Upload" OnClick="GridUploadButton_Click" />
</ContentTemplate>
<Triggers> <asp:PostBackTrigger ControlID="GridUploadButton" />
</Triggers>
</EditItemTemplate>
</asp:TemplateField>
How can I add edit form row in Asp.NET GridView control like this RadGrid!
When I click on the Edit button, I want to add an edit form row under the edit button row.
Here my Grid
<asp:GridView ID="gvEG" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField>
<EditItemTemplate>
<asp:DropDownList runat="server" ID="ddlPersonnel" />
</EditItemTemplate>
<ItemTemplate>
//..
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<EditItemTemplate>
//..
</EditItemTemplate>
<ItemTemplate>
//..
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<EditItemTemplate>
<asp:LinkButton ID="lnkUpdate" runat="server" CommandName="Update" />
<asp:LinkButton ID="lnkCancel" runat="server" CommandName="Cancel" />
</EditItemTemplate>
<ItemTemplate>
<asp:LinkButton ID="lnkEdit" runat="server" CommandName="Edit" />
<asp:LinkButton ID="lnkDel" runat="server" CommandName="Delete" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle></EditRowStyle>
</asp:GridView>
In your GridView attributes add AutoGenerateEditButton and a custom event handler for OnRowEditing like this:
<asp:GridView ID="gvEG" runat="server" AutoGenerateColumns="False" AutoGenerateEditButton="True" OnRowEditing="gvEG_RowEditing">
Then in your code-behind make a new event handler method called "gvEG_RowEditing". Have your method add a panel under the row that is being edited. Add the necessary fields to the panel as well as an update button. Create a click event handler for the update button and have it save all the fields to the database and then rebind the GridView.
An event bound to a DropDownList in a standalone GridView obviously would work in this fashion , but things are bit more complicated in this scenario.
The event does not fire for the DropDownList. What's interesting is the event bound to the Button Does fire. Not sure what the difference would be between the DropDownList and TextBox.
I've tried both OnSelectedIndexChanged and OnTextChanged - neither work.
The nesting is as follows:
GridView A
Ajax Accordion
GridView B (With DropDownList)
<AjaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header>
</Header>
<Content>
<asp:GridView runat="server" ID="gv" AutoGenerateColumns="false"
BorderWidth="0" AlternatingRowStyle-BorderStyle="None" ShowFooter="true">
<Columns>
<asp:TemplateField HeaderText="Id">
<ItemTemplate>
<asp:Label runat="server" ID="lblId" Text='<%# Eval("Id") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Type">
<ItemTemplate>
<asp:Label runat="server" ID="lblType"></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:DropDownList runat="server" ID="ddlType" OnTextChanged="ddlType_SelectedIndexChanged"
AutoPostBack="true">
</asp:DropDownList>
<asp:Button runat="server" ID="btnTest" OnClick="btnTest_Click" Text="TEST" />
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</Content>
Thank you!
UPDATE
Turns out this had nothing to do with the nested GridViews or Accordion.
After adding the following, the event now successfully fires:
if (!Page.IsPostBack)
Populate(object);
Turns out this had nothing to do with the nested GridViews or Accordion.
After adding the following, the event now successfully fires:
if (!Page.IsPostBack)
Populate(obj);
I have a gridview in which i have two textboxes. The senarios is such that the value I enter in one (txtCharges) should come as * 10 in the other textbox (txtTotalCharges). How to achieve this using javascript ? Markup code for gridview is as follows:
<asp:GridView ID="grdFixedMontlhy" CssClass="gridview" runat="server" AutoGenerateColumns="False"
Width="100%">
<RowStyle CssClass="gridviewItemStyle" HorizontalAlign="center" />
<Columns>
<asp:CheckBoxField Text="Select" />
<asp:BoundField DataField="Bill_HeadName" HeaderText="Head" />
<asp:BoundField DataField="Applicable_Charges_Category_Text" HeaderText="Type" />
<asp:TemplateField HeaderText="Charges" ItemStyle-CssClass="gridviewColumnControls">
<ItemTemplate>
<asp:TextBox ID="txtCharges" runat="server" Text='<%# Bind("Charges") %>'></asp:TextBox>
<asp:FilteredTextBoxExtender ID="txtCharges_FilteredTextBoxExtender" runat="server"
Enabled="True" TargetControlID="txtCharges" ValidChars="0123456789.">
</asp:FilteredTextBoxExtender>
</ItemTemplate>
<ItemStyle CssClass="gridviewColumnControls" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Days" ItemStyle-CssClass="gridviewColumnControls">
<asp:TemplateField HeaderText="Total Charges" ItemStyle-CssClass="gridviewColumnControls">
<itemtemplate>
<asp:TextBox ID="txtTotalCharges" runat="server" Text=""></asp:TextBox>
<asp:FilteredTextBoxExtender ID="txtTotalCharges_FilteredTextBoxExtender"
runat="server" Enabled="True" TargetControlID="txtTotalCharges"
ValidChars="0123456789.">
</asp:FilteredTextBoxExtender>
</itemtemplate>
<itemstyle cssclass="gridviewColumnControls" />
</asp:TemplateField>
</Columns>
</asp:GridView>
Thanks in advance.
You can add onKeyUp javascript event for the txtCharges as below
<asp:TextBox ID="txtCharges" runat="server" Text='<%# Bind("Charges")%>' onkeyup="calculateTotalCharge(this);"></asp:TextBox>
Now the Javascript as below
<script type="text/javascript">
function calculateTotalCharge(elem)
{
var totChargeid = $(elem).attr("id").replace('_txtCharges', '_txtTotalCharges');
$('#' + totChargeid).val(parseInt($(elem).val())*10);
}
</script>
Also you must do the required checkups for NAN. Hope this is helpful to you.
fail ... lack of understanding above ...
put the script on the page that suryakiran suggests (with a slight alteration) ...
<script type="text/javascript">
function calculateTotalCharge(charge, total)
{
$(total).val(parseInt($(charge).val())*10);
}
</script>
// in grid template
<asp:Textbox onkeyup='calculateTotalCharge(this, <%= totalchargestextbox.clientid %>)' ... />
as an attribute for the txtCharges box.
that way each rows dynamic id for the total box is passed in to the js on the client when it's called.
You can do this on the server side also
<asp:TextBox ID="txtTotalCharges" runat="server" Text='<%# Convert.ToString(Convert.ToInt32(DataBinder.Eval(Container.DataItem, "Charges"))*10 )></asp:TextBox>
how to make a conformation on boundfield in gridview in delete ....event
As far as I understand you want to add confirmation on deleting in your grid, correct?
Here is a simple example of grid:
<asp:GridView runat="server"
<Columns>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton runat="server"
CommandName="Delete"
OnClientClick='return confirm("Are you sure?");'
Text="Delete" />
</ItemTemplate>
</asp:TemplateField>
<!-- your bound fields here -->
</Columns>
</asp:GridView>
The trick is in adding client-side confirm to the OnClientClick property of the delete button.
Can you do something like this?
<asp:linkbutton id="btnDelete" runat="server" commandname="Delete" onclientclick="return confirm('Are you sure you want to delete this item?');"
text="Delete" />