I need help on freezing gridview column header in asp.net.
I have tried to create a css code on page source code as displayed below:
<style type="text/css">
.Freezing
{
position:relative ;
top:expression(this.offsetParent.scrollTop);
z-index: 10;
}
</style>
And after that i called the css into page load of web form.
GridView1.CssClass = "Freezing"
Nothing happens whenever i debug the web application with above codes.
Thanks in advance.
You may using third party for database. Below are the url
http://datatables.net/
you can use this jquery plugin https://github.com/laertejjunior/freezeheader/
in your asp.net page:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("table").freezeHeader();
});
</script>
if your page work with ajax, add this script in the end of page, to the script continue working after postback
<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
$("table").freezeHeader();
}
</script>
see demo in https://github.com/laertejjunior/freezeheader/
I hope this helps.
Related
I'm looking for a custom user control similar to http://www.how-to-asp.net/messagebox-control-aspnet/ but having the ability to be displayed as a popup. The message box should have the capability of being invoked from code behind in asp.net 4 with event hooks to bind the "ok" and "cancel" button.
I'm familiar with Ajax Toolkit and JQuery.
A reference and or sample in a similar direction would be very helpful.
Thanks!
Use jQuery UI. They have great examples. I use the dialog all the time.
You can view their source and here is an example of one.
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
You are able to customize this anyway you want. The link will show you how to do this.
EDIT: Since you want to open it in the behind code, I'll show you my jQuery and how I call it in the behind code. I use this to send emails.
function sendEmail() {
$("#email").dialog({
modal: true,
width: 700,
buttons: {
"Send": function () {
var btn = document.getElementById("<%=lbSend.ClientID %>");
if (btn) btn.click();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
);
jQuery("#email").parent().appendTo(jQuery("form:first"));
};
Then in the behind code.
protected void btnEmail_Click(object sender, EventArgs e)
{
//this calls the jQuery function.
Page.ClientScript.RegisterStartupScript(this.GetType(), "Call my function", "sendEmail();", true);
}
In my experience, it's usually a sign of a bad design if you want to open something on the client side from the server side code behind. Are you sure that's what you need?
But assuming you do, you can use the ModalPopupExtender from the Ajax Control Tookit. It can be opened from client or server side. Here's a sample:
<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"
TargetControlID="LinkButton1" ClientIdMode="Static"
PopupControlID="Panel1" />
The PopupControlID should be the ID of a panel that you want to appear as a popup. You can put buttons on that panel if you need to. From the code behind, it's as simple as this...
MPE.Show();
To show it from JavaScript (assuming jQuery), make sure you set the ClientIdMode to Static, then call it...
$('#MPE').show();
public void Message(String msg)
{
string script = "window.onload = function(){ alert('";
script += msg;
script += "');";
script += "window.location = '";
script += "'; }";
ClientScript.RegisterStartupScript(this.GetType(), "Redirect", script, true);
}
i have used JQuery date picker in form- form contains just one text box and when we clicks on it--> it pops up the JQUERY datepicker.
In other web form in same project --> i have used script manager, Update panel and one textbox --> when click on it - am not getting JQUERY Datepicker Popped.??
What will be the issue.?? Any problem with-> async. postback triggers..?/
Will there be any issues when JQUERY Datepicker used with AJAX controls..??
Do you initialize the datepicker correctly on PanelUpdate ?
<script type="text/javascript">
$(document).ready(function() {
$(".clDate").datepicker();
});
</script>
Also for the update panel to fix again the DatePicker after the ajax update you need the foloowing code
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
function InitializeRequest(sender, args) {
}
function EndRequest(sender, args) {
$(".clDate").datepicker();
}
</script>
Update:About the Sys. -> http://msdn.microsoft.com/en-us/library/bb311028.aspx
I have a page which uses cufon and asp:UpdatePanel. After ajax callback the new content does not replace tags with cufon. I've tried:
<script type="text/javascript">
alert('Cufon refresh start!');
Cufon.refresh();
alert('Cufon must be ok!');
</script>
But don't get any alert or cufon replacement.
Related to How to have a javascript callback executed after an update panel postback? I've used pageLoad event which is triggered after each postback:
<script type="text/javascript">
function pageLoad(sender, args) {
Cufon.refresh();
}
</script>
I use the following
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
//rebind jquery here after update panel async postback!
InitSlider();
Cufon.refresh();
}
i hv designed one user control, and used on my aspx pages whereever needed.
my user control does not have tag.
now i want to call some javascript function onload of this user control.
can anyone tell me how to achieve....... ?
any help appreciated
Regards,
Manoj
You can just type the script directly in the body of your .ascx file, for example:
<script type="text/javascript">
window.onload = function() {
initialize();
}
window.onunload = function() {
GUnload();
}
</script>
How can I accomplish gridview sorting in client browser using javascript ? without using inbuilt gridview sorting method. I really dont want the gridview to go to the DB each time while sorting.
Try the jQuery plugin tablesorter
<script type="text/javascript" src="/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>
....
<script type="text/javascript">
var aspxElements = {
theGrid: '<%= myGrid.ClientID %>' //I'm not entierly sure this is the id of the table or some container element
};
$(document).ready(function() {
$('#' + aspxElements.theGrid).tablesorter();
});
</script>
(modified from the demo on this page)
Note that this will get weird if you're using pagination.