I'm trying to have 2 differents icons on my GridView.
(there is Table ID="gvOrders" and Table ID="gvOrders2" on same level)
<form id="form1" runat="server">
<div style="overflow-x: hidden; overflow-y: hidden; width: 100%; height: 100%; margin-left: 147px;">
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid" DataKeyNames="ABI" OnRowDataBound="OnRowDataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<img alt = "" style="cursor: pointer" src="pics/plus.png" />
<asp:Panel ID="pnlOrders" runat="server" Style="display: none">
<asp:Table ID="gvOrders" runat="server" CssClass = "ChildGrid">
</asp:Table>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<img alt = "" style="cursor: pointer" src="pics/plus.png" />
<asp:Panel ID="pnlOrders2" runat="server" Style="display: none">
<asp:Table ID="gvOrders2" runat="server" CssClass = "ChildGrid">
</asp:Table>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
and the js
<script type="text/javascript">
$("[src*=plus]").live("click", function ()
{
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "pics/minus.png");
});
$("[src*=minus]").live("click", function ()
{
$(this).attr("src", "pics/plus.png");
$(this).closest("tr").next().remove();
alert($(this).attr("src"));
});
</script>
my question:
could be possible to have an icon for 'gvOrders' and one for 'gvOrders2'?
thanks in advance!
Related
I am trying to use jquery for exporting grid view to excel. But I am not successful with the code.
code referred from : http://www.c-sharpcorner.com/blogs/export-to-excel-using-jquery1
My code:
<script type="text/javascript">
$("[id$=btnExcel]").click(function (e) {
alert("testing");
window.open('data:application/vnd.ms- excel,' + encodeURIComponent($('#grdCharges').html()));
e.preventDefault();
});
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="div_report" runat="server" visible="false">
<div id="grdCharges" runat="server" style="width: 90%; overflow: auto;">
<asp:GridView ID="GridView1"
runat="server"
CellPadding="3"
CellSpacing="2"
AutoGenerateColumns="true"
ShowFooter="true"
FooterStyle-HorizontalAlign="Left"
RowStyle-BorderColor="Black" HeaderStyle-BackColor="#0CA3D2">
<FooterStyle BackColor="#87CEFA" />
</asp:GridView>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div class="div_labels">
<asp:Button ID="btnExcel" class="input-submit" ClientIDMode="Static" runat="server" Text="Excel" />
</div>
But when I press the btnExcel I could not get even the alert window. Why is it so?
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);
}
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>
I have a repeater with class header and detail.On click of row(header) Detail will be expanded with link buttons(edit,update/cancel).Once Edit is pressed->update and cancel button will be visible.
this is working fine. Except below mentioned one
My issue is -> whenever i click the edit button,the details is collapsing and i have to click the row (header) again to see the update and cancel link buttons.When edit is cicked i want to see the update and cancel button.Now each time i have to expand for updation.
Edit I am using asp.net link buttons and toggle function is javascript,is it because of that....?
Please provide any suggestions for this problem.
Thanks in advance.
<style>
.header { font-size: larger; font-weight: bold; cursor: hand; cursor:pointer;
background-color:#cccccc; font-family: Verdana; }
.details { display:none; visibility:hidden;
font-family: Verdana; }
</style>
<div style="overflow: scroll; overflow-x: hidden; overflow-y: auto;background- color:gray; height: 500px; width: 895px">
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<div id='h<%# DataBinder.Eval(Container, "ItemIndex") %>' class="header"
onclick='ToggleDisplay(<%# DataBinder.Eval(Container, "ItemIndex") %>);' style="border-style: none;">
<asp:Panel ID="Panel3" runat="server" Height="30px" BorderStyle="None" BackColor="#79FFFF">
<%# DataBinder.Eval(Container.DataItem, "License")%>
<%# DataBinder.Eval(Container.DataItem, "Name")%>
<%# DataBinder.Eval(Container.DataItem," Date")%>
<div id='d<%# DataBinder.Eval(Container, "ItemIndex") %>' class="details">
<asp:Panel ID="Panel2" runat="server" Height="195px" BackColor="Gray" Font-Bold="False" ForeColor="Maroon">
<br />
<asp:Label ID="Label1" runat="server" Text="LicenseID"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# DataBinder.Eval (Container.DataItem,"LicenseID") %>' Enabled="False" BackColor="Gray" BorderStyle="None"></asp:TextBox>
<asp:Label ID="Label2" runat="server" Text="License Name"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"LicenseName")%>' Enabled="false" BackColor="Gray" BorderStyle="None"></asp:TextBox>
</asp:Panel>
</div>
</ItemTemplate>
Toggle display
<script>
function ToggleDisplay(id) {
var allDetails = document.getElementsByClassName('details');
var detaisToShow = document.getElementById('d' + id);
for (var i = 0; i < allDetails.length; i++) {
allDetails[i].style.display = 'none';
allDetails[i].style.visibility = 'hidden';
}
detaisToShow.style.display = 'block';
detaisToShow.style.visibility = 'visible';
detaisToShow.style.display = 'visible';
}
</script>
I had to make a few changes to the markup and added a hidden field. also cleaned up the script. Markup may look like:
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" OnItemCommand="Repeater1_ItemCommand_ItemCommand" >
<ItemTemplate>
<div id='h<%# DataBinder.Eval(Container, "ItemIndex") %>' class="header"
onclick='ToggleDisplay(<%# DataBinder.Eval(Container, "ItemIndex") %>);' style="border-style: none;">
<asp:HiddenField ID="hdnItemIndex" runat ="server" Value='<%# DataBinder.Eval(Container, "ItemIndex") %>' />
<asp:Panel ID="Panel3" runat="server" Height="30px" BorderStyle="None" BackColor="#79FFFF">
<%# DataBinder.Eval(Container.DataItem, "License")%>
<%# DataBinder.Eval(Container.DataItem, "Name")%>
<%# DataBinder.Eval(Container.DataItem," Date")%>
</asp:Panel>
<div id='d<%# DataBinder.Eval(Container, "ItemIndex") %>' class="details">
<asp:Panel ID="Panel2" runat="server" Height="195px" BackColor="Gray" Font-Bold="False" ForeColor="Maroon">
<br />
<asp:Label ID="Label1" runat="server" Text="LicenseID"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# DataBinder.Eval (Container.DataItem,"LicenseID") %>' Enabled="False" BackColor="Gray" BorderStyle="None"></asp:TextBox>
<asp:Label ID="Label2" runat="server" Text="License Name"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"LicenseName")%>' Enabled="false" BackColor="Gray" BorderStyle="None"></asp:TextBox>
</asp:Panel>
<asp:LinkButton ID="lnkEdit" runat="server" CommandName="edit"
CommandArgument='<%# DataBinder.Eval(Container.DataItem, "LicenseID") %>'
Font-Bold="True" OnClientClick="false">Edit</asp:LinkButton>
</div>
</div>
</ItemTemplate>
... ... ...
And the script and style:
<style>
.header {
font-size: larger;
font-weight: bold;
cursor: hand;
cursor: pointer;
background-color: #cccccc;
font-family: Verdana;
}
.details {
display: none;
visibility: hidden;
font-family: Verdana;
}
</style>
<script>
function ToggleDisplay(id) {
var allDetails = document.getElementsByClassName('details');
var detaisToShow = document.getElementById('d' + id);
for (var i = 0; i < allDetails.length; i++) {
allDetails[i].style.display = 'none';
}
detaisToShow.style.display = 'block';
}
</script>
Now in the code, repeater's itemcommand:
protected void Repeater1_ItemCommand_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName.ToLower() == "edit")
{
HiddenField hdnItemIndex = (HiddenField)((LinkButton)e.CommandSource).NamingContainer.FindControl("hdnItemIndex");
string myScript = "ToggleDisplay(" + hdnItemIndex.Value + ");";
Page.ClientScript.RegisterStartupScript(this.GetType(), "RegisterStartupScript", myScript, true);
}
}
I have tested the code, so if you are having any issue, please let me know.
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>