Develop Reference

How to keep Nested Child GridViews Expanded across PostBack in ASP.Net C#

I am using nested datagrids from www.aspsnippets.com
On the inner grid I am allowing the user to delete rows.
However when the page posts back I am unable to reopen the row that was opened and no of all rows on the datagrid.
I have tried the code behind to open the row in nested datagrid but is not expanded.
The code was unsuccessful.
How can I have the row expanded when the page posts back?
.javascript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
$("[src*=plus]").live("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "/aspnet/img/minus.png");
});
$("[src*=minus]").live("click", function () {
$(this).attr("src", "/aspnet/img/plus.png");
$(this).closest("tr").next().remove();
});
$(function () {
$("[id*=IsExpanded]").each(function () {
if ($(this).val() == "1") {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $("[id*=pnlOrders]", $(this).closest("tr")).html() + "</td></tr>")
$("[src*=plus]", $(this).closest("tr")).attr("src", "images/minus.png");
}
});
})
.aspx
<Columns>
<%--START SUBGRIDVIEW--%>
<asp:TemplateField HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<img alt="" style="cursor: pointer" src="/img/plus.png" class="ddl_Class_new" />
<asp:Panel ID="pnlOrders" runat="server" Style="display: none">
<asp:GridView ID="gv_Child" runat="server"
AutoGenerateColumns="false"
DataKeyNames="sID"
CssClass="mGrid" HorizontalAlign="Center">
<Columns>
.....
</Columns>
</asp:GridView>
</asp:Panel>
<asp:HiddenField ID="IsExpanded" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<%--END SUBGRIDVIEW--%>
.....
</Columns>
.cs
protected void btn_Click(object sender, ImageClickEventArgs e)
{
if (!String.IsNullOrEmpty(Mp.Container.sMt))
{
ImageButton imgbtn = (ImageButton)sender;
GridViewRow row = (GridViewRow)imgbtn.NamingContainer;
HiddenField hiddenField = (HiddenField)row.FindControl("hf_resID");
string sID_contents = hiddenField.Value.ToString();
string FLabel = row.Cells[3].Text.ToString();
using (MySqlConnection myConnectionString =
new MySqlConnection(ConfigurationManager.ConnectionStrings["cn"].ConnectionString))
{
using (MySqlCommand cmd =
new MySqlCommand("SP", myConnectionString))
{
cmd.Connection.Open();
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("sID_contents", sID_contents.ToString());
cmd.ExecuteNonQuery();
cmd.Connection.Close();
this.BindData();
if (row.RowType == DataControlRowType.DataRow)
{
HiddenField IsExpanded = (HiddenField)row.FindControl("IsExpanded");
IsExpanded.Value = Request.Form[IsExpanded.UniqueID];
}
Page.ClientScript.RegisterStartupScript(this.GetType(), "Alert", "alert('" + FLabel.ToString() + "');", true);
}
}
}
else
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "Alert", "alert('Not enabled');window.location='Default.aspx';", true);
}
}
HTML code row not expanded
<div>
<table class="mGrid" cellspacing="0" align="Center"
rules="all" border="1"
id="ctl00_ContentPlaceHolder1_gvProducts_ctl15_gv_Child"
style="border-collapse: collapse;">
<tr>
<th scope="col">Name row</th>
</tr>
<tr>
<td class="ddl_Class_new" align="center">Value row</td>
<input type="hidden"
name="ctl00$ContentPlaceHolder1$gvProducts$ctl15$hdnchild"
id="ctl00_ContentPlaceHolder1_gvProducts_ctl15_hdnchild" />
</tr>
</table>
</div>
using-C-and-VBNet.aspx

Autocomplete Extender ajax on pressing enter key

