How do you do a simple popup window in Telerik?
What would be the code-behig C# code in aspx:
===========
<telerik:RadWindow ID="modalPopup" runat="server" Width="360px" Height="360px">
<ContentTemplate>
<div style="padding: 10px; text-align: center;">
<telerik:RadButton ID="rbToggleModality" Text="Toggle modality" OnClientClicked="togglePopupModality"
AutoPostBack="false" runat="server" Height="65px" />
</div>
<p style="text-align: center;">
The format of the dates are incorrect. Please use two digit month and
a four digit year for proper formatting.
</p>
</ContentTemplate>
</telerik:RadWindow>
var composeScreenWindowName = "composeScreen";
var communicationTypeId = 'CT01';
var url = $page.url.create("You page url that you want to display");
var win = $window.createPopup(url, { size: "800,600", behaviors: Telerik.Web.UI.WindowBehaviors.Close | Telerik.Web.UI.WindowBehaviors.Maximize | Telerik.Web.UI.WindowBehaviors.Move | Telerik.Web.UI.WindowBehaviors.Resize, name: composeScreenWindowName });
try telerik popup using jquery
Try it ,
<asp:Button ID="Button3" Text="open the window" runat="server"
OnClientClick="openWinContentTemplate(); return false;" />
<script type="text/javascript">
function openWinContentTemplate() {
$find("modalPopup").show();
}
</script>
Related
I have two controls in my web form. One is combo box control, and the other is text box. What I want to do is when user selects another item in combo box, the new item is added to text box and shown to user automatically.
For example:
1. When user select '001' item in combo box, text box shows '001' in text area.
2. When user select '002' item in combo box, text box shows like this: '001','002'
Here is my code:
class webform : System.Web.UI.Page{
private StringBuilder sb = new StringBuilder();
protected void ComboBox1_SelectedIndexChanged(object sender, EventArgs e)
{
//Todos: Add the selection of combo box to text box2.
this.localsb.Append(this.ComboBox1.Text);
this.localsb.Append(",");
this.Text2.Text = this.localsb.ToString();
}
......
}
Here is my front end code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="PCA_Form.aspx.cs" Inherits="WebApplication2.PCA_Form" Culture="auto" meta:resourcekey="PageResource1" UICulture="auto" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>PCA_Form</title>
<style type="text/css">
#Text1 {
width: 147px;
margin-top: 0px;
}
#form1 {
height: 718px;
width: 963px;
}
.auto-style1 {
font-size: large;
}
#Checkbox1 {
width: 112px;
}
#Select1 {
width: 162px;
}
</style>
<script>
$(document).ready(function () {
$('.ComboBox1').on('blur', function () {
if ($(this).prop('checked')) {
var initial = $('#Text2').val();
var checkbox = $(this).text();
$('#Text2').val(initial + ',' + checkbox).change();
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div style="height: 51px; width: 906px;" aria-atomic="False" draggable="auto">
<span class="auto-style1">New Price</span>
<asp:TextBox ID="Text1"
runat="server"
class="Text"
onkeypress="if (event.keyCode!=46 && (event.keyCode < 48 || event.keyCode >57)) event.returnValue = false;"
TextMode ="MultiLine">
</asp:TextBox>
<span class="auto-style1">Item Number</span>
<ajaxToolkit:ComboBox ID="ComboBox1"
TextMode="MultiLine"
runat="server"
AutoPostBack="True"
DataSourceID="SqlDataSource1"
DataTextField="Code"
DataValueField="Code"
Style="display: inline;"
AutoCompleteMode="Suggest"
DropDownStyle="DropDown"
OnSelectedIndexChanged="ComboBox1_SelectedIndexChanged">
</ajaxToolkit:ComboBox>
<asp:Button ID="Button1"
Text="submit"
OnClick="SubmitButton_Click"
runat="server" />
<asp:Button ID="Button2" runat="server" Text="Excel" OnClick="Button2_Click" />
<asp:TextBox ID="Text2" runat="server" TextMode="MultiLine"></asp:TextBox>
</div>
<div style="height: 466px; width: 943px; margin-top: 35px">
<span class="auto-style1"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=XXX;Initial Catalog=XXXXX;Integrated Security=True" ProviderName="System.Data.SqlClient" SelectCommand="SELECT [Code] FROM [Item]"></asp:SqlDataSource>
<br />
<asp:GridView ID="PCADataGrid" runat="server" Width="938px" OnSelectedIndexChanged="PCADataGrid_SelectedIndexChanged" AutoGenerateColumns ="true">
</asp:GridView>
</span>
</div>
</form>
<p> </p>
</body>
</html>
In combo box tag, I trigger a function called ComboBox1_SelectedIndexChanged() when user changes selection in this box.
Well, that is indeed possible. However, your approach will require an Update Panel and all the agony that follows if you intend to avoid the lovely screen-flicker from those pesky Postback's. I would recommend doing this client side with JavaScript:
$(document).ready(function() {
$('.Checkbox').on('blur', function() {
if($(this).prop('checked')) {
var initial = $('#txtField').val();
var checkbox = $(this).text();
$('#txtField').val(initial + ', ' + checkbox).change();
}
});
});
That is a bit crude and rough, but it should meet your needs. This will avoid the issues your bound to introduce by using the Asp.Net Page Life Cycle. Hopefully this points you in good direction.
As I said above your approach will:
Require Postback or Update Panel
Problem:
Postback - Screen will flicker, plus can make managing View State quite difficult.
Update Panel - A pain to work with, also will hinder performance. As each 'Postback' becomes an Ajax call of the page. Which is stored in memory, so every Postback becomes stored in memory during the life-cycle. So it isn't very efficient.
Update:
You asked a question about:
.Checkbox
#txtField
On your front-end, in source code your elements are created like:
<asp:TextBox
id="txtField" runat="server"
placeholder="Initial Content..." />
There are more you can place on the control, but to answer your question they correlate to the Id or Class name for the given element your manipulating. An Id can only be bound to a single element, where a class can be used on several elements. For example-
<asp:Checkbox
id="chkField" runat="server"
CssClass="Checkbox" />
So in this instance the . is an anchor on this case, .Checkbox. The next would be # which is to anchor to the Id, #chkField. So when you use JavaScript they use the $('.Checkbox') or $('#chkField') as the Selector to elements on your page. Does that clarify for you?
I had this error " Object reference not set .... " , I had checked my
code and I got that the error in UpdatePanel , when i removed it the
code worked well but I must use it to prevent all page reload .
<div>
<fieldset style="width: 498px; text-align: right; padding: 5px; direction: rtl;">
<legend>what do y think ? </legend>
<div class="add-post">
<textarea class="textarea" cols="3" rows="3" runat="server" id="txpost"></textarea>
<asp:RequiredFieldValidator ID="RVAddPost" runat="server" ForeColor="Red" ErrorMessage="*"
ControlToValidate="txpost" ValidationGroup="AddUserPost">*</asp:RequiredFieldValidator>
</div>
<asp:UpdatePanel ID="UPAddUserPost" runat="server">
<ContentTemplate>
<div class="add-post-control">
<div class="post">
<asp:Button Text="Submit" runat="server" ID="btAddPost" OnClick="btAddPost_Click" ValidationGroup="AddUserPost" />
</div>
<div class="fileUpload btn btn-primary">
<div class="fileUpload btn btn-primary">
<span>
<img src="res/images/img.png" width="38" height="27" /></span>
<input type="file" runat="server" class="upload" id="FUFile" />
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btAddPost" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</fieldset>
<script type="text/javascript">
$('.textarea').focus(function () {
$(this).animate({
height: "80px"
}, 500);
$('.add-post-control').fadeIn(200);
});
</script>
</div>
Method:
protected void btAddPost_Click(object sender, EventArgs e)
{
AddpostfromFront();
}
private void AddpostfromFront()
{
if (FUFile.PostedFile.ContentLength != 0)
{
string tempVar = "~/res/Posts/" + FUFile.Value.ToString();
FUFile.PostedFile.SaveAs(Server.MapPath(tempVar));
ftier.Addpostfromfront(LoggedUserID, "4", txpost.Value, tempVar, DateTime.Now, DateTime.Now, false, false);
}
}
I think what you need to do instead of check the length of the file is to use a method that is built into PostedFile to check if there is a file to begin with.
if you look on the Microsoft page for PostedFile your code would look more like this
Private void AddpostfromFront() //I don't like your naming on this, should be AddPostFromFront
{
if (FUFile.HasFile)
{
string tempVar = "~/res/Posts/" + FUFile.Value.ToString();
FUFile.SaveAs(tempVar);
}
}
to use these methods you may have to use the ASP control instead of the HTML tag, <asp:FileUpload></asp:FileUpload> you will have to adjust the attributes to fit your situation and naming scheme. This would replace your HTML tag <input type="file" runat="server" class="upload" id="FUFile" />
I think that you are meshing two processes into one and getting confused as to what your code should be doing.
no clue what ftier is and why it has the same method name with the same bad naming scheme, or what it is doing with that information.
you should do this in 3 steps
upload the file
save the file
if you need to display the file then do so with the file that is saved, not the file that is being uploaded.
Hi and Thanks in Advance,
I am populating asp:label in c# with displays some latitudes/longitude range boundaries and then validating.
asp:
<script type="text/javascript" language="javascript">
window.bound = "<%= this.javaSerial.Serialize(this.rangeLat_Bounds) %>";
//alert(bound);
</script>
.
.
.
<asp:TabPanel ID="TabPanelLatLongCoord" runat="server" HeaderText="Lat/Long" TabIndex="1">
<ContentTemplate>
<div class="coord-btn btnLat_Long">
<asp:Button ID="btnDd" runat="server" Text="D.d" CssClass="coordinate-btn black" OnClick="Dd_Click" TabIndex="1" />
<asp:Button ID="btnDMS" runat="server" Text="DMS" CssClass="coordinate-btn black" OnClick="DMS_Click" TabIndex="1" />
<asp:Button ID="btnDMm" runat="server" Text="DM.m" CssClass="coordinate-btn black" OnClick="DMm_Click" TabIndex="1" />
</div>
<br />
<ul>
<li><span class="container-label">
<asp:Label ID="lblLat" runat="server" Text="Latitude" TabIndex="1"></asp:Label>
</span>
<asp:TextBox ID="txtLat" runat="server" CssClass="container-input-field" SkinID="NumTextUpDown" TabIndex="1"></asp:TextBox>
<asp:Label ID="rangeSetUp_Lat" runat="server" Text=""></asp:Label>
<asp:CustomValidator ID="Lat_Validator" runat="server" ControlToValidate="txtLat"
CssClass="errorMessage" ToolTip="Wrong Latitude Format" ClientValidationFunction="validate_Lat" TabIndex="1">
<img alt="" src="images/no.png" />
</asp:CustomValidator>
<asp:CustomValidator ID="RangeLat_CustomValidator" runat="server" ControlToValidate="txtLat"
CssClass="errorMessage" ToolTip="Latitude Out Of Range" ClientValidationFunction="rangeLat_validator" TabIndex="1">
<img alt="" src="images/no.png" />
</asp:CustomValidator>
</li>
<li><span class="container-label">
<asp:Label ID="lblLon" runat="server" Text="Longitude" TabIndex="1"></asp:Label>
</span>
<asp:TextBox ID="txtLon" runat="server" CssClass="container-input-field" SkinID="NumTextUpDown"></asp:TextBox>
<asp:Label ID="rangeSetUp_Lon" runat="server" Text="" TabIndex="1"></asp:Label>
<asp:CustomValidator ID="Lon_Validator" runat="server" ControlToValidate="txtLon"
CssClass="errorMessage" ToolTip="Wrong Longtitude Format" ClientValidationFunction="validate_Lon">
<img alt="" src="images/no.png" />
</asp:CustomValidator>
</li>
</ul>
</ContentTemplate>
</asp:TabPanel>
C#
protected void Dd_Click(object sender, EventArgs e)
{
.
.
.
Ranges range = new Ranges(rangeId);
String lowLat = parseOut(getCompassLat(range.LowLat));
String highLat = parseOut(getCompassLat(range.HighLat));
String rangeLat_Bounds = lowLat + " - " + highLat;
rangeSetUp_Lat.Text = rangeLat_Bounds;
JavaScriptSerializer js_serializer = new JavaScriptSerializer();
.
.
.
}
external JS:
function rangeLat_validator(oSrc, args) {
//var bound = <%= this.javaSerial.Serialize(this.rangeLat_Bounds) %>;
var input = args.Value;
alert(window.bound);
}
When the user clicks the different buttons, it reformats asp:label as a different format for latitude and longitude.
Problem is I can't get the rangeSetUp_Lat ID value in JS.
Try wrapping the serialized value in quotes:
var bound = "<%= this.javaSerial.Serialize(this.rangeLat_Bounds) %>";
If you still have problems after this, do you get any errors in the console?
EDIT:
It looks like the op was calling the serialization code from an external js file.
Server side code only works in the main html file, so move the Serialize call in the main html, and bind it to a global variable (it would be better if you had a namespace for your vars, globals are bad in js):
window.bound = "<%= this.javaSerial.Serialize(this.rangeLat_Bounds) %>";
And then access bound from the js function, simply by calling window.bound. Just make sure the js is called after the bound variable has been assigned in the html.
I am using this code to show a dialog box that will confirm for a delete button, it works fine, but when it pops up it doesn't disable any controls of ASP.Net page, so I can click on any of the controls or text boxes,
First thing I wanna do is fade out the page when Jquery opens my Div tag BOX and second to disable all the controls.
here's the code
Div (Custom Dialouge box)
<div id="divConfMessage">
<div align="center">
<br /><asp:Label ID="Label1" runat="server" Text="Deleting this eDecision will remove all site content and uploaded documents. Are you sure you wish to continue?" CssClass="headertext"></asp:Label><br /><br /><br /><br /><br />
<asp:Button ID="btnConfOK" Width="200px" Height="25px" CssClass="gradientbutton" OnClick="btDelete_Click" Runat="server" Text="Yes"></asp:Button>
<asp:Button ID="btnConfCancel" Width="200px" Height="25px" CssClass="gradientbutton" Runat="server" Text="No"></asp:Button><br /><br /><br />
</div>
</div>
Script (jquery)
<script type="text/javascript" src="/_layouts/1033/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[id$='btDelete']").click(function()
{
$("#divConfMessage").fadeIn();
});
});
</script>
Button
<td>
<asp:Button ID="btDelete" runat="server" CssClass="gradientbutton" OnClick="btDelete_Click"
OnClientClick="this.disabled=true;this.value='Please Wait...';" Text="Delete" Width="200px" />
</td>
Css for Dialog Box
#divConfMessage
{
position: absolute;
width: 500px;
height: 200px;
top: 50%;
left: 30%;
margin-left: -150px; /* Negative half of width. */
margin-top: -100px; /* Negative half of height. */
border: 2px solid #000;
DISPLAY:none;
background-color:White;
line-height:20px;
text-align:center;
}
Note
All of the code is in ASP content place holder for the page except CSS, I have 2 another Contents with different controls + a Master Page defining all these Content Place holders.
<asp:Content ID="Content4" ContentPlaceHolderID="cphSubmit" runat="server">
<%# Page Language="C#" MasterPageFile="~/my.Master" AutoEventWireup="true" CodeBehind="c.aspx.cs" Inherits="a.b.c" Title="e" meta:resourcekey="PageResource1" %>
set Modal=true; for dilogbox there is modal property, you can set it as True.
try using Jquery dialogue box ( it comes with JqueryUI plugin).
$( "#YourDivorContainerToShowAsDialog" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
EDIt: if you don't want to use buttons, then use like this
$( "#YourDivorContainerToShowAsDialog" ).dialog({
modal: true
});
or if you want to use CSS then you can try
#YourDivorContainerToShowAsDialog
{
position: absolute;
Z-index: withMaxValue
}
Give a higher Z-index for #divConfMessage and then the modal dalog will be on top everything.
When you add a dialog append it to body as this way:
add_block_page();
add_modal_box();
function add_block_page(){
var block_page = $('<div class="page"></div>');
$(block_page).appendTo('body');
}
function add_modal_box(){
var pop_up = $('<div id="divConfMessage"></div>');
$(pop_up).appendTo('.page');
}
Use one transperant image to fadeout the page.
Add one outerDiv and apply the image to the div.
<div id="outerDiv" style="display:none;">
<div id="divConfMessage">
<div align="center">
<br /><asp:Label ID="Label1" runat="server" Text="Deleting this eDecision will remove all site content and uploaded documents. Are you sure you wish to continue?" CssClass="headertext"></asp:Label><br /><br /><br /><br /><br />
<asp:Button ID="btnConfOK" Width="200px" Height="25px" CssClass="gradientbutton" OnClick="btDelete_Click" Runat="server" Text="Yes"></asp:Button>
<asp:Button ID="btnConfCancel" Width="200px" Height="25px" CssClass="gradientbutton" Runat="server" Text="No"></asp:Button><br /><br /><br />
</div>
</div>
</div>
CSS for outerDiv
# outerDiv
{
top:0%;
left:0%;
position:absolute;
background-image:url('../img/FloatingPanel.png');//transperant image
color:White;
z-index: 1102;
Height:100%;
width:100%;
}
Give a higher Z-index for #divConfMessage than the Z-index of outerDiv(ie:1103).
Show the outerDiv onclick of btDelete
I have a repeater inside which i put a Checkbox and above rapeater there is a HTML checkbox which is used to Check/Uncheck a Checkbox which is inside repeater using client side javascript.
Here is my Code:
JavaScript for Check/Uncheck:
<script type="text/javascript">
function selectAll() {
for (i = 0; i < document.all.length; i++) {
alert("Working");
if (document.all[i].type == 'checkbox') {
if (document.getElementById(cbSelectAll).Checked = true) {
//document.all[i].Checked = false;
} else {
document.all[i].Checked = true;
}
}
}
}
</script>
HTML Code for Repeater:
<div id="hdPropertyList" runat="server">
<table border="0" cellpadding="0" cellspacing="0" class="navigation" width="100%">
<tr>
<td>
<input type="checkbox" id="cbSelectAll" onchange="selectAll()" />
<asp:Button runat="server" ID="btnContactAll" Text="Contact All" />
</td>
<td id="tdOrderBy" runat="server">
</td>
<td>
<asp:Label ID="lblPage" runat="server" CssClass="pageList"></asp:Label>
</td>
</tr>
</table>
</div>
<div class="boxleft SearchFeaturedlist" style="display: none">
<h2>
Featured Properties</h2>
</div>
<asp:Repeater ID="rptPropertyList" runat="server" EnableViewState="false" OnItemDataBound="rptPropertyList_ItemDataBound"
OnLoad="rptPropertyList_Load">
<ItemTemplate>
<table id="propertyTable" runat="server" enableviewstate="false">
<tr id="tbrLabel" runat="server" enableviewstate="false">
<td id="tbcLabel" colspan="3" runat="server" enableviewstate="false">
</td>
</tr>
<tr id="tbrTitle" runat="server" enableviewstate="false">
<td id="tbcTitle" runat="server" enableviewstate="false">
<asp:CheckBox ID="ChkSelect" runat="server" /><span id="spnSelect" runat="server"></span>
</td>
</tr>
</table>
<div id="divAds" runat="server" visible="false" enableviewstate="false" style="width: 100%;
overflow: hidden">
</div>
</ItemTemplate>
</asp:Repeater>
Please help me in this regards.
Thanks in Advance.
The ID of the repeater will be available through it's ClientID property.
Really, you want to be asking whether you need this at all. Why not place the repeater inside a named div, and then simply find all input elements that have a type of checkbox that reside within it ( getElementsByTagName would help here ).
With a decent js addon library, like mootools or jQuery, you'll be able to use CSS selectors, which will make your task even easier.
Here's mootools example :-
function selectAllOrNone()
{
var myNewValue = $('selectall').innerText == "All" ? "None" : "All";
var myCheckers = $$('input[type=checkbox]');
$('selectall').innerText = myNewValue;
myCheckers.each(
function(e) {
e.checked = (myNewValue == "None");
}
);
}
I got the answer using Jquery. I used only the HTML checkbox to Check Uncheck all the checkbox on my Asp.net page.
<script type="text/javascript">
$(document).ready(function() {
$('td.title_listing :checkbox').change(function() {
$('#cbSelectAll').attr('checked', false);
});
});
function CotactSelected() {
var n = $("td.title_listing input:checked");
alert(n.length);
var s = "";
n.each(function() {
s += $(this).val() + ",";
});
window.location = "/D_ContactSeller.aspx?property=" + s;
alert(s);
}
Thanks to "Paul Alan Tylor" for your guidance.