I'm using Kedo UI Window in my aspx page, like shown below.
Server control inside window is loosing it's value after postback. I know Kendo is a client side library & is not responsible for state management of my server side controls but why is it causing them to loose their value???
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Test3.aspx.cs" Inherits="Test3" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<form runat="server" id="form1">
<div id="dialog">
<asp:TextBox runat="server" ID="TxtIn" />
</div>
<asp:TextBox runat="server" ID="TxtOut" />
<asp:Button runat="server" ID="Btn" Text="Submit" />
</form>
<script>
$("#dialog").kendoWindow({
actions: ["Minimize", "Maximize"]
});
$("#dialog").data("kendoWindow").center();
</script>
</body>
</html>
In Snippet above on click of Btn postback happens after which TxtOut retains it's value but TxtIn looses it, why is not clear to me. I believe it's something to do with the DOM changes that Kendo window does, not sure but. Can someone explain please, and provide any work around...
When you convert any div element into Kendo-Window at that time it remove the div from form tag and it create new div and add your existing div in it.
Please check below screenshot for more detail.
Please check the behavior of below code snippet you will get idea why the 'TxtIn' textbox not retains its value after postback.
<body>
<form runat="server" id="form1">
<asp:TextBox runat="server" ID="TxtOut" />
<asp:Button runat="server" ID="Btn" Text="Submit" />
</form>
<input type="text" id="TxtIn" />
</body>
Let me know if any concern.
I found it! Kendo provides an elegant solution to this problem. It's a configuration appendTo. Using it you can define under which element of your DOM the window should append. By default it must be body hence it was appending at it "after form tag", just changed it to my form to make it append to my form element instead, and it's working great now.
$("#dialog").kendoWindow({
actions: ["Minimize", "Maximize"],
appendTo: "form#form1" // This one does the magic
});
Related
I have a SharePoint ListView WebPart that I need to filter. I'm using a ASP.NET DropDown List Control, and two ASP.NET texboxes (TextMode="Date"). The selected values of these three elements are sent to parameters, which are used to filter the list. The dropdown list works just fine, and filters accordingly, the issue is the textboxes. It works just fine in Chrome, I guess because Chrome recognizes type="date", but that's not the case with IE.
This is my relevant code, if more is needed, please let me know:
<div class="startDate" style="float:left; margin-left:4px">
<asp:Label AssociatedControlID="startDateBox" Text="Start Date" BackColor="Aqua" Font-Size="X-Large" ID="startLabel">Start Date</asp:Label>
<asp:TextBox Text="" ToolTip="From" AutoPostBack="true" runat="server" TextMode="Date" ID="startDateBox" CausesValidation="true"></asp:TextBox>
</div>
<div class="endDate" style="float:left; margin-left:4px">
<asp:Label AssociatedControlID="endDateBox" ToolTip="To" Font-Size="X-Large" ID="endLabel">End Date</asp:Label>
<asp:TextBox AutoPostBack="True" runat="server" TextMode="Date" ID="endDateBox" CausesValidation="True" AutoCompleteType="Enabled" ValidateRequestMode="Enabled" Text=""></asp:TextBox>
</div>
What can I do do here? What Am I missing? Thanks in advance.
Date TextMode is not supported in IE, so it won't work with IE using these HTML5 attributes. You can use JQuery UI Date Picker as alternative, please check the sample in below.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
Also, you can check more details from this link https://jqueryui.com/datepicker/
I don't see any date picker in ASP.NET controls.
Anyone knows how to add it in my my webpage.
I am using VB as my programming language.
Result
I would like to thank everyone who posted the solutions, code and links which helped me to achieve this thread goal. Based on all of the source the below code is the one which works nicely.
Content1
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
//initialise the datepicker with the date format specified
$(".datepicker").datepicker();
});
</script>
And in
Content2
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:TextBox runat="server" ID="txt_MyDate" CssClass="datepicker" MaxLength="10" />
Add this inside your [head] Tag.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
and use this jquery function in aspx page inside [script] tag
$(function () {
$("#datepicker").datepicker();
$("#datepicker").change(function () {
$('#btnRefresh').click();
});
and add one textbox for display selected date. and button for getting the date in sever side. like this code
<input type="text" id="datepicker" runat="server" clientidmode="Static" />
<asp:Button ID="btnRefresh" runat="server" onclick="btnRefresh_Click" ClientIDMode="Static"
Text="Refresh" AutoPostback="true" style="display:none;"/>
use this onclick event to do want you want..
You're right, there isn't anything built-in.
Personally I would recommend the jQueryUI datepicker - it's reliable and flexible, and it's javascript based, so it doesn't matter what your server-side language is.
See https://jqueryui.com/datepicker/
Once you've added the required references to jQuery and jQueryUI, in your aspx page, add a script section like this:
<script type="text/javascript" language="javascript">
$(function () {
//initialise the datepicker with the date format specified
$(".datepicker").datepicker();
});
</script>
and then add the "datepicker" class to any textbox controls on the page where you want to use the datepicker:
<asp:TextBox runat="server" ID="txt_MyDate" CssClass="datepicker" MaxLength="10" />
P.S. I can also recommend most of the rest of the jQueryUI package, there are some useful items in there which can speed up your development time and make your apps look nicer and be more usable.
You can implement a datepicker on your page with the help of the Calendar control, using javascript on your page. Try this links for simple methods to do it:
http://www.vbknowledgebase.com/?Id=150&Desc=ASP.Net-DatePicker-using-Calendar-Control
http://www.codedigest.com/Articles/ASPNET/247_DatePicker_Control_in_ASPNet.aspx
http://www.aspsnippets.com/Articles/DateTimePicker-control-for-ASPNet-TextBox-Example.aspx
how to animate grid view rows to display one row after another in a same page. And all should be on the page?
any body please help me out.thanks in advance
Animating an ASP.NET GridView is not what you're after. You'll want to animate the HTML generated from the ASP.NET GridView, and for that you'll need javascript and/or jQuery. These scripting languages were built for the web and facilitate DOM manipulation.
In this case, a possible approach is to render the rows invisible on document ready, then display (and animate) them one at a time.
You should now have sufficient information to continue your search.
after 2 days of my work i had done the following :
<head runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("span[id$='label']").animate({marginLeft: "0.05in"},100).first().show("fast", function showNext() {
$(this).next().show(200, showNext);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater runat="server" ID="repeater1">
<ItemTemplate>
<asp:Label runat="server" ID="label" style="display:none" Text='<%#Eval("ename") %>'>
</asp:Label>
<br />
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
I am trying to open this modal DIV from code behind but I am getting error message. Please let me know what's wrong with this.
Here is .aspx code.
<div id="modal" runat="server" style="display:none;">
<asp:Button ID="btnClose" runat="server" Text="Close" onClick="Popup.hide('modal')" CausesValidation="False"/>
</div>
Code behind
if (!Page.ClientScript.IsStartupScriptRegistered("MyScript"))
{
string confirmbox = "Popup.showModal('modal');return false;";
Page.ClientScript.RegisterClientScriptBlock(GetType(), "MyScript", confirmbox, true);
}
For the error mentioned by you as
"Too many characters in character literal when loading the page"
You have to use OnClientClick instead of using onClick as it is a ASP.NET Server Control and not a normal HTML5 control.
For the code you have asked for:
Code for opening modal on page load
ASPX Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function hidePopup()
{
document.getElementById('modal').close();
}
</script>
</head>
<body onload="showPopup();">
<form id="form1" runat="server" >
<dialog id="modal">
<asp:Button ID="btnClose" runat="server" Text="Close" OnClientClick="hidePopup();return false;"/>
</dialog>
</form>
</body>
</html>
Code Behind .CS Code
if (!Page.ClientScript.IsStartupScriptRegistered("MyScript"))
{
string confirmbox = "function showPopup(){document.getElementById('modal').showModal();}";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "MyScript", confirmbox, true);
}
Tested on Chrome Version:39.0.2171.99 m , it works perfectly.
With this modal you can also exit the popup using "Esc" key,instead of Close button also.
Here's what I have so far but thing aren't really working. (I dragged the jQuery.js file from the Solution Explorer to the area of my html.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SignUpFormTest._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//fade in the context of whatever is inside the div tag.
$('#name').fadeIn("slow");
});
</script>
</head>
<body bgcolor="#FFFFFF">
<p>
Note that this form doesn't actually do anything
except illustrate the Required Field Validator.
</p>
<form id="frmValidator" action="required.aspx" method="post" runat="server">
Enter Your Name:
<asp:TextBox id="txtName" runat="server" />
<div id="name"><asp:RequiredFieldValidator id="valTxtName" ControlToValidate="txtName" ErrorMessage='<img src="../Images/no.png">' runat="server" /></div>
<br />
<asp:button id="btnSubmit" text="Submit" runat="server" />
</form>
<p>
Hint: Try submitting it before you enter something.
</p>
</body>
</html>
When validating the icon just pops up.
No fade in or anything. Also, I know my current solution is hacky, so I'd really like someone to tell me what I should do instead of a creating a DIV tag just for the purpose of one animation.
Make sure the reference to JQuery is valid and use this code:
$(document).ready(function() {
$('#name').hide().fadeIn("slow");
});
If I'm not mistaken, since the div is already visible in your case, jQuery will not fade it in. The hide() method ensures that the div is initially not visible and then fades in slowly.
$(document).ready(function() {
document.getElementById('valTxtName').onpropertychange = function(){
$('#name').fadeIn("slow");
}
});