I'm going through a sample using drag and drop of a grid view where you can re-order the data. I'm trying to find out once the user has re-ordered the grid view how they like it how can I get the data in the first column in the order that they have changed it to. I've tried adding a bit of code to the button event to get this but it only gets the original order and not that of what the user changed it to.
ASPX Page: -
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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 id="Head1" runat="server">
<title>Untitled Page</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
<link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
<script type="text/javascript">
$(function () {
$(".drag_drop_grid").sortable({
items: 'tr:not(tr:first-child)',
cursor: 'crosshair',
connectWith: '.drag_drop_grid',
axis: 'y',
dropOnEmpty: true,
receive: function (e, ui) {
$(this).find("tbody").append(ui.item);
}
});
$("[id*=gvDest] tr:not(tr:first-child)").remove();
});
</script>
<style type="text/css">
.GridSrc td
{
background-color: #A1DCF2;
color: black;
font-size: 10pt;
font-family:Arial;
line-height: 200%;
cursor: pointer;
width:100px
}
.GridSrc th
{
background-color: #3AC0F2;
color: White;
font-family:Arial;
font-size: 10pt;
line-height: 200%;
width:100px;
}
.GridDest td
{
background-color: #eee !important;
color: black;
font-family:Arial;
font-size: 10pt;
line-height: 200%;
cursor: pointer;
width:100px
}
.GridDest th
{
background-color: #6C6C6C !important;
color: White;
font-family:Arial;
font-size: 10pt;
line-height: 200%;
width:100px
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="gvSource" runat="server" CssClass="drag_drop_grid GridSrc" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Item" HeaderText="Item"/>
<asp:BoundField DataField="Price" HeaderText="Price"/>
</Columns>
</asp:GridView>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</form>
</body>
</html>
ASPX.CS Page: -
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Item"), new DataColumn("Price") });
dt.Rows.Add("Shirt", 450);
dt.Rows.Add("Jeans", 3200);
dt.Rows.Add("Trousers", 1900);
dt.Rows.Add("Tie", 185);
dt.Rows.Add("Cap", 100);
dt.Rows.Add("Hat", 120);
dt.Rows.Add("Scarf", 290);
dt.Rows.Add("Belt", 150);
gvSource.UseAccessibleHeader = true;
gvSource.DataSource = dt;
gvSource.DataBind();
dt.Rows.Clear();
dt.Rows.Add();
}
}
protected void Button1_Click(object sender, EventArgs e)
{
foreach (GridViewRow row in gvSource.Rows)
{
Response.Write(row.Cells[0].Text.ToString());
}
}
}
You can use jquery 'tableDnD' plugin along with asp.net listview OR repeater.
Like this:
ASP.NET
<asp:Repeater>
<ItemTemplate>
<tr id='<%# Eval("ItemID") %>'>
<!-- Assign the unique key as the id of the row. -->
...
</tr>
</ItemTemplate>
</asp:Repeater>
JQuery
$(document).ready(function () {
$("#tbl").tableDnD({
onDrop: function (table, row) {
var RowIDs = '';
$('#tbl tr').each(function () {
RowIDs += $(this).attr('id') + ",";
});
$('#<%= hdnIDs.ClientID %>').val(RowIDs);
// Save the resulting sequence in a hidden field.
$('#<%= btnSaveOrder.ClientID %>').click();
// Postback the page and process the new sequence on server side.
},
onDragClass: "myDragClass",
});
});
Related
i have a method that generate tools based on the number value inserted, and I have another control called "DateTimePicker" that does the job of providing a textbox and the date+time picker function.
However, now the problem is that when i call dynamic_tools method and inserted the value "4" and "addInfoPanel" to the method.
The html code does not generating anything in the panel.
But, when i tried this html, it works.
lit.Text = #"<div class='errorMessage'>The user ID or password you entered does not match our records. Please try again. <br />
You may also securely recover your <a href='#'>User ID</a> or reset your <a href='#'>Password</a> online.
</div>";
I'm not too sure what is the reason behind this. I'm suspecting whether is it because of the custom control that i have created? any help is much appreciated. Thanks
Here's the code:
DateTimePicker.ascx.cs -> taken from https://github.com/jiestrada/DateTimePicker
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class DateTimePicker : System.Web.UI.UserControl
{
public string DateTime
{
get { return txtDateTime.Text; }
}
protected void Page_Load(object sender, EventArgs e)
{
DateTimePicker picker = this;
ScriptManager.RegisterClientScriptBlock(picker, picker.GetType(), "message", "<script type=\"text/javascript\" language=\"javascript\">getDateTimePicker();</script>", false);
}
}
DateTimePicker.ascx -> taken from https://github.com/jiestrada/DateTimePicker
<%# Control Language="C#" AutoEventWireup="true" CodeFile="DateTimePicker.ascx.cs"
Inherits="DateTimePicker" %>
<style type="text/css">
.textBox
{
width: 150px;
border-radius: 4px 4px 4px 4px;
color: #555555;
display: inline-block;
font-size: 14px;
height: 20px;
line-height: 20px;
margin-bottom: 10px;
padding: 4px 6px;
vertical-align: middle;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}
</style>
<script type="text/javascript" language="javascript">
function getDateTimePicker()
{
$('#datetimepicker').DateTimePickerNew({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'en'
});
}
</script>
<div id="datetimepicker" class="input-append date">
<asp:TextBox ID="txtDateTime" CssClass="textBox" runat="server"></asp:TextBox>
<span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript" language="javascript">
$('#datetimepicker').DateTimePickerNew({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'en'
});
</script>
Dynamic Tools Method
protected string dynamic_tools(int key, PlaceHolder panel)
{
if (key == 4)
{
string value = "dtp"+i;
Literal lit = new Literal();
lit.Text = #"<td><DateTime:DateTimePicker ID='DateTimePicker' runat='server' /></td>";
panel.Controls.Add(lit);
}
}
HTML CODE
<%# Register Src="~/Control/DateTimePicker.ascx" TagName="DateTimePicker" TagPrefix="DateTime" %>
<div id="wrapper">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="singtelUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:PlaceHolder ID="addInfoPanel" runat="server" Visible="false"></asp:PlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
</div>
DateTimePicker dtp = new DateTimePicker();
dtp.ID = "someID";
//Add some attributes else, if you need. Such as a width, height, so on.
panel.Controls.Add(new LiteralControl("<td>"));
panel.Controls.Add(dtp);
panel.Controls.Add(new LiteralControl("</td>"));
I have an asp.net 4.5 app using this as the base. I'm trying to find the bug in my code as it doesn't return the value from my modalpopup back to my 'TextBox1' on my default page.
I have a default.aspx page with the following:
<asp:TextBox ID="TextBox1" runat="server" />
<asp:Button ID="btnSelectFolder" runat="server" Text="Select Folder" OnClientClick="showDirectory();"/>
The default.aspx references my Site.Master page with the following JavaScript
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
<script type="text/javascript">
function showDirectory() {
document.all.TextBox1.value = window.showModalDialog("browseDirectory.aspx",
'jain',
"dialogHeight: 560px; dialogWidth:360px; edge: Raised; center: Yes; help: Yes; resizable: Yes; status: No;");
return false;
}
</script>
</head>
On my modalPopup (BrowseDirectory.aspx) I have the following JavaScript (SelectAndClose() function) that should return the contents of the _browseTextBox to my original Default.aspx page , but it returns a null error ( I included the entire header section):
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="BrowseDirectory.aspx.cs" Inherits="DirectoryBrowsin.BrowseDirectory" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Borwse Directory</title>
<style>
.errorMsg{FONT-SIZE: 8.25pt; COLOR: red; FONT-FAMILY: Verdana, Arial; TEXT-DECORATION: none }
.hilite { BACKGROUND-COLOR: #dfe5ff }
.nohilite { BACKGROUND-COLOR: #ffffff }
.text { FONT-SIZE: 8.25pt; COLOR: black; FONT-FAMILY: Verdana, Arial; TEXT-DECORATION: none }
.tableOutlineWt { BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #666666 1px solid; MARGIN-TOP: 0px; OVERFLOW: auto; BORDER-LEFT: #333333 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #cccccc 1px solid }
</style>
<script type="text/javascript">
function SelectAndClose()
{
txtValue = document.getElementById('_browseTextBox');
window.returnValue = txtValue.value;
window.close();
return false;
}
</script>
</head>
window.shoModalDialog is not implemented the same in all browsers. It first appeared in one of the earlier Internet Explorer browsers. Take a look at this SO answer on this topic: https://stackoverflow.com/a/10234548/2488939
I need to display loading GIF image while page is loading or during postbacks using jQuery and JavaScript for long running tasks or processes which require significant amount of time to execute.
I tried this solution, I don't have error but the loading not show.
My code below.
I would greatly appreciate any help you can give me in working this problem.
.cs
protected void Page_Load(object sender, EventArgs e)
{
string script = "$(document).ready(function ());";
ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
System.Threading.Thread.Sleep(5000);
ExportToXLSFunction();
}
.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="getData.aspx.cs" Inherits="getData"
EnableEventValidation="false" %>
<!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 type="text/javascript" src="/jquery/js/jquery.min.js"></script>
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
ShowProgress();
</script>
<style type="text/css">
.modal
{
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="loading" align="center">
Loading. Please wait.<br />
<br />
<img src="/images/wait01.gif" alt="" />
</div>
</form>
</body>
</html>
use ajaxStart() and ajaxStop()
/**on ajaxStart when process start it comes in this event**/
$( document ).ajaxStart(function() {
$( ".loading" ).show();
});
/**on ajaxStop when process stop it comes in this event**/
$( document ).ajaxStop(function() {
$( ".loading" ).hide();
});
Have a look at the fiddler
http://jsfiddle.net/VpDUG/4952/
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('http://sampsonresume.com/labs/pIkfp.gif')
50% 50%
no-repeat;
}
here is the nice explanation..you will love it.
How can I create a "Please Wait, Loading..." animation using jQuery?
I tried it, its working super.
Thanks to #Jonathan Sampson
Some tweak for basic submit or ASP.NET post back.
function doModal(callback) {
jQuery("body").addClass("loading");
window.setTimeout(callback, 100);
}
jQuery(document).ready(function () {
// Override __doPostBack()
if (typeof(__doPostBack) != "undefined") {
var dp = __doPostBack;
__doPostBack = function () {
var args = arguments;
doModal(function () {
dp.apply(dp, args);
});
};
}
jQuery('input[type="submit"]').click(function (ev) {
doModal(function () { });
});
});
The callback is not really needed, sorry :)
I've an aspx page and that page has a table like below
<table id="tbl1" runat="server">
<tr>
<td>
Hello world
</td>
</tr>
</table>
Now I want to get the position of the table (x,y coordinates) from code behind (C#).
Is there any way to get it?
Try this
ASPX:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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>Demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function getPosition(elmID) {
var elmPosition = $("#"+elmID).position();
$("#<%= hdnPosition.ClientID%>").val(elmPosition.left + "," + elmPosition.top);
}
$(document).ready(function () {
$("#<%= btnGetPosition.ClientID %>").click(function () {
getPosition("tbl1");
});
});
</script>
</head>
<body>
<form id="frmMain" runat="server">
<table id="tbl1" runat="server">
<tr>
<td>
Hello world
</td>
</tr>
</table>
<asp:HiddenField ID="hdnPosition" runat="server" />
<asp:Button ID="btnGetPosition" runat="server" Text="Get position"
onclick="btnGetPosition_Click"/>
</form>
</body>
</html>
Codebehind:
protected void btnGetPosition_Click(object sender, EventArgs e)
{
string position = hdnPosition.Value;
}
You can achieve this with many ways
add a placeholder and put your table at runtime:-
<asp:placeholder id="PlaceHolder1" runat="server" xmlns:asp="#unknown">
</asp:placeholder>
set CSS at runtime
style1
{
position:absolute;
left:100px; //Example
top:150px; //Example
}
in CS code, use
Table.CssClass = "style1";
You can use Control.Style Property to set style of a control:
Table tbl = new Table();
tbl.Style[HtmlTextWriterStyle.Position] = "Absolute";
tbl.Style[HtmlTextWriterStyle.Top] = "10px";
If you want it in complete JavaScript. For example:
<!DOCTYPE html>
<head>
<title>Overlapping tables</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
table.first
{
position: absolute;
margin: 0;
padding: 0;
color: #000000;
background-color: #ff0000;
text-align: center;
}
table.second
{
margin: 0;
padding: 0;
position: relative;
text-align: center;
color: #00ff00;
background-color: transparent;
}
</style>
<script type="text/javascript"><!--
onload = setPos;
function setPos ()
{
var table_1 = new namedTable ('first_table');
var table_2 = new namedTable ('second_table');
table_2.style.top = table_1.style.top - 1;
table_2.style.left = table_1.style.left - 1;
}
function namedTable(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers)
{
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
//--></script>
</head>
<body>
<table class="first" id="first_table">
<tr>
<td>
<h1>TABLE</h1>
</td>
</tr>
</table>
<table class="second" id="second_table">
<tr>
<td>
<h1>TABLE</h1>
</td>
</tr>
</table>
</body>
</html>
Notes:
1) The document still validates (both CSS and HTML) at w3.org.
2) It is tested in Mozilla and Internet Explorer.
3) By force of habit I use the doc-type xhtml1-strict.dtd, but you should
not use this doctype when publishing for Mozilla. Use HTML
transitional instead - or simply put in no header (which will let the
browsers run in Quirk mode, and be more lenient towards scripting
errors).
4)
If you further want to study this topic, here is a link to the most
precise and lightweight Javascript Positioning techniques I know of:
http://www.quirksmode.org/
Good luck!
I want the page to be updated each time the checkbox is checked or unchecked (which is using the Toggle Button from AJAX). But I am not able to do so. I tried doing the same with a button and an imagebutton, they work great( but i faced problem when I tried to update the toggle button in the "onclick" function), but I want to do this with the toggle button, I tried various means by using Page_Load() in databinding and checkchanged events but in vain. How can I correct the code>
Also I want to resize my background according to the resolution of the user. How can I do so? I surfed the net and tried to do many things with a stylesheet but in vain. Please Help.
The Codes are given below from Vidual Studio 9.
Default.aspx :
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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>Confidentially for 'You'</title>
<link id="Link1" rel="Stylesheet" href="StyleSheet.css" type="text/css" runat="server" />
</head>
<body background="eternal_hearts-normal.jpg" text="white">
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<p align="center" runat="server" id="p1">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />Default Line</p>
<p align="center" id="p2">
<asp:Image ID="Image1" runat="server" EnableViewState="False" />
<asp:CheckBox ID="CheckBox1" runat="server"
oncheckedchanged="Page_Load" ondatabinding="Page_Load" />
<cc1:ToggleButtonExtender ID="CheckBox1_ToggleButtonExtender" runat="server"
Enabled="True" TargetControlID="CheckBox1" ImageWidth="19"
ImageHeight="19" UncheckedImageUrl="ToggleButton_Unchecked.gif"
CheckedImageUrl="ToggleButton_Checked.gif" ondatabinding="Page_Load">
</cc1:ToggleButtonExtender>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<asp:ImageButton ID="ImageButton1" runat="server" Height="23px"
onclick="ImageButton1_Click" Width="30px"
ImageUrl="~/ToggleButton_Unchecked.gif" />
</p>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Default.aspx.cs :
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Threading;
public partial class _Default : System.Web.UI.Page
{
static int flag = 0;
protected void Page_Load(object sender, EventArgs e)
{
if (flag == 1)
{
f();
p1.InnerHtml = "Line 1";
}
else if (flag == 2)
{
f();
p1.InnerHtml = "Line 2";
}
else if (flag == 3)
{
f();
p1.InnerHtml = "Line 3";
}
flag++;
}
protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
Page_Load(null, EventArgs.Empty);
}
protected void Button1_Click(object sender, EventArgs e)
{
//if (flag == 0)
//{
// flag++;
// p1.InnerHtml = "Line 1";
//}
//else if (flag == 1)
//{
// flag++;
// p1.InnerHtml = "Line 2";
//}
//else if (flag == 2)
//{
// flag++;
// p1.InnerHtml = "Line 3";
//}
}
protected void f()
{
ImageButton1.ImageUrl = "ToggleButton_Unchecked.gif";
}
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
}
}
Stylesheet :
img#background
{
min-width: 800px;
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
div.back
{
overflow: hidden;
left: 0;
top: 0;
position: absolute;
z-index: -9999;
}
body
{
text-align: center;
left: 50pt;
right: 50pt;
font-family: 'Bookman Old Style';
position: absolute;
z-index: auto;
width : 100%;
height : 100%;
}
A little late in answer but try this -> http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ToggleButton/ToggleButton.aspx