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.
Related
On click of "Confirm", the "btnSubmit_Click" does not get call in the codebehind. ClosePopup gets called on OnClientClick and returns true, which should postback and call submit on the server side. Any ideas why it's not working?
<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlId="btnCopyShip"
PopupControlID="ModalPanel" BackgroundCssClass="ui-widget-overlay"
CancelControlID="btnCancel" behaviorid="modalwithinput"
OnCancelScript="ClearUI();"/>
<asp:Panel ID="ModalPanel" runat="server" style="background-color:White; width:320px; padding:0px 10px 10px 10px; border:1px Black; display: none;height:100px" cssClass="shadow">
<asp:UpdatePanel ID="uPnlNewShip" runat="server">
<ContentTemplate>
<fieldset style="width:300px;">
<legend style="font-weight:bold;font-size: medium">Copy Ship</legend>
<label for="lblShip" style="padding-left: 0px" >Ship: </label>
<asp:DropDownList runat="server" ID="ddlNewShips" style="width:150px">
</asp:DropDownList><%-- ValidationGroup="popup"--%>
<asp:RequiredFieldValidator ID="popupRequiredFieldValidator" runat="server"
ControlToValidate="ddlNewShips" Display="None"
ErrorMessage="Required Field" SetFocusOnError="True"
InitialValue="0">
</asp:RequiredFieldValidator> <%--ValidationGroup="popup"--%>
<%--<ajaxToolkit:ValidatorCalloutExtender runat="server"
targetcontrolid="popupRequiredFieldValidator"
id="popupValidatorCalloutExtender"
behaviorid="ddlValidator" enabled="True">
</ajaxToolkit:ValidatorCalloutExtender>--%>
</fieldset>
<br /><br />
<span style="float: right">
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" CausesValidation="False"/>
<asp:Button ID="btnSubmit" runat="server" Text="Confirm" OnClick="btnSubmit_Click" OnClientClick="return ClosePopup()"/>
</span>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
function ClosePopup()
{
if (IsValid())
{
ClearUI();
$find('modalwithinput').hide();
return true;
}
else
return false;
}
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 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'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!