I have created Ajax autocomplete extender on my web page that retrieves the values from the database.
When I select one of the options from the autocomplete dropdown list I get the desired result.
The problem is:
When the user types entire word by himself (or if the word is pasted) and when he does not select one of the options from the dropdownlist and presses enter, result is blank.
How do I solve this problem?
My code for autocomplete extender is:
<asp:HiddenField ID="HiddenID" runat="server" />
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:TextBox ID="SearchRetailer" runat="server" Style="background-image: url(Search-icon.png ); border: 1px groove black; background-position: right; background-repeat: no-repeat; float: right; width: 20%;" />
<asp:AutoCompleteExtender
ID="AutoCompleteExtender1"
TargetControlID="tgt1"
runat="server" MinimumPrefixLength="2" ServiceMethod="GetCompletionList" UseContextKey="True" OnClientItemSelected="GetCode" EnableCaching="true" />
The javascript function is:
<script type="text/javascript" language="javascript">
function GetCode(source, eventArgs) {
var hfield = $get('<%=this.HiddenID.ClientID%>');
hfield.value = eventArgs.get_value();
window.open("newPage.aspx?Paramter1=" + hfield.value + "", "_self", false);
}
</script>
And my webservice code is:
[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
public static string[] GetCompletionList(string prefixText, int count, string contextKey)
{
SqlConnection sqlconn = "my connection string"
string sql = "select abc from aaa where abc like '" + prefixText + "%'";
SqlDataAdapter cmd1 = new SqlDataAdapter(sql, sqlconn);
DataTable dt0r = new DataTable();
cmd1.Fill(dt0r);
int i = 0;
string[] rList = new string[dt0r.Rows.Count];
foreach (DataRow dr in dt0r.Rows)
{
rList.SetValue(dr["abc"].ToString(), i);
i++;
}
return rList;
}

I got it to work.
I added FirstRowSelected="true" in the properties of the autocomplete extender and the functionality is now working!!

Display Html Content in jQuery Tooltip for ASP.Net Repeater

I have an asp.net repeater that displays a title and an image. The image appears based on some of the calculations I do in the repeater ItemDataBound event.
I tried to implement a mouse over using jquery tooltip . But I can only display the title in the tooltip. I would like to display other details bound to the repeater (errorcalls, totalcalls - I use these details to perform calculations in the code behind) too within the tool tip.
Can anyone help me with what I should do ? I have the code below .
Code for the repeater :
<asp:Repeater ID="rptMonitorSummary" runat="server"
OnItemDataBound="rptMonitorSummary_OnItemDataBound">
<ItemTemplate>
<asp:Panel ID="Pnl" runat="server">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header" title="<%# Eval("Name").ToString()%> ">
<%# Eval("Name").ToString().Length > 9 ?
(Eval("Name") as string).Substring(0, 9) : Eval("Name")%>
</h5>
<div id="divHover">
<asp:Image Width="80px" ID="btnPerformanceImage"
runat="server" Height="45px"></asp:Image>
</div>
</li>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
Code Behind :
protected void rptMonitorSummary_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
int errorcalls = Convert.ToInt32(DataBinder.Eval(e.Item.DataItem, "ErrorRatingCalls"));
int totalcalls = Convert.ToInt32(DataBinder.Eval(e.Item.DataItem, "TotalCalls"));
float Percentage = 100 - ((((float)errorcalls / (float)totalcalls)) * 100);
if (Percentage == GetMaxMonitorThresholdValuebyLevelId(1))
{
((Image)e.Item.FindControl("btnPerformanceImage")).ImageUrl = "../Images/Level1.png";
}
else if (Percentage >= GetMinMonitorThresholdValuebyLevelId(2))
{
((Image)e.Item.FindControl("btnPerformanceImage")).ImageUrl = "../Images/Level2.png";
}
}
}
Javascript code :
$(function () {
$(document).tooltip();
});
I use the following css for the tool tip :
.ui-tooltip
{
text-align: center;
max-width: 180px;
font: bold 12px "Helvetica Neue", Sans-Serif;
}
I use the references below :
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
So basically the tool tip currently shows info of the title in one line something like :
ABC
I would like to display something like this in multiple lines :
ABC
PassPercentage = 100

jQuery tool tip doesn't allow HTML tags inside title attribute out of the box.
However, you can creates temporary place holder for each text (of repeater item). Then pass the content to tooltip when mouse hovers.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function () {
$(document).tooltip({
items: "h5",
content: function () {
var tooltip = $(this).siblings('.tooltip');
return tooltip.html();
}
});
});
</script>
<asp:Repeater ID="rptMonitorSummary" runat="server" OnItemDataBound="rptMonitorSummary_OnItemDataBound">
<ItemTemplate>
<asp:Panel ID="Pnl" runat="server">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">
<%# Eval("Name").ToString().Length > 9 ? (Eval("Name").ToString()).Substring(0, 9) : Eval("Name")%>
</h5>
<div class="center">
<asp:Image Width="50px" ID="btnPerformanceImage" runat="server" Height="28px"></asp:Image>
</div>
<div class="tooltip" style="display: none">
<%# Eval("Name") %><br/>
PassPercentage = <asp:Literal runat="server" ID="PassPercentageLiteral" />
</div>
</li>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
protected void rptMonitorSummary_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
int errorcalls = Convert.ToInt32(DataBinder.Eval(e.Item.DataItem, "ErrorRatingCalls"));
int totalcalls = Convert.ToInt32(DataBinder.Eval(e.Item.DataItem, "TotalCalls"));
float Percentage = 100 - ((((float)errorcalls / (float)totalcalls)) * 100);
var literal = e.Item.FindControl("PassPercentageLiteral") as Literal;
literal.Text = Percentage.ToString();
....
}
}

