how use jQuery Countdown plugin in a GridView - c#

i want to use this jQuery Countdown plugin : http://keith-wood.name/countdown.html in a Gridview ! every row has a DeadLine time that is bind from Database , i dont have any idea how to bind these dates !! look at this codes :
<script>
$(function () {
var austDay = new Date();
austDay = new Date(2014, 8, 10); // the count down date !
$('#defaultCountdown').countdown({until: austDay});
});
</script>
<div id="defaultCountdown"></div> // count down will be shown here !
and its my gridview
<asp:GridView ID="GroupExsGridView" Width="100%"
BorderWidth="0" runat="server">
<Columns>
<asp:TemplateField>
<ItemStyle BorderWidth="0" />
<ItemTemplate >
<div class="alert alert-info" role="alert">
<asp:Label CssClass="h5" ID="Exsddeadline" runat="server" Text='<%# Bind("GDeadLine") %>'></asp:Label><br /><br />
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

i solved my question ! look at codes below !
<asp:GridView ID="GroupExsGridView" Width="100%"
BorderWidth="0" ShowFooter="false" DataKeyNames="GroupExsID" OnRowDataBound="GroupExsGridView_RowDataBound" ShowHeader="false" EmptyDataText="هیچ تمرینی موجود نیست" AutoGenerateColumns="false" AllowPaging="false" AllowSorting="false" PageSize="50" runat="server">
<Columns>
<asp:TemplateField>
<ItemStyle BorderWidth="0" />
<ItemTemplate >
<div class="alert alert-info" role="alert">
<asp:Label ID="ExsName" CssClass="h4" Text='<%# Bind("GExsName") %>' runat="server" ></asp:Label><br />
<asp:Label CssClass="h5" ID="ExsdES" style="word-wrap:break-word;" runat="server" Text='<%# Bind("GExsDes") %>'></asp:Label><br /><br />
<div class="defaultCountdown" id="defaultCountdown" runat="server"></div>
<asp:Label ID="ExsDeadLine" style="display:none" runat="server" Text='<%# Bind("GExsDeadLine")%>'></asp:Label>
</div>
<asp:HyperLink ID="DownloadLink" Target="_blank" NavigateUrl='<%# Bind("GExsFilePath") %>' CssClass=" btn btn-lg btn-link pull-left" runat="server">دانلود</asp:HyperLink>
<asp:LinkButton ID="DeleteExs" CssClass=" btn btn-lg btn-link pull-left" OnClick="DeleteExs_Click" runat="server">حذف</asp:LinkButton>
<asp:Label ID="HelpText" CssClass="small" runat="server" Text="تاریخ ارسال:"></asp:Label>
<asp:Label ID="ExsDate" CssClass="small" runat="server" Text='<%# fbTime( (DateTime)Eval("GExsDate") ) %>'></asp:Label>
<hr />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<script>
$(function () {
var gridview = document.getElementById("<%= GroupExsGridView.ClientID %>");
for (i = 0; i < gridview.rows.length; i++) {
var la = document.getElementById("ContentPlaceHolder1_GroupExsGridView_ExsDeadLine_" + i);
var austDay = new Date(la.innerHTML);
$('#ContentPlaceHolder1_GroupExsGridView_defaultCountdown_' + i).countdown({ until: austDay });
}
});

Related

Why Button is not working in my datalist control?

