I have multiple file upload control in asp.net grid view,i want to clear/reset file upload control when wrong file selection.
fileupload1 btnReset1
fileupload2 btnReset2
...
when i click btnReset2 then only clear value for fileupload2
How can i do this using java script.
Thank you all in advance
My code is as below.
JS Code:-
<script type="text/javascript">
function hi(ob) {
debugger;
var grid = document.getElementById("<%= GridView1.ClientID %>");
var inputs = grid.getElementsByTagName("input");
var fileUpload;
var strRowNo = ob.id.toString().split("_")[3];//get row number
alert(strRowNo);
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "file") {
fileUpload = inputs[i];
if (i == strRowNo) {
fileUpload.value = "";
}
}
}
}
</script>
//Aspx Code:-
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="A" HeaderText="A" />
<asp:BoundField DataField="B" HeaderText="B" />
<asp:BoundField DataField="C" HeaderText="C" />
<asp:TemplateField HeaderText="File">
<ItemTemplate>
<div id="fuDiv" runat="server">
<asp:FileUpload ID="fupFile" runat="server" />
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Reset">
<ItemTemplate>
<asp:Image ID="ibtnReset" runat="server" onClick="javascript:hi(this);" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="A" HeaderText="A" />
<asp:BoundField DataField="B" HeaderText="B" />
<asp:BoundField DataField="C" HeaderText="C" />
<asp:TemplateField HeaderText="File">
<ItemTemplate>
<div id="fuDiv" runat="server">
<asp:UpdatePanel ID="update_fupFile" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:FileUpload ID="fupFile" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ibtnReset" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Reset">
<ItemTemplate>
<asp:UpdatePanel ID="update_fupFile" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Image ID="ibtnReset" runat="server" onClick="javascript:hi(this);" />
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
Related
I have an asp.net page with a gridview in an updatepanel:
<asp:UpdatePanel ID="upGrid" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="gvBatchGroups" />
</Triggers>
<ContentTemplate>
<asp:GridView ID="gvBatchGroups" runat="server" AutoGenerateColumns="False" DataKeyNames="GroupID" GridLines="Both"
BorderWidth="1px" CellPadding="2" ForeColor="Black" BorderStyle="Double" HorizontalAlign="Center"
HeaderStyle-HorizontalAlign="Center" AllowSorting="True" CssClass="gvformat" OnRowDataBound="gvBatchGroups_RowDataBound">
<AlternatingRowStyle BackColor="#95B9B9" />
<HeaderStyle BorderStyle="Double" BorderColor="Black"/>
<Columns>
<asp:BoundField DataField="GroupID" HeaderText="Group ID" ItemStyle-HorizontalAlign="Center"/>
<asp:BoundField DataField="GroupCode" HeaderText="Group Code" ItemStyle-HorizontalAlign="Center"/>
<asp:BoundField DataField="GroupName" HeaderText="Group Name" />
<asp:BoundField DataField="GroupType" HeaderText="Group Type" ItemStyle-HorizontalAlign="Center"/>
<asp:BoundField DataField="FinancialYear" HeaderText="Financial Year" ItemStyle-HorizontalAlign="Center"/>
<asp:BoundField DataField="IsBatchSelected" HeaderText="Batch Selected" ItemStyle-HorizontalAlign="Center"/>
<asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle">
<ItemTemplate>
<asp:Button ID="btnDetail" runat="server" Text="view" OnClick="btnDetails_Click" CausesValidation="false" Font-Names="Trebuchet MS" CssClass="btn btn-comment" ForeColor="White" Font-Bold="True" />
</ItemTemplate>
<HeaderTemplate>Properties</HeaderTemplate>
</asp:TemplateField>
<asp:templatefield ItemStyle-HorizontalAlign="Center">
<HeaderTemplate>Select
<input id="cbHeaderSelect" type="checkbox" onclick="CheckAll(this)" runat="server" />
</HeaderTemplate>
<itemtemplate><asp:checkbox ID="cbSelect" runat="server"></asp:checkbox></itemtemplate>
</asp:templatefield>
</Columns>
</asp:GridView>
<asp:Button ID="bttnHidden" runat="Server" Style="display: none" />
<br />
</ContentTemplate>
</asp:UpdatePanel>
Column 8 has a checkbox that calls the following Javascript function to select all the checkboxes in the grid:
function CheckAll(oCheckbox) {
var Gridview = document.getElementById("<%=gvBatchGroups.ClientID%>");
for (i = 1; i < Gridview.rows.length; i++) {
Gridview.rows[i].cells[7].getElementsByTagName("INPUT")[0].checked =
oCheckbox.checked;
} }
However, when I click on the Column header, the Javascript function errors displaying the following:
Unable to get property 'rows' of undefined or null reference
This line appears under:
for (i = 1; i < Gridview.rows.length; i++)
Could the updatepanel be preventing the Javascript from "seeing" the gridview?
Any help would be most appreciated!
How do I get client id of image control
<asp:GridView ID="gv" OnRowDataBound="GetItems" runat="server" BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4" Font-Names="tahoma" Font-Size="8pt" AutoGenerateColumns="False" Height="154px" Width="929px">
<Columns>
<asp:TemplateField HeaderText="pic">
<ItemTemplate>
<asp:Repeater ID="pictures" runat="server">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" height="120" width="90" ImageUrl='<%# Eval("ImageUrl") %>' onclick="DisplayNewImageInWidnow();" />
</ItemTemplate>
</asp:Repeater>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I use this code but it doesn't work
function DisplayNewImageInWidnow()
{
var img = document.getElementById('<%=gv.FindControl("pictures").FindControl("Image1").ClientID %>').src
OnClientClick="return DisplayNewImageInWidnow();"
or prevent server side from running
OnClientClick="DisplayNewImageInWidnow();return false;"
then
function DisplayNewImageInWidnow(obj)
{
var imgId = obj.id;
}
I want to get the IdQueue's of the Queues I have checked in the check box, in java script.
For example, if i have checked boxes of IdQueue's 3 and 5, i want that the JS will alert me the IdQueue of them.
I need your help with this JS.
Thanks ahead.
<div data-role="popup" align=center id="Div1" style="width:600px; height:400px; direction:rtl; background-color:white">
<asp:GridView ID="GridView1" ClientIDMode="Static" runat="server" AllowPaging="False" AutoGenerateColumns="false"
OnRowCommand="grd_Threshold_Command" CssClass="text" Width="80%" OnRowDataBound="grd_Threshold_OnRowDataBound" >
<HeaderStyle CssClass="gridHeader" />
<RowStyle CssClass="gridRow" VerticalAlign="Top" />
<Columns>
<asp:TemplateField HeaderText="IdQueue" Visible="true">
<ItemTemplate>
<asp:Label ID="lblCSQCode" runat="server" Text='<%# Bind("CSQid") %>' BorderStyle="none"
BorderWidth="0px"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="NameQueue" HeaderStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Label ID="lblCSQName" runat="server" Text='<%# Bind("Name") %>' BorderStyle="none"
BorderWidth="0px"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="IntervalQueue" HeaderStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:DropDownList Visible="true" Enabled="true" ID="ddlResalution" EnableViewState="true"
runat="server" Width="148px">
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ChooseQueue" HeaderStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:CheckBox ID="cbk1" runat="server" EnableViewState="true" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<asp:Label ID="lblMust" runat="server" Text="" ForeColor="Red"></asp:Label>
<br />
<div style="width: 100px; margin: 0 auto;">
<asp:ImageButton ID="ImgBtnSave" runat="server" ImageUrl="~/Images/glossyGreenOK.gif"
Height="40px" OnClick="lnkBranchReport_Click" Width="40px" />
</div>
<div style="width: 100px; margin: 0 auto;color: #003399; font-weight: bold;
font-size: 14px;">
<asp:LinkButton ID="lnbSave" runat="server" OnClientClick="CheckedBoxes()" >ok</asp:LinkButton>
</div>
</div>
Try this:
<asp:CheckBox ID="cbk1" runat="server" EnableViewState="true" data-id='<%# Eval("CSQid") %>' />
<asp:LinkButton ID="lnbSave" runat="server" OnClientClick="CheckedBoxes();return false();" >ok</asp:LinkButton>
Add a custom attribute to checkbox so we can directly access id from here instead getting from label lblCSQCode. After that add this javascript
First way
$('#<%=lnbSave.ClientID%>').on('click', function() {
var arr = [];
var selectedID = '';
$('#<%=GridView1.ClientID%> tr td input[type=checkbox]:checked').each(function() {
var id = $(this).parent().attr('data-id');
arr.push(id);
});
selectedID = arr.join();
//alert(selectedID);
});
Second way
function CheckedBoxes() {
var arr = [];
var selectedID = '';
$('#<%=GridView1.ClientID%> tr td input[type=checkbox]:checked').each(function() {
var id = $(this).parent().attr('data-id');
arr.push(id);
});
selectedID = arr.join();
//alert(selectedID);
}
How can i only allow the client to insert either of these two fields.Either Textbox (selected Column) or Value from dropdown (selected Column) but only one field is allowed in a gridview.
<asp:GridView ID="gvMedia" DataSourceID ="dsMedia" SkinID="GridviewSkin" runat="server" AutoGenerateColumns="false" AllowSorting="true" GridLines="Vertical" Width="700px" CellPadding="2" PageSize="50">
<Columns>
<asp:TemplateField HeaderText="Selected">
<ItemTemplate>
<telerik:RadTextBox runat="server" ID="txtSelected" Width="80px" MaxLength="10" onkeypress="return NumberOnly(this)">
</telerik:RadTextBox>
<asp:Label ID="lblOr" runat="server" Text='or'></asp:Label>
<telerik:RadComboBox ID="cmbSelected" CssClass="ComboBox" runat="server" Width ="50px" Height="100px">
<Items>
<telerik:RadComboBoxItem runat="server" Text="" Value="" />
<telerik:RadComboBoxItem runat="server" Text="100%" Value="100%" />
<telerik:RadComboBoxItem runat="server" Text="50%" Value="50%" />
</Items>
</telerik:RadComboBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#99FF66" />
<SelectedRowStyle BackColor="#FFFF99" />
</asp:GridView>
Preferred Method : using clientside events.
Please try with the below code snippet.
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function ValueChanged(obj, eve) {
var id = obj.get_id();
var tarid = obj.get_id().replace("txtSelected", "cmbSelected");
var combo = $telerik.findComboBox(tarid);
if (obj.get_value() != "")
combo.clearSelection();
}
function ClientSelectedIndexChanged(obj, eve) {
var id = obj.get_id();
var tarid = obj.get_id().replace("cmbSelected", "txtSelected");
var txt = $telerik.findTextBox(tarid);
txt.set_value("");
}
</script>
</telerik:RadCodeBlock>
<asp:GridView ID="gvMedia"
runat="server" AutoGenerateColumns="false" AllowSorting="true" GridLines="Vertical" Width="700px" CellPadding="2" PageSize="50">
<Columns>
<asp:TemplateField HeaderText="Selected">
<ItemTemplate>
<telerik:RadTextBox runat="server" ID="txtSelected" Width="80px" MaxLength="10">
<ClientEvents OnValueChanged="ValueChanged" />
</telerik:RadTextBox>
<asp:Label ID="lblOr" runat="server" Text='or'></asp:Label>
<telerik:RadComboBox ID="cmbSelected" CssClass="ComboBox" runat="server" Width="50px" Height="100px"
OnClientSelectedIndexChanged="ClientSelectedIndexChanged">
<Items>
<telerik:RadComboBoxItem runat="server" Text="" Value="" />
<telerik:RadComboBoxItem runat="server" Text="100%" Value="100%" />
<telerik:RadComboBoxItem runat="server" Text="50%" Value="50%" />
</Items>
</telerik:RadComboBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#99FF66" />
<SelectedRowStyle BackColor="#FFFF99" />
</asp:GridView>
Let me know if any concern.
I am trynig to select all checkbox when header checkbox is selected.
I write proper code for that but do'nt know why it's not working.
Can anyone check the issue.
My code--
<head runat="server">
<title></title>
<script type="text/javascript">
function SelectAllCheckboxes1(chk) {
$('#<%=GridView1.ClientID%>').find("input:checkbox").each(function () {
if (this != chk) { this.checked = chk.checked; }
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:gridview ID="GridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="SqlDataSource1">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="cbSelectAll" runat="server" onclick="javascript:SelectAllCheckboxes1(this);" AutoPostBack="true"/>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chk" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
</Columns>
</asp:gridview>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:HRMSConnectionString %>"
SelectCommand="SELECT [Name] FROM [Languages]"></asp:SqlDataSource>
</div>
</form>
</body>
Try this code-
default.aspx.cs
protected void sellectAll(object sender, EventArgs e)
{
CheckBox ChkBoxHeader = (CheckBox)GridView1.HeaderRow.FindControl("chkb1");
foreach (GridViewRow row in GridView1.Rows)
{
CheckBox ChkBoxRows = (CheckBox)row.FindControl("chkb2");
if (ChkBoxHeader.Checked == true)
{
ChkBoxRows.Checked = true;
}
else
{
ChkBoxRows.Checked = false;
}
}
}
Change grid code-
<asp:gridview ID="GridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="SqlDataSource1">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chkb1" runat="server" AutoPostBack="true" OnCheckedChanged="sellectAll"/>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkb2" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
</Columns>
</asp:gridview>