Unable to find Rad Treeview using $find - c#

Here i have use below code for Telerik Rad Tree.Unable to catch the RadTreeView1 ,thisone working without any issue in my localhost but when i put a debugger to there then it shows me the null.
<div style="border: 1px solid #25A0DA; margin: 5px; padding: 5px; min-height: 400px; min-width: 200px;">
<telerik:RadTreeView ID="RadTreeView1" OnClientNodeClicked="ClientNodeClicked"
OnClientNodeCollapsed="ClientNodeCollapsedHandler"
Font-Size="Small" Skin="Metro" runat="server">
<ExpandAnimation Type="none"></ExpandAnimation>
<CollapseAnimation Type="none"></CollapseAnimation>
<WebServiceSettings Path="~/DesktopModules/hh/hc.asmx" Method="GetChildNodes">
</WebServiceSettings>
</telerik:RadTreeView>
</div>
Here is the function
function LoadRootNodes() {
var treeView = $find('<%=RadTreeView1.ClientID%>'); <-- pass null here
//Some codes here
}
In here unable to find a RAD Treeview1 from $find.

Try this,
treeview.OnClientLoad = "LoadRootNodes";
Javascript file
function LoadRootNodes(sender, args) {
var treeview=sender;
}

Related

stop alert box from firing on every postback

I have a webform that displays an alert box when a searched for item is not found. the alertbox is all asp side, calling it is c# side in codebehind.
the issue is that after the first time it is called, it calls on every postback of the page. after the click it should not fire again until after another missed search.
i have tried if(!ispostback), but the initial firing is a postback, so it won't fire at all.
during the postback it doesn't even call the c# code again, it just shows the alertbox.
<style type="text/css">
.alertBox
{
position: absolute;
top: 100px;
left: 50%;
width: 500px;
margin-left: -250px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
padding: 4px 8px;
}
</style>
<script type="text/javascript">
function closeAlert(e) {
e.preventDefault();
this.parentNode.style.display = "none";
}
</script>
</head>
<body>
<form id="form_rooftopSAQPM" runat="server">
<div runat="server" id="AlertBox" class="alertBox" Visible="false">
<div runat="server" id="AlertBoxMessage"></div>
<button onclick="closeAlert.call(this, event)">Ok</button>
</div>
...
private void site_Load(string siteNumber)
{
DataSet ds = retrieveDataFromSQL("exec s_RooftopSite " + siteNumber, "Couldn't retrieve site information");
if(ds.Tables.Count>0)
{
//load the fields
txtFoo.Text = ds.Tables[0].Rows[0][0].ToString();
}
else
{
MessageBoxShow("Site not found.");
}
}
protected void MessageBoxShow(string message)
{
this.AlertBoxMessage.InnerText = message;
this.AlertBox.Visible = true;
}
...
how can i set the alertbox to only fire when it is called by the c# code, yet still allow it to pop off on the first call, which is a postback?
I fixed it by switching from JavaScript to C#:
ASP:
<asp:Button runat="server" id="btnCloseAlert"
onclick="btnCloseAlert_Click" Text="Ok" />
CodeBehind in C#:
protected void btnCloseAlert_Click(object sender, EventArgs e)
{
AlertBox.Visible = false;
AlertBoxMessage.InnerText = "";
}

CSS table properties