I'm using a datalist control to show product details before adding to cart. But here add to cart button is not working. How can I resolve this problem?
Here is the code of datalist control
<asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" OnItemCommand="DataList1_ItemCommand">
<ItemTemplate>
<div class="container" style="z-index:-1;">
<div class="wrapper" style="margin-left:400px;" >
<div class="databox effect1">
<div id="imagedata" style="padding:10px">
<asp:Image ID="product_imageLabel" runat="server" Height="300px" Width="300px"
ImageUrl='<%# "data:Image/png;base64,"
+ Convert.ToBase64String((byte[])Eval("product_image")) %>'/>
</div>
<div style="margin-top:-300px;margin-left:310px;padding:10px">
<asp:Label ID="product_nameLabel" runat="server" Text='<%# Eval("product_name") %>' Font-Size="XX-Large" Font-Bold="True" />
<br/>
<asp:Label ID="product_compositionLabel" runat="server" Text='<%# Eval("product_composition") %>' Font-Size="Larger"/>
<br/>
<asp:Label ID="brand_nameLabel" runat="server" Text='<%# "Brand Name : "+Eval("brand_name") %>' Font-Size="Larger" />
<br/>
<asp:Label ID="product_stock_unitLabel" runat="server" Text='<%# Eval("product_stock_unit")+" of "+Eval("product_quantity")+" "+Eval("product_quantity_unit") %>' Font-Size="Larger"/>
<br/>
<asp:Label ID="product_priceLabel" runat="server" Text='<%# "MRP ₹ "+Eval("product_price") %>' ForeColor="#0E8CE4" Font-Size="Larger" />
<br/>
<br/>
<asp:Label ID="Label_product_code" runat="server" Text='<%# "Product Code : "+Eval("product_code") %>' Font-Size="Larger"/>
<br/>
<asp:Button ID="Button_addtocart" runat="server" Text="Add to cart" CssClass="btn third" CommandName="addtocart" CommandArgument='<%# Eval("product_code")%>' />
</div>
</div>
</div>
</div>
</ItemTemplate>
</asp:DataList>
Here is the code of c# against OnItemCommand handler
protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e)
{
if (e.CommandName == "addtocart")
{
ClientScript.RegisterStartupScript(this.GetType(), "randomtext", "not_login()", true);
}
}
Add
onclick = "DataList1_ItemCommand"
in your HTML button code
because onclick Event Main Tips. The "onclick" event occurs when the user clicks on an element. It runs a specified line of code when you click an HTML object that has the “onclick” attribute. The event can be triggered by "object.onclick" or "object.addEventListener".

How to solve : "the element div cannot be nested within the element 'updatepanel' "

