Anyone have a link to a code sample or can you provide a snippet to accomplish this task. I'm coming up blank on the Telerik site
I had to put something together a while ago and found snippets of code scattered throughout Telerik's site and blogs. So, I don't want to take "credit" for creating the below code... but here's what I'm using:
Add this to your css
.rcbHeader ul, .rcbFooter ul, .rcbItem ul, .rcbHovered ul, .rcbDisabled ul
{
width: 100%;
display: inline-block;
margin: 0;
padding: 0;
list-style-type: none;
}
.col1, .col2, .col3
{
float: left;
width: 100px;
margin: 0;
padding: 0 0px 0 0;
line-height: 14px;
}
If you want an "item counter" add this javascript function
function UpdateItemCountField(sender, args) {
//set the footer text
sender.get_dropDownElement().lastChild.innerHTML = "A total of " + sender.get_items().get_count() + " items";
}
Here's the code for the RadComboBox
<telerik:RadComboBox runat="server" ID="rcbInvoiceNumber" Height="190px" Width="350px"
MarkFirstMatch="true" EnableLoadOnDemand="true" HighlightTemplatedItems="true"
OnClientItemsRequested="UpdateItemCountField" OnItemDataBound="rcbInvoiceNumber_ItemDataBound"
OnItemsRequested="rcbInvoiceNumber_ItemsRequested" EmptyMessage="Enter Invoice Number"
ChangeTextOnKeyBoardNavigation="true" ValidationGroup="QuickPay">
<HeaderTemplate>
<ul>
<li class="col1">Invoice Number</li>
<li class="col2">PO Number</li>
<li class="col3">Invoice Total</li>
</ul>
</HeaderTemplate>
<ItemTemplate>
<ul>
<li class="col1">
<%# DataBinder.Eval(Container.DataItem, "InvoiceNumber") %></li>
<li class="col2">
<%# DataBinder.Eval(Container.DataItem, "PONumber")%></li>
<li class="col3">
<%# DataBinder.Eval(Container.DataItem, "TotalInvoice", "{0:C}")%></li>
</ul>
</ItemTemplate>
<FooterTemplate>
A total of
<asp:Literal runat="server" ID="RadComboItemsCount" />
items
</FooterTemplate>
</telerik:RadComboBox>
Finally, the code behind
protected void rcbInvoiceNumber_DataBound(object sender, EventArgs e)
{
//set the initial footer label
((Literal)rcbInvoiceNumber.Footer.FindControl("RadComboItemsCount")).Text = Convert.ToString(rcbInvoiceNumber.Items.Count);
}
protected void rcbInvoiceNumber_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
{
var invs = new VInvoicesCasesTotalCollection()
.Load();
rcbInvoiceNumber.DataSource = invs.ToDataTable();
rcbInvoiceNumber.DataBind();
}
protected void rcbInvoiceNumber_ItemDataBound(object sender, RadComboBoxItemEventArgs e)
{
//set the Text and Value property of every item
//here you can set any other properties like Enabled, ToolTip, Visible, etc.
e.Item.Text = ((DataRowView)e.Item.DataItem)["InvoiceNumber"].ToString();
e.Item.Value = ((DataRowView)e.Item.DataItem)["InvoiceID"].ToString();
}
It should be noted that I've added Telerik.Web.UI to my using statements.
Hopefully this at least helps steer you in the right direction.
I've seen the links on this page and went in search of the answer on their page, becasue I was sure I had seen it before.
The link to mentioned in the comment section of clk's post is indeed a demo, but if you want the basics and quite possibly the easiest documentation to look at it would be found here.
As you mention you are loading you data on the code behind, so what you could do is load the entities first, set the data source next, and then continue to follow the rest of my linked articles code in the page load.
Hope it helps even a little.
Related
Is it possible to add an onClick event to an asp:label and let it call a c# method rather than js?
Something like:
<asp:Label
ID="lblTest"
runat="server"
Text=""
ToolTip="Amount of errors this person is processing"
Style="cursor: help;"
OnClick="lbl_Click"
/>
And on the server side:
protected void lbl_Click(object sender, EventArgs e)
{
lblTest.Text = "Clicked"
}
You can create linkedbutton and make it look like label using CSS like this:
<asp:LinkButton ID="LinkButton1"
runat="server"
CssClass="myclass"
OnClick="LinkButton1_Click">
MyButton
</asp:LinkButton>
and in CSS
a.myclass{ color: #000000; text-decoration: none; }
a.myclass:hover { text-decoration: none; }
and then call it like
public void LinkButton1_Click()
{
lblTest.Text = "Clicked"
}
'
I have a problem with my site in ASP.NET. My applications contains a few buttons (imagebuttons) that are able to change. For example: When I press an empty button I want to be able to put a picture and a website in it. I've made this possible with a popupbox.
The problem where I'm running into:
When Im trying to give button 2 a image and a website, it gives button 1 a image and website because I told it in:
public partial class Ingelogd : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Image1_Click(object sender, ImageClickEventArgs e)
{
if (DropDown.SelectedItem.Value == "Youtube")
{
Btn_1.ImageUrl = "~/Images/Youtube.png";
Btn_1.PostBackUrl = ("http://www.youtube.com");
Btn_1.OnClientClick = "";
}
else
{
}
}
Now I actually want the same for Btn_2 , but then I have to write the exact same code but change Btn_1 to Btn_2. This is impossible to do because I want 19 website ( youtube but also facebook, twitter etc.) Im also going to have 19 buttons ( currently I only have Btn_1 and Btn_2). This would mean I have to make 19*19 = 361 pieces of code. I assume there is a way to make a sub program for this. My teacher also told me I could use cookies for the buttonclick, but I have no idea how to make a cookie with a Imagebutton.
What is the best solution to solve this problem?
I also have the ASP.NET Code here for you who wants to see that code aswell.
<title>Ingelogd</title>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
<style type="text/css">
#popupBoxOnePosition{
top: 0; left: 0; position: fixed; width: 100%; height: 120%;
background-color: rgba(0,0,0,0.7); display: none;
}
.popupBoxWrapper{
width: 550px; margin: 50px auto; text-align: left;
}
.popupBoxContent{
background-color: #FFF; padding: 15px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
Dit is de pagina als je ingelogd bent.
</div>
<div id="popupBoxOnePosition">
<div class="popupBoxWrapper">
<div class="popupBoxContent">
<h3>Instellingen</h3>
<p>Kies uit een van de volgende links.</p>
<asp:DropDownList ID="DropDown" runat="server">
<asp:ListItem >Select</asp:ListItem>
<asp:ListItem >Youtube</asp:ListItem>
<asp:ListItem >Facebook</asp:ListItem>
</asp:DropDownList>
<br />
<asp:ImageButton ID="Button1" runat="server"
OnClick="Image1_Click"/>
<br />
<asp:Button ID="Button_afsluiten" runat="server" Height="48px" OnClientClick="toggle_visibility('popupBoxOnePosition');return false;" Text="Afsluiten" />
</div>
</div>
</div>
<asp:ImageButton ID="Btn_1" runat="server" Height="48px" OnClientClick="toggle_visibility('popupBoxOnePosition');return false;"
ImageUrl="" />
<asp:ImageButton ID="Btn_2" runat="server" Height="48px" OnClientClick="toggle_visibility('popupBoxOnePosition');return false;"
ImageUrl="" />
</form>
</body>
</html>
You can try to add attributes to DropDownList and to use it. For example add two new attributes ImageUrl and SiteUrl. Your code should look:
protected void Image1_Click(object sender, ImageClickEventArgs e)
{
Btn_1.ImageUrl = DropDown.Attrubutes["ImageUrl"];
Btn_1.PostBackUrl = DropDown.Attrubutes["SiteUrl"];
Btn_1.OnClientClick = "";
}
I've never used asp, but most of those code is just plain c#, so I should be good.
Make 19 separate functions, one for each button, and dynamically add the Image and Url instead of using ifs:
protected void Image1_Click(object sender, ImageClickEventArgs e)
{
String val = DropDown.SelectedItem.Value;
Btn_1.ImageUrl = "~/Images/" + val + ".png";
Btn_1.PostBackUrl = "http://www." + val + ".com";
Btn_1.OnClientClick = "";
}
If you want 1 function for all buttons as well, you'll have to give all your buttons a Name and check the senders name inside the function.
I want to adding style to asp.net label, but it wont work.
ASP.NET Mark up
<asp:Label runat="server" ID="lblCommentText"/>
Generated from the backend: Html mark up
<span id="ctl02_ctl36_CommentText">Only the leave the comment please</span>
............................................
I want to add the following style to the label
{
float:right;
width:70%;
}
I've tried using
cssClass property
Add this lblCommentText.Attributes.CssStyle.Add("float", "right"); to backend
using javascript
document.getElementById('<%= lblCommentText.ClientID%>').Style.display = ("float","right");
and also in-line style to the element
none of them works, can someone help me out ?
Labels are rendered as spans and spans are basically inline elements. You need to make it block or inline-block in order to get the float and width have effect.
.yourclass {
display: inline-block;
float: right;
width: 70%;
}
And then simply use cssclass:
<asp:Label runat="server" ID="lblCommentText" CssClass="yourclass" />
Inline:
<asp:Label runat="server" ID="lblCommentText" style="float:right" />
Using class:
<style>
.styleclass{
float: left;
}
</style>
<asp:Label runat="server" ID="lblCommentText" CssClass="styleclass" />
Using ID;
<style>
#ctl02_ctl36_CommentText {
float: left;
}
</style>
<asp:Label runat="server" ID="lblCommentText" />
If you want to add from code behind then use like below:
lblCommentText .Attributes.CssStyle.Add("float", "right");
lblCommentText.Attributes.CssStyle.Add("width", "70%");
If you want to add from aspx page then create a css class like:
.testClass{float: right;width: 70%;}
and assign like this:
asp:Label runat="server" ID="lblCommentText" runat="server" Text="test data" CssClass="testClass"
asp:label is being converted to span. So, you can set
span { float:left }
I have an asp.net repeater that displays a title and and image.
The title is very long , so I want to display the title again on mouse over.
I tried to implement a mouse over but I have the following problem.
My display looks like this :
Repeater Element 1 Repeater Element 2
Title 1 Title 2
Image 1 Image 2
Now on doing a mouse over on Element1 , my mouse over displays Title1.
On doing a mouseover on Element2 , my mouse over displays Title1 again ,and I would like it to
display Title2 ? Can anyone point me on how i can achieve this.
My code is below :
<asp:Repeater ID="rptMonitorSummary" runat="server" OnItemDataBound="rptMonitorSummary_OnItemDataBound">
<ItemTemplate>
<asp:Panel ID="Pnl" runat="server" onmouseover="return showsamplepopup();" onmouseout="return hidesamplepopup();">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">
<%# Eval("Name").ToString().Length > 9 ? (Eval("Name") as string).Substring(0, 9) : Eval("Name")%>
</h5>
<div id="popup" style="position: absolute; width: 80px; height: auto; background-color: Lime;
border-bottom: solid 3px gray; display: none; border-right: solid 3px gray; display: none;">
<%#Eval("Name")%>
</div>
<div class="center">
<asp:Image Width="50px" ID="btnPerformanceImage" runat="server" Height="28px"></asp:Image>
</div>
</li>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
The javascript functions are as follows :
function hidesamplepopup() {
document.getElementById('popup').style.display = 'none';
return false;
}
function showsamplepopup(e) {
e = (e) ? e : window.event;
var element = (e.target) ? e.target : e.srcElement;
var left = element.offsetLeft;
var top = element.offsetTop;
while (element = element.offsetParent) {
left += element.offsetLeft;
top += element.offsetTop;
}
document.getElementById('popup').style.display = 'block';
document.getElementById('popup').style.left = left;
document.getElementById('popup').style.top = top;
return false;
}
I do not know what is your requirement. It could have been a lot easier if you use jQuery tooltip.
This is just an alternative approach.
<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();
});
</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" title="<%# Eval("Name").ToString() %>">
<%# 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>
</li>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
Notice that getElementById will return the first element with that ID. And you're using the same ID for your Div's.
You should either use a different ID for each item of the repeater (generating different ID's for each of them), or change your logic to fetch them by some other property. I highly recommend using jQuery as well.
I would change the way which you are binding the events to elements, as your sample code doesn't use jQuery I'll assume you don't want it :)
First things first, you'll want to add a class to the asp:panel so that there will be some way of identifying and selecting all the instances. Also you'll want to use classes for your popups not IDs as IDs should be unique on a page.
then you can do something like:
var elements = document.querySelectorAll('.thatClassYouAdded'),
i = 0, l = elements.length;
for(;i<l;i++)
{
elements[i].addEventListener('mouseover', function(e) {
var popup = this.querySelector('.popup');
//do some stuff to popup
});
}
It's also important to note that querySelector is not supported in legacy browsers (see https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector for more info and support table) and older IEs (pre 9) use attachEvent instead of addEventListener which you may need to write additional code to support
Here i have a div in which i am showing it during the mouse hover in the master page and after mouse hover three href links will appear in that div .After clicking that href link it is traversing to another page,postback happens and that div is getting hidden in the master page.I need to show that div after that click also.I have used updatepanel and tried it but still it is not working.here is my code
//Div part
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="Update" runat="server">
<ContentTemplate>
<div runat="server" class="divSUBMenu" id="describe" style="width: 700px; height: 20px;
font: Arial, Helvetica, sans-serif;" onclick="show(0)">
</div>
</ContentTemplate>
</asp:UpdatePanel>
//Onhover part
<a href="#" onmouseover="showit(0)">
<img src="Images/Analyze_over.jpg" name="image1" width="84" height="22" border="0"
id="image1" alt="" /></a>
//Javascript for mousehover(working fine)
var submenu = new Array();
submenu[0] = ' <font style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;"><a style="color: #FFFFFF; text-decoration: none;" href="ATrendAnalysis.aspx">Trend Analysis</a> <a style="color: #FFFFFF; text-decoration: none;" href="AEventPerformance.aspx">Event Performance</a> <a style="color: #FFFFFF; text-decoration: none;" href="ACannibalization.aspx">Cannibalization</a> <a style="color: #FFFFFF; text-decoration: none;" href="AHaloEffect.aspx">Halo Effect</a> <a style="color: #FFFFFF; text-decoration: none;" href="AVolumeDecomposition.aspx">Volume Decomposition</a></font></span>';
var delay_hide = 500;
var menuobj = document.getElementById ? document.getElementById("describe") : document.all ? document.all.describe : document.layers ? document.dep1.document.dep2 : "";
function showit(which) {
clear_delayhide();
document.getElementById("describe").style.visibility = 'visible';
thecontent = (which == -1) ? "" : submenu[which];
if (document.getElementById || document.all) {
menuobj.innerHTML = thecontent;
}
else if (document.layers) {
menuobj.document.write(thecontent);
menuobj.document.close();
}
}
and finally the part below is not working during the onclick but this alert is working
function show(which) {
alert("test");
document.getElementById("describe").style.visibility = 'visible';
}
Any suggestion??
EDIT:
This is the href am clicking
<a style="color: #FFFFFF; text-decoration: none;" href="ATrendAnalysis.aspx">Trend Analysis</a>
You have to use ClientScriptManager
http://msdn.microsoft.com/en-us/library/3hc29e2a.aspx
Example:
void Page_Load(object sender, EventArgs e)
{
if(checkDisplayCount.Checked)
{
String scriptText = "";
scriptText += "function DisplayCharCount(){";
scriptText += " spanCounter.innerText = " +
" document.forms[0].TextBox1.value.length";
scriptText += "}";
ClientScriptManager.RegisterClientScriptBlock(this.GetType(),
"CounterScript", scriptText, true);
TextBox1.Attributes.Add("onkeyup", "DisplayCharCount()");
LiteralControl spanLiteral = new
LiteralControl("<span id=\"spanCounter\"></span>");
PlaceHolder1.Controls.Add(spanLiteral);
}
}
Since the div is set to runat=server, you could control this on the server side - setting describe.IsVisible = false initially, and changing it to describe.IsVisible = true post-click.
If for whatever reason this must be done on the client, due to reliance on other scripts or something, then make sure you're looking for the control by using the correct identifier - it could be, depending on the version of ASP.NET you're using, that the control is prefixed with ctl00_x. In fact, even in newer versions of ASP.NET (above .NET 3.5), I think the UpdatePanel might explicitly alter the identifiers of its elements using a prefix so as to keep track of what it contains, don't quote me on that though. Check the rendered markup output on the page to check this.