I am trying to set some styles for objects that are within a table but the problem is that the properties are not being applied to the actual objects.
the .tblData works fine but the label and textbox properties are supposed to be or any ASP.net label or textbox that appears within the table but the CSS doesnt get applied to them.
.tblData {
border: solid;
border-width: 1px;
height: 200px;
color: rgb(45,40,128);
background-color: white;
width: 100%;
border-radius:3px;
margin-top:3px;
}
/*Class for the labels*/
.tblData label {
width: 13%;
color:black;
border-radius:3px;
font-family:verdana;
border-radius:3px;
border-color:rgba(45,40,128,0.75);
border-width:1px;
}
/*Class for the data textboxes*/
.tblData textbox {
border-color: rgba(45,40,128,0.75);
border-width: 1px;
background-color:rgba(45,40,128,0.10);
font-family:Verdana;
border-radius:3px;
}
This is the HTML (can't show all of it because the table is massive):
<table id="tblAddress" class="tblData">
<tr>
<td class="auto-style3">
<asp:Label ID="lblACNO" runat="server" Text="ACNO" CssClass="Datalabelcolumn"></asp:Label></td>
<td class="auto-style2">
<asp:TextBox ID="txtACNO" runat="server" CssClass="autosuggest" Width="20%" ToolTip="This is a test tooltip"></asp:TextBox>
</td>
In ASP.Net, server tag<asp:Label> will be rendered as html <span>.
for <asp:TextBox> it is <input type='text'>
So please change your css selector
from
.tblData label {}
.tblData textbox{}
to
.tblData span{} or .tblData .Datalabelcolumn{}
.tblData input[type="text"]{} or .tblData .autosuggest {}
You are applying different css class to your Lable and TextBox inside your table (i.e Datalabelcolumn and autosuggest). So it will only apply those properties. Remove them and it will work. Or mention whatever style you need in your "Datalabelcolumn" and "autosuggest" css class for those controls.
add class="tblData" to td instead of table
basic demo
<td class="tblData">
<label>this is a label</label>
<textbox>this is textbox</textbox>
</td>

Disable a page dynamically

I've an aspx page and I want to disable that page dynamically on a IF condition.
Here, By the word 'Disable' I mean an exactly same condition when a pop-up or a Radwindow opens and the Parent page gets disabled and the user is not able to do anything to the parent page until the pop-up gets closed.
For Ajax or Rad Controls, I can set the 'Modal' attribute of the control to true to make Parent page disabled. But what to do for my required condition.
Any suggestion would be appreciated.
You achieve the disabled effect by adding a div that covers the page using Javascript or JQuery.
var documentHeight = $(document).height();
$("body").append("<div style='z-index: 100; background: lightgray; opacity: 0.5; width: 100%; height: " + documentHeight + "px; position: absolute; left: 0; top: 0;'></div>");
The caveat is that this isn't "secure", if that's what you're after (the user could "hack" the disabling pane using Firebug or similar).
You can use ModalPopupExtender, take a look at my sample. I use this concept in all my sites and works great for all types of browsers.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="ConfirmDialogUserControl.ascx.cs"
Inherits="GP.Solutions.UserControls.ConfirmDialogUserControl" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<script type="text/javascript">
var _source;
var _popup;
function ShowConfirmDialog(source, message) {
this._source = source;
this._popup = $find('mdlPopup');
var displayDiv = document.getElementById('<%= ConfirmMessageDiv.ClientID %>');
displayDiv.innerText = message;
displayDiv.textContent = message;
this._popup.show();
}
function ConfirmDialogOk() {
this._popup.hide();
__doPostBack(this._source.name, '');
}
function ConfirmDialogCancel() {
this._popup.hide();
this._source = null;
this._popup = null;
}
</script>
<asp:Panel ID="pnlModal" runat="server" CssClass="modalPopup" style="display:none;">
<div class="modalHeader">
<div id="DivImage" runat="server"> </div>
<asp:Label ID="TitleLabel" runat="server" Text="" CssClass="modalTitle"></asp:Label>
</div>
<asp:Panel ID="pnlControls" runat="server" CssClass="modalContent">
<div id="ConfirmMessageDiv" runat="server"></div>
</asp:Panel>
<div class="modalControlsContainer">
<asp:Button ID="btnConfirmDialogOk" runat="server" CssClass="modalButton" Text="" />
<asp:Button ID="btnConfirmDialogCancel" runat="server" CssClass="modalButton" Text="" />
</div>
</asp:Panel>
<asp:ModalPopupExtender ID="ModalPopupExtender1" behaviorid="mdlPopup" runat="server" TargetControlID="pnlModal"
PopupControlID="pnlModal" OkControlID="btnConfirmDialogOk" OnOkScript="ConfirmDialogOk();" CancelControlID="btnConfirmDialogCancel"
OnCancelScript="ConfirmDialogCancel();" DynamicServicePath="" Enabled="True" BackgroundCssClass="modalBackground" DropShadow="true">
</asp:ModalPopupExtender>
Here is css code used in this case:
.modalBackground
{
background-color:Black;
filter:alpha(opacity=60);
opacity:0.6;
}
.modalPopup
{
background-color:White;
border: 1px solid green;
width:280px;
padding: 10px 10px 10px 10px;
}
.modalPopupFullWidth
{
background-color:White;
border: 1px solid green;
padding: 10px 10px 10px 10px;
}
.modalHeader
{
width:auto;
border: 1px solid silver;
height:25px;
background-color:#F2F2F2;
}
.modalTitle
{
color:Black;
font-size: 11px;
font-weight:bold;
position:relative;
left:30px;
top:-20px;
}
.modalImageInformation
{
background-image: url('information.png');
background-repeat: no-repeat;
width:26px;
height:26px;
border: 0;
}
.modalImageWarning
{
background-image: url('warning.png');
background-repeat: no-repeat;
width:26px;
height:26px;
border: 0;
}
.modalImageError
{
background-image: url('error.png');
background-repeat: no-repeat;
width:26px;
height:26px;
border: 0;
}
.modalImageQuestion
{
background-image: url('question.png');
background-repeat: no-repeat;
width:26px;
height:26px;
}
.modalImageSearch
{
background-image: url('search.png');
background-repeat: no-repeat;
width:26px;
height:26px;
}
.modalContent
{
padding-top:10px;
padding-bottom:0px;
}
.modalControlsContainer
{
margin-left:auto;
margin-right:auto;
text-align:center;
padding-top:5px;
}
.modalButton
{
background-image: url('button-113x28.png');
background-color:transparent;
width:113px;
height:28px;
border: 0px none transparent;
color: White;
font-size:11px;
cursor:pointer;
margin-top:10px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.hidden { display: none; }
.unhidden { display: block; }

Dynamically find the position of a button is asp.net?

i have written one javascript function to retrieve the position of a button and assigned it to asp:updateprogress but i want to apply the button's position to div element in the code or a label control within the updateprogress not to update progress.
<asp:UpdateProgress ID="UpdateProgress2"
runat="server"
AssociatedUpdatePanelID="SendMailUpdatePanel"
DisplayAfter="0">
<ProgressTemplate>
<div id="blur" style="top: 0px; left: 0px; width: 99%; height: 5000px; position: absolute;background-color: white; z-index: 999; filter: alpha(opacity=50); opacity: 0.5;-moz-opacity: 0.85; padding-top: 25%; padding-left: 30%;" />
<div id="progress" style="text-align: center; width: 444px; border: 1px solid black;padding: 10px; background-color: #eee; z-index: 998; filter: alpha(opacity=500);-moz-opacity: 1.00;">
<b>Mail is being Sent! Please Wait...</b>
<br />
<asp:Image ID="LoadImage"
runat="server"
ImageUrl="~/Images/spinner.gif" />
<br />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
My javascript function is:
function getPosition(btnSendResume, progress)
{
var btnSendRe = document.getElementById(btnSendResume);
var divp = document.getElementById(progress);
divp.style.display="block";
divp.style.left=btnSendRe.offsetLeft;
divp.style.top=btnSendRe.offsetTop + btnSendRe.offsetHeight - 40;
}
I have written following under button click:
btnSendResume.Attributes.Add("onclick", "getPosition('" + btnSendResume.ClientID + "','" + UpdateProgress2.FindControl(progress).ClientID + "');");
But it is giving error that progress doesn't exist under the current context.
Your <div id="progress" is a normal HTML element, not a server-side control.
You should just write document.getElementById("progress").
You can do this by Jquery.
A simple offset() will return left and top position of a control.
function getPosition(btnSendResume, progress)
{
var btnSendReOffset = $('#btnSendResume').offset();
var btnSendRe = $('#btnSendResume');
var divp = document.getElementById(progress);
divp.style.display="block";
divp.style.left=btnSendReOffset.left;
divp.style.top=btnSendReOffset.top+ btnSendRe.height() - 40;
}
You can add a click event to your button on window load and trigger your function.

Expanding gridview's row

One of gridview's column is a "Content" column that can have few lines of text (it can be literal, textbox or label ).
In "default" mode i want it to show only the first line and a link button: "(more)" or "(read)".
Clicking on this link should expand the column and display full content.
What is the best way to do this?
Selecting first 10 characters of content text and using it as your link's text is better aproach. This will reduce size of data that retrieved from database like that :
SELECT ContentId, SUBSTRING(Content, 0, 10) AS Content
FROM ContentTable;
Then you can use template column for this column that includes a label and a link. Lbel for the description text, link for the details.
<asp:TemplateColumn>
<ItemTemplate>
<asp:Label
Text='<%# Eval("Content") %>'
runat="server"/>
<a href='<%# Eval("ContentId", "contentdetails.aspx?id={0}") %>'>More</a>
</ItemTemplate>
</asp:TemplateColumn>
This will help you.
http://www.asp.net/community/control-gallery/Item.aspx?i=1465
try this. http://mosesofegypt.net/post/BuildingjQueryAndASPNetAJAXEnabledControlsjQueryCollapsiblePanelExtenderPart2.aspx
Use the power of CSS!
Place this inside your gridview row. It will naturally push out the row to the height of your content, or the amount of rows required.
<div class="toggle">
<div class="toggle-header">
Toggle!
</div>
<div class="toggle-height">
<div class="toggle-transform">
<p>2nd line of text</p>
<p>3rd line</p>
<p>4th line</p>
<p>etc</p>
</div>
</div>
</div>
And use this CSS...
body {
font-family: sans-serif;
}
.toggle {
position: relative;
border: 2px solid #333;
border-radius: 3px;
margin: 5px;
width: 200px;
}
.toggle-header {
margin: 0;
padding: 10px;
background-color: #333;
color: white;
text-align: center;
cursor: pointer;
}
.toggle-height {
background-color: tomato;
overflow: hidden;
transition: max-height .6s ease;
max-height: 0;
}
.toggle:hover .toggle-height {
max-height: 1000px;
}
.toggle-transform {
padding: 5px;
color: white;
transition: transform .4s ease;
transform: translateY(-100%);
}
.toggle:hover .toggle-transform {
transform: translateY(0);
}
You may want to disguise the "toggle" with a textbox of your "(more)" line to expand the rest.
Let us know if it worked.

Categories