I want to use update panel and div inside update panel but i got error:
the element div cannot be nested within the element 'updatepanel'.
This is my code :
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<div style="overflow:scroll">
<asp:GridView ID="GridViewHome" runat="server" Width="100%" AutoGenerateColumns="false" BackColor="White" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" CellPadding="4" OnPageIndexChanging="GridViewHome_PageIndexChanging" PageSize="30" ShowFooter="True">
<Columns>
<asp:TemplateField>
<HeaderTemplate>Options</HeaderTemplate>
<ItemTemplate>
<div style="width:100%"> <asp:HyperLink ID="HyperLink1" NavigateUrl='<%#"/RPT/WebForm1.aspx?order_id=" +Eval("Request number")+"&DEPT ID=" +Eval("DEPT ID")+"&Test Id=" +Eval("Test Id")+"&Culture=" +Eval("Culture")%>' runat="server">Print Result</asp:HyperLink></div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>Patient MRN#</HeaderTemplate>
<ItemTemplate>
<div style="width:100%"> <asp:Label ID="lblpatient" runat="server" Text='<%# Eval("Patient No") %>'></asp:Label></div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>Patient Name</HeaderTemplate>
<ItemTemplate>
<div style="width:100%"> <asp:Label ID="lblname" runat="server" Text='<%# Eval("Patient Name") %>'></asp:Label></div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>Order Number</HeaderTemplate>
<ItemTemplate>
<div style="width:100%"> <asp:Label ID="lblorder" runat="server" Text='<%# Eval("Request number") %>'></asp:Label></div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</asp:UpdatePanel>
How to solve this error ?
An updatepanel can contain a ContentTemplate , so add ContentTemplate like this :
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="overflow:scroll">
<asp:GridView ID="GridViewHome" runat="server" Width="100%" AutoGenerateColumns="false" BackColor="White" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" CellPadding="4" OnPageIndexChanging="GridViewHome_PageIndexChanging" PageSize="30" ShowFooter="True">
<Columns>
<asp:TemplateField>
<HeaderTemplate>Options</HeaderTemplate>
<ItemTemplate>
<div style="width:100%"> <asp:HyperLink ID="HyperLink1" NavigateUrl='<%#"/RPT/WebForm1.aspx?order_id=" +Eval("Request number")+"&DEPT ID=" +Eval("DEPT ID")+"&Test Id=" +Eval("Test Id")+"&Culture=" +Eval("Culture")%>' runat="server">Print Result</asp:HyperLink></div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>Patient MRN#</HeaderTemplate>
<ItemTemplate>
<div style="width:100%"> <asp:Label ID="lblpatient" runat="server" Text='<%# Eval("Patient No") %>'></asp:Label></div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>Patient Name</HeaderTemplate>
<ItemTemplate>
<div style="width:100%"> <asp:Label ID="lblname" runat="server" Text='<%# Eval("Patient Name") %>'></asp:Label></div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>Order Number</HeaderTemplate>
<ItemTemplate>
<div style="width:100%"> <asp:Label ID="lblorder" runat="server" Text='<%# Eval("Request number") %>'></asp:Label></div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Insert the div inside the ContentTemplate tag, like this:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="overflow:scroll">
//stuff
</div>
</ContentTemplate>
</asp:UpdatePanel>
You could add <ContentTemplate> section inside <asp:UpdatePanel> to hold the div element, because an UpdatePanel can only have ContentTemplate section:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="overflow:scroll">
<asp:GridView ID="GridViewHome" runat="server" Width="100%" AutoGenerateColumns="false" BackColor="White" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" CellPadding="4" OnPageIndexChanging="GridViewHome_PageIndexChanging" PageSize="30" ShowFooter="True">
<%-- gridview contents --%>
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Reference:
validation (xhtml5): the element 'div' cannot be nested within the element 'updatepanel'

How to Add datepicker in asp.net Gridview control

I am trying to add datepicker into a Asp.net Gridview control with column name (cheque_date), when i hardcode the id of Gridview column of a particular row it works fine but for only for that row, but i want to add datepicker for each and every row of Gridview. Below is my Html and jquery code that dose not work as expected. can anyone explain and solve my problem. Thanks in advance
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="loading" style="display: none"></div>
<div class="table-responsive">
<asp:GridView ID="gvBankPayment" CssClass="table table-bordered table-hover dataTable" runat="server" ShowHeaderWhenEmpty="true" ShowFooter="true" AutoGenerateColumns="False" OnRowEditing="gvBankPayment_RowEditing" OnRowDataBound="gvBankPayment_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="Chart of Account">
<ItemTemplate>
<asp:DropDownList ID="coa_id" CssClass="form-control" AppendDataBoundItems="true" runat="server"></asp:DropDownList>
<asp:RequiredFieldValidator ID="RFVCOA" ControlToValidate="coa_id" ForeColor="Red" runat="server" Display="Dynamic" ErrorMessage="Select COA"></asp:RequiredFieldValidator>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Remarks">
<ItemTemplate>
<asp:TextBox ID="remarks" CssClass="form-control" Text='<%#Eval("remarks")%>' runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Cheque Date">
<ItemTemplate>
<asp:TextBox ID="cheque_date" AutoPostBack="false" CssClass="form-control myDatePickerClass" placeholder="Cheque Date" Text='<%#Eval("cheque_date") %>' runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Cheque No">
<ItemTemplate>
<asp:TextBox ID="cheque_no" CssClass="form-control" Text='<%#Eval("cheque_no") %>' runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Amount">
<ItemTemplate>
<asp:TextBox ID="amount" CssClass="form-control" Text='<%#Eval("amount") %>' runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RFVAmount" ControlToValidate="amount" ForeColor="Red" runat="server" ErrorMessage="Enter Amount"></asp:RequiredFieldValidator>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Tax Type">
<ItemTemplate>
<asp:DropDownList ID="tax_id" CssClass="form-control" runat="server"></asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="WHT(%)">
<ItemTemplate>
<asp:TextBox ID="wht_tax_percent" CssClass="form-control calculateWhtAmount" Text='<%#Eval("wht_tax_percent") %>' runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="WHT Amount">
<ItemTemplate>
<asp:TextBox ID="wht_tax_amount" CssClass="form-control" Text='<%#Eval("wht_tax_amount") %>' runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Total Amount">
<ItemTemplate>
<asp:TextBox ID="total_amount" CssClass="form-control tamount" Text='<%#Eval("total_amount") %>' runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:ImageButton ID="deleteButton" CssClass="mydelete" runat="server" ImageUrl="~/img/x.png" OnClick="deleteButton_Click" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:ImageButton ID="ButtonAdd" CssClass="" ImageUrl="~/img/plus-sign-button.png" runat="server" OnClick="ButtonAdd_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>No Record Available</EmptyDataTemplate>
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
My jquery code is below:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
$("#ContentPlaceHolder1_gvBankPayment").on('click', '.myDatePickerClass', function () {
var currentRow = $(this).closest("tr");
var input = ('#' + currentRow.find("td:eq(2) input").attr('id'));
$(input).datepicker({
dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, yearRange: '1950:2013', yearRange: '1950:2050'
});
});
});
You should change your script to this. It is also better to make a function and not place it inside the endRequest. Because as your code is now it will not bind the datepicker on first load, but only after a UpdatePanel update.
Note the use of ClientID
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
bindDatePicker();
});
bindDatePicker();
function bindDatePicker() {
$("#<%=gvBankPayment.ClientID %> .myDatePickerClass").focusin(function () {
$(this).datepicker({
dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, yearRange: '1950:2013', yearRange: '1950:2050'
});
});
}
</script>