Perhaps you need to use the custom content function of the jQuery UI Tooltip instead:
http://jqueryui.com/tooltip/#custom-content
Using the $(this).is("h5") call, as in the example above, to customise the content when the user hovers over the h5 tag.

How to get html table position

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!

How can i handle Jquery tab close in codebehind

i use jquery tabs.
<%# register src="~/UserControls/Order/Control/OrderProductLicense.ascx" tagname="OrderProductLicense" tagprefix="uc1" %>
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
closable: true,
cache: true,
show: function() {
var selectedTab = $('#tabs').tabs('option', 'selected');
$("#<%= hdnSelectedTab.ClientID %>").val(selectedTab);
},
selected: <%= hdnSelectedTab.Value %>
});
});
</script>
<table width="100%">
<tr>
<td>
<div id="tabs">
<ul>
<asp:Repeater ID="rptTabs" runat="server">
<ItemTemplate>
<li><a href="#tabs-<%#DataBinder.Eval(Container,"ItemIndex","") %>">
<%#Eval("Id") %></a></li>
</ItemTemplate>
</asp:Repeater>
</ul>
<asp:Repeater ID="rptTabsSub" runat="server">
<ItemTemplate>
<div id="tabs-<%# DataBinder.Eval(Container, "ItemIndex", "") %>">
<uc1:OrderProductLicense ID="OrderProductLicense1" runat="server" />
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />
</td>
</tr>
</table>
My tabs has got close button. But i want to when a person close my tab after i want to delete some data in my session list with my selected tab text. Forexample.
public void TabClosing(object sender, string tabText)
{
MySession.OrderProductIdList.RemoveAll(p => p.ItemText == tabText);
}
how can write code like this ?
Best Regards

Markup:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#tabs").tabs({
});
$("#tabs span.ui-icon-close").on("click", function () {
var itemId = $(this).data().id;
$(this).closest("li").remove();
$("#tabs-" + itemId).remove();
$("#tabs").tabs("refresh");
$.ajax({
url: '<%= ResolveClientUrl("~/WebForm1.aspx/DeleteRecord") %>',
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ id: itemId })
});
});
});
</script>
<div id="tabs">
<ul>
<asp:Repeater runat="server" ID="rptTabs">
<ItemTemplate>
<li><a href='<%# Eval("ID", "#tabs-{0}") %>'>
<%# Eval("Title") %></a> <span class="ui-icon ui-icon-close" data-id='<%# Eval("ID") %>'>Remove Tab</span>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
<asp:Repeater runat="server" ID="rptTabsSub">
<ItemTemplate>
<div id='<%# Eval("ID", "tabs-{0}") %>'>
<%# Eval("Content") %>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
Code-behind:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
var dataSource = (from id in Enumerable.Range(0, 10)
select new { ID = id, Title = id.ToString() + " Title", Content = Guid.NewGuid().ToString() }).ToList();
rptTabs.DataSource = dataSource;
rptTabs.DataBind();
rptTabsSub.DataSource = dataSource;
rptTabsSub.DataBind();
}
}
[WebMethod]
public static void DeleteRecord(int id)
{
//delete record by id
}

Set EnablePageMethods = true in scriptmanager
<input type="button" id="btnClose" value="Close" onclick="DeleteEntryFromSession();"/>
//javascript
function DeleteEntryFromSession()
{
PageMethods.DeleteSessionEntry(para1,function(result)
{
//Success
//your closing code comes here
} ,function(error){ //error});
}
//c#
[WebMetod]
public static string DeleteSessionEntry(string para1)
{
try
{
// HttpContext.Current.Session["sessionName"]; //To Get session
//Delete Entry from Session
return "true"
}
catch(Exception)
{
throw;
}
}