I have added a bootstrap datepicker to several textboxes in a Gridview. But on selecting a date, a dummy time format as '00:00:00' is being added to the date in the textbox on onrowupdating in the gridview.
I have tried to trim the date in the onrowbound, but to no avail.
Gridview code:
<asp:TemplateField HeaderText="AMR Plan">
<ItemTemplate>
<asp:Label Text='<%# Eval("amr_plan") %> Width="130px" runat="server"></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtAMRPlan" Text='<%# Eval("amr_plan") %>' Width="130px" runat="server"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
code for datepicker(javascript and html):
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" href='bootstrap.min.css'
media="screen" />
<%--'https:/ /cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'--%>
<!-- Bootstrap -->
<!-- Bootstrap DatePicker -->
<link rel="stylesheet" href="bootstrap-datepicker.css"
type="text/css" />
<%--href="https:/ /cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css"--%>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"
type="text/javascript"></script>
<!-- Bootstrap DatePicker -->
<script type="text/javascript">
$(function () {
$('[id*=txtAMRPlan]').datepicker({
changeMonth: true,
changeYear: true,
format: "mm/dd/yyyy",
language: "tr"
});
});
It would be of great help if someone can shed some light on this? Thanks in advance!
I finally managed to get around a solution. Writing this answer just in case someone needs it later. So the problem was with the Eval function. Eval function is used to define only one way binding i.e. ReadOnly in the grid view. So Eval should be replaced with Bind function which is used for two way binding meaning read/write is possible. In my case grid view should have been be able to update the database field, which is possible with Bind. Observe this snippet..
<asp:TemplateField HeaderText="AMR Plan">
<ItemTemplate>
<asp:Label ID="lblAMR" Text='<%# Bind("amr_plan","{0:MM/dd/yyyy}") %> Width="130px" runat="server">
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtAMRPlan" Text='<%# Bind("amr_plan","{0:MM/dd/yyyy}") %>' Width="130px" runat="server"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
Also dont forget to give id to Label.
Few articles which might help Here & Here
Related
I have a GridView with data bound fields from a mysql database. It contains two columns IdTask(primary key),
TaskName and one button which opens a jQuery dialog.
I need to fill this dialog based on the on the ID of the task from the row i clicked the button.
And i have a user control with another Gridview which contains said data that i need to display in the dialog.
This is what i have so far:
The aspx Page:
<script>
$(document).ready(function () {
$(".modalFiles").click(function () {
var id = $(this).data("activitateId");
console.log(id);
$("#divModalFiles").dialog({
dialogClass: "no-close",
modal: true,
title: "Files",
width: 450,
height: 440,
buttons: {
Close: function () {
$(this).dialog('close');
}
},
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
return false;
});
});
</script>
<form id="form1" runat="server" style="padding: 10px; width: 550px">
<asp:GridView DataKeyNames="IdTask" ID="gvTask" runat="server"
AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="IdTask" HeaderText="ID" />
<asp:BoundField DataField="Name" HeaderText="Task" />
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="btnFile" CssClass="btnFiles" runat="server" ImageUrl="img/files.png.png"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="divModalFiles" style="display:none">
<ucFiles:Files runat="server"/>
</div>
</form>
</body>
The ascx userControl:
<div id="file">
<asp:Literal ID="litMesaj" runat="server" Visible="false"></asp:Literal>
<asp:FileUpload ID="fUpload" runat="server" />
<br />
<br />
<asp:Label ID="lblDescFile" runat="server" Text="Description"></asp:Label>
<asp:TextBox ID="txtDescFile" runat="server" ></asp:TextBox>
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
<br />
<br />
<asp:GridView ID="gvFiles" DataKeyNames="IdFiles" runat="server" AutoGenerateColumns="false" EmptyDataText="No files uploaded">
<Columns>
<asp:BoundField DataField="IdFiles" HeaderText="ID" />
<asp:BoundField DataField="IdTask" HeaderText="IdTask" />
<asp:BoundField DataField="Name" HeaderText="File Name" />
<asp:BoundField DataField="Description" HeaderText="Description" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkDownload" runat="server" Text="Download File" OnClick="lnkDownload_Click" CommandArgument='<%# Eval("Url") %>'></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton runat="server" ID="btnDelFile" ImageUrl="~/delete.png.png" OnClientClick="return confirm('Sure?');" OnClick="btnDelFile_Click"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
The ascx.cs userControl
// the function i call in page load to display the files
private void loadFiles()
{
string sqlFiles = "select * from files where IdTask=" + ?? ;// here is where i need the help how can i retrieve the IdTask from the gridview on the aspx Page?
MySqlCommand cmd = new MySqlCommand(sqlFiles, conn);
MySqlDataAdapter adp = new MySqlDataAdapter(cmd);
DataTable dtFiles = new DataTable();
adp.Fill(dtFiles);
gvFiles.DataSource = dtFiles;
gvFiles.DataBind();
}
Can you help me ? without that ID i can't use the download or the upload files functions either. It currently show only the form with the files upload and the upload button
If i didn't made myself clear(english is not my first language) with what i need please feel free to ask any questions and i will explain
The first issue you have is that you need a postback in order to populate the popup. That means a popup in an <iframe> that uses another, separate .aspx page that contains your user .ascx control. You pass activitateId via the URL. NOTE: the <iframe> doesn't postback, but it does run the page lifecycle for the popup.aspx page without refreshing your main page.
<div id="divModalFiles" style="display:none">
<iframe id="iframe_id" runat=server src="popup.aspx" ... />
</div>
Where popup.aspx contains:
<html>
<head>
whatever you need here
</head>
<body>
<ucFiles:Files runat="server"/>
</body>
</html>
In the JS/JQuery you modify the iframe src attribute before calling the popup:
function AlterIframeSrc( ID )
{
$('#iframe_id').attr( 'src', 'popup.aspx?id=' + ID; );
}
Option 2
Alternatively, depending on how much data the popup may contain, you could, create pre-loaded hidden div's within each row of the main gridview.
Drop your .ascx into the Main Gridview like any other server control and pass it the activitateId as a control parameter.
HOWEVER do this ONLY if for each activitateId you only get a small amount of data as this will impact performance. BUT you no longer have to do a postback to get the data.
That's the trade off for the initial performance hit.
The advantage is that you can use simple javascript to wire up the popup.
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton runat="server" ID="btnDelFile" ImageUrl="~/delete.png.png" OnClientClick="return confirm('Sure?');" OnClick="btnDelFile_Click"/>
<div id="divModalFiles" style="display:none">
<ucFiles:Files runat="server" IDTask='<%# Eval("activitateId") %>'/>
</div>
</ItemTemplate>
</asp:TemplateField>
The User Control attribute I added, IDTask, would be defined in your .ascx as a bindable public property.
I am using ASP.NET repeater and I want to display simply heading
like this:
<body>
<form id="form1" runat="server">
<h3>Example1</h3>
<asp:Repeater ID="rp1" runat="server" OnItemCommand="rp1_ItemCommand">
<ItemTemplate>
<h4>Repeater Data</h4>
</ItemTemplate>
</asp:Repeater>
</form>
</body>
But when I run my code its shows only heading and avoid inner heading. I know Its quiet simple to solve this but believe me I googling after an hours but not found any solution. Kindly help me.
ItemTemplate is shown only when Repeater has data.
What you want to use is HeaderTemplate instead, which is also visible when no data is present.
In your previous ItemTemplate include only the data you want to display per item.
<asp:Repeater ID="rp1" runat="server">
<HeaderTemplate>
<h4>Repeater Data</h4>
</HeaderTemplate>
<ItemTemplate>
...
</ItemTemplate>
</asp:Repeater>
I am using this gridview, I have one header checkbox and one column containing textbox. I want that when i check the header checkbox the value of every textbox changes from 0 to 1.
<asp:GridView ID="grdData" runat="server" style="Text-align:center;">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="CheckBox2" runat="server" OnClick="CheckAllEmp(this)"/>
</HeaderTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:Label ID="Status_Header" runat="server" Text="Status" />
</HeaderTemplate>
<ItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text="0"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
You can do this by using Jquery.
Not tested with the actual data, but hope this should work for you.
$(function () {
$('#CheckBox2').change(function () {
$("#TextBox1").val(($(this).is(':checked')) ? "1" : "0");
});
});
Also you must need to add jquery plugin right before the javascript code which I gaved u. Below is one of the plugin which you can use
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
Do let us know if it works or not
net , c#. I am calling a javascript by using following code . `
<script type="text/javascript">
$(function () {
$("[src='/pinterest/portals/0/Images/about-person3.jpg']").pinit();
$("[src='/pinterest/portals/0/Images/about-us-group.jpg']").pinit();
});
</script>
My c# code is
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<br />
<img ID="ImageZoom" runat="server" src='<%# DataBinder.Eval(Container.DataItem, "ImageUrl") %> ' style="display: inline; height:auto; left: 0pt; top: 0pt; width:auto;" />
<asp:CheckBox ID="CheckBox1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ImageId") %> ' />
</ItemTemplate>
</asp:Repeater>`
if i add more images i should call javascript for all images .
You're question is vague at best, but I think this is what you're looking for:
Assign a class to the images that you want to call pinit() on.
Use jQuery's class selector to retrieve the appropriate objects.
<img ID="ImageZoom" class='pinitPlease' runat="server" ... />
$(function () {
$(".pinitPlease").pinit();
});
assuming you want to zoom images that are located in /pinterest/portals/0/Images/
you can adapt your jquery selector to select those imgages that start with that path
$("[src^='/pinterest/portals/0/Images/']").pinit();
All your images will have the word "ImageZoom" in their ID, so you can make a selector by that and find all images together.
$("[id*='ImageZoom']").pinit();
I am a new coder trying to experiment with jquery for my first time. I'm trying to setup a simple datalist that might be used to display comments for an item. I want a clickable link (per datalist row) to drop down a panel (per datalist row) that has comment text. so the user looks at row 1, clicks it's link to read comments, and the comments panel drops down. they scroll down and do the same for the next item.
so far i have the below code as a small test page, but it's not working. nothing happens basically. I'm hoping someone can help me out because i'm very new and just teaching myself this stuff from what I see in tutorial videos and such. I tried the clientID thing because it seems i need that to deal with the auto-generated ID's .NET will assign panels as it's rendered, but i'm not sure if i'm doing it right.
greatly appreciate your time and effort.
head section
<script src="jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('Panel1text').hide();
});
$("#<%=HyperLink1.ClientID%>").click(function() {
$("<%=Panel1text.ClientID%>").show();
});
</script>
body section
<asp:DataList ID="DataList1" runat="server" DataKeyField="cid"
DataSourceID="SqlDataSource1" Width="645px">
<ItemTemplate>
cid:
<asp:Label ID="cidLabel" runat="server" Text='<%# Eval("cid") %>' />
<br />
cuser:
<asp:Label ID="cuserLabel" runat="server" Text='<%# Eval("cuser") %>' />
<br />
blogid:
<asp:Label ID="blogidLabel" runat="server" Text='<%# Eval("blogid") %>' />
<br />
<br />
<asp:HyperLink ID="HyperLink1" runat="server">show text</asp:HyperLink>
<br />
<asp:Panel ID="Panel1text" runat="server">
<asp:Label ID="textLabel" runat="server" Text='<%# Eval("text") %>' />
</asp:Panel>
<br />
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [ocomments]"></asp:SqlDataSource>
It looks to me like you are going to have multiple elements with the id of 'HyperLink1' and 'Panel1text'. I would recommend using classes instead. Add a "class='link'" to the link element and a "class='panel'" to the panel element. Use the following CSS to initially hide the panels:
.panel { display: none; }
Then use the following jQuery to show the element:
$(document).ready(function(){
$(".link").click(function(evt){
evt.preventDefault(); // prevents the click from leaving the page
$(this).next().show(); // show the panel
});
});
You may need to fiddle with the '.next().show()' selector a bit. Not certain how ASP.NET is going to render out the elements.
Bob