How to get image from GridView using GridView_RowCommand event in c# ASP.NET

i am doing edit operation inside GridView using c# ASP.NET.i need when user will click on edit button all data will retrive from that row and display in text box but here i am unable to display the image.I am explaining my code below.
faq.aspx:
<div class="row">
<div class="col-md-6">
<label for="question" accesskey="T"><span class="required">*</span> Question</label>
<asp:TextBox ID="TextBox1" runat="server" size="30" value="" name="question" ></asp:TextBox>
<div id="noty" style="display:none;" runat="server"></div>
<label for="answer" accesskey="A"><span class="required">*</span> Answer</label>
<asp:TextBox ID="TextBox2" runat="server" size="30" value="" name="answer" ></asp:TextBox>
<div id="Div1" style="display:none;" runat="server"></div>
</div>
<div class="col-md-6 bannerimagefile">
<label for="insertimage" accesskey="B"><span class="required">*</span> Insert Image</label>
<asp:FileUpload runat="server" class="filestyle" data-size="lg" name="insertimage" id="FileUpload1" onchange="previewFile()" />
<label for="bannerimage" accesskey="V"><span class="required">*</span> View Image</label>
<div style="padding-bottom:10px;">
<asp:Image ID="Image3" runat="server" border="0" name="bannerimage" style="width:70px; height:70px;" />
</div>
<div class="clear"></div>
<asp:Button ID="Button1" runat="server" Text="Submit" class="submit"
onclick="Button1_Click" />
</div>
</div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Width="100%" CssClass="table table-striped table-bordered margin-top-zero" OnRowCommand="GridView1_RowCommand" >
<Columns>
<asp:TemplateField HeaderText="Sl No">
<ItemTemplate>
<asp:Label ID="faqid" runat="server" Text='<%#Eval("FAQ_ID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Question" >
<ItemTemplate>
<asp:Label ID="question" runat="server" Text='<%#Eval("Question") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Answer" >
<ItemTemplate>
<asp:Label ID="answer" runat="server" Text='<%#Eval("Answer") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Image" >
<ItemTemplate>
<asp:Image ID="Image1" runat="server" border="0" name="bannerimage" style="width:70px; height:70px;" ImageUrl='<%# "/Upload/" + Convert.ToString(Eval("Image")) %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action" >
<ItemTemplate>
<!--</i>
<i class="fa fa-times"></i> -->
<asp:HyperLink ID="HyperLink1" runat="server" data-toggle="tooltip" title="" class="btn btn-xs btn-success" data-original-title="Edit" CommandName="DoEdit" CommandArgument='<%# Eval("FAQ_ID") %>' ><i class="fa fa-edit"></i></asp:HyperLink>
<asp:HyperLink ID="HyperLink2" runat="server" data-toggle="tooltip" title="" class="btn btn-xs btn-danger" data-original-title="Delete" CommandName="DoDelete" CommandArgument='<%# Eval("FAQ_ID") %>' ><i class="fa fa-times"></i></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
faq.aspx.cs:
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
int faqID = int.Parse(e.CommandArgument.ToString());
switch (e.CommandName)
{
case "doEdit":
{
int index = Convert.ToInt32(e.CommandArgument);
TextBox1.Text = GridView1.Rows[index].Cells[1].Text;
TextBox2.Text = GridView1.Rows[index].Cells[2].Text;
HiddenField1.Value = GridView1.Rows[index].Cells[0].Text;
Image3.ImageUrl=
Button1.Text = "Update";
}
}
}
Here i need the image will retrive and set to image3 id.Please help me to solve this issue.
WHere is image3; it's not in your snippet. Please include that, but if it's in the grid, then you do:
var img3 = (Image)GridView1.Rows[index].Cells[X].FindControl("Image3");
img3.ImageUrl = "XYZ";
Direct references only work when on the page outside of a container. If inside a container, you have to use FindControl (such as detailsview.findcontrol) or if a repeatable list, you have to use FindControl from the row (or in the case of the grid, the cell).
Get row index like this:
GridViewRow gvr = (GridViewRow)(((HyperLink)e.CommandSource).NamingContainer);
int index= gvr.RowIndex;
// to get image url
string url = ((Image)gvr.FindControl("Image3")).ImageUrl;
Image3.ImageUrl= url;

How to check atleast one checkbox is checked?

I have ascx page in that I have a grid in side that I have added radio button, I want to check at least one checkbox should be checked before unload the page or clicking on btn save.
<asp:GridView ID="grdTest" runat="server" DataKeyNames="Id" AutoGenerateColumns="False" HorizontalAlign="Center" GridLines="None" onrowcreated="grdTest_RowCreated">
<asp:TemplateField >
<ItemTemplate>
<asp:TextBox ID="txtText" Rows="10" Columns="40" runat="server" TextMode="MultiLine" Height="55px" Text='<%# Eval("Text") %>'></asp:TextBox>
<asp:Button ID="btnSave" runat="server" Text="Save" CommandName="Save"/>
<span id="checkbox">
<asp:RadioButton ID="rbtnTest" runat="server" Checked='<%# Eval("Correct") %>' TextAlign="Left" Height="28px" />
</span>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtText" Rows="10" Columns="40" runat="server" TextMode="MultiLine" />
<asp:Button ID="btnSave" runat="server" Text="Save" CommandName="Save"/>
<asp:CheckBox ID="rbtnTest" runat="server" Enabled="true" TextAlign="Left"/>
</EditItemTemplate>
</asp:TemplateField>
</asp:GridView>
How is this possible plz some one help me?
<script type="text/javascript" language="javascript">
function Validate_Checkbox()
{
var chks=document.getElementsByTagName('input');
var hasChecked = false;
for (var i = 0; i < chks.length; i++)
{
if (chks[i].checked)
{
hasChecked = true;
break;
}
}
if (hasChecked == false)
{
alert("Please select at least one checkbox..!");
return false;
}
return true;
}
</script>
and on Submit Button you have to write
OnClientClick="return Validate_Checkbox()"

Categories