Binded DropDownList with ToolTip - c#

Hi I have a DropDownList bounded from the code behind. How can I use the DataTextField as a ToolTip of the DropDownList?
DropDownList list = this.DropDownList1;
list.DataSource = GetData();
list.DataTextField = "DisplayString";
list.DataValueField = "DataValue";
list.DataBind();
I want the bounded Field DisplayString to bounded also in the ToolTip. Is this possible without using the DataBound event of the DropDownList?

Simply call that function after dropdown list binding: BindTooltip(Name of the dropdownlist);
public void BindTooltip(ListControl lc)
{
for (int i = 0; i < lc.Items.Count; i++)
{
lc.Items[i].Attributes.Add("title", lc.Items[i].Text);
}
}

http://www.codeproject.com/KB/aspnet/List_Box_Tool_Tip.aspx
http://www.dotnetspider.com/resources/5099-Tool-tip-for-DropDownList-ASP-NET.aspx

Below code will work, need to call this method in PageLoad and pass the dropdown list to the method for which you want tooltip
protected void Page_Load(object sender, EventArgs e)
{
BindToolTip(ddlProjects);
}
Below is the actual method:
private void BindToolTip(ListControl list)
{
foreach (ListItem item in list.Items)
{
item.Attributes.Add("title", item.Text);
}
}

Well with some javascript work,it's quite possible.
First you create a div inside your html side with mouse out event
<div id="tooltip" style="display:none;" onmouseout="hidetooltip();"></div>
then some javascript work is required to insure your when you hover you dropdownlist item it shows a tooltip
function showtooltip(element) {
//select focused elements content to show in tooltip content
document.getElementById("tooltip").innerHTML =
element.options[element.selectedIndex].text;
//show tooltip
document.getElementById("tooltip").style.display = "block";
}
function hidetooltip() {
//hide tooltip
document.getElementById("tooltip").style.display = "none";
}
The last part is adding mouse over and out event to your dropdownlist
<asp:DropDownList ... onmouseover="showtooltip(this)"
onmouseout="hidetooltip()" ... >
Then it should work.You may need to add extra style for your tooltip.
Hope this helps Myra

Here are 3 sample examples I am currently using! First using standard Select.
Second using Asp.net Dropdownlist with an external datasource. 3rd simplest, add tooltip (title attribute) dynamically using jQuery on dropdown (select) click event.
1)
<select id="testTitleDrop">
<option value="1">Tea</option>
<option value="2">Coffee</option>
<option value="3">Chocolate</option>
<option value="4">IceTea</option>
</select>
using a bit of jQuery:
$(document).ready(function () {
$('#testTitleDrop').find("option:[title='']").each(function () {
$(this).attr("title",$(this).text());
});
})
2).
/* For Asp DropDown (Dropdownlist) Populating values from database!*/
<asp:DropDownList runat="server"
DataSourceID="SqlDataSource1"
AutoPostBack="true"
ToolTip=""
DataTextField="SectionName"
DataValueField="SectionID"
ID="DropPlaceofInsert"
AppendDataBoundItems="true" onselectedindexchanged="DropPlaceofInsert_SelectedIndexChanged" >
<asp:ListItem Text="" Value="-1" Selected="True" />
</asp:DropDownList>
<%--DataSource --%>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:RegistryConnectionString %>"
SelectCommand="SELECT * FROM [Section] where rtrim(ltrim(sectionname)) <> '' ORDER BY [SectionName]">
</asp:SqlDataSource>
Another method to bind Tooltip from another Js function instead on page load
....just call
addToolTipToDropDown($('#DropPlaceofInsert'));
...
function addToolTipToDropDown(el)
{
$(el).find("option:[title='']").each(function () {
$(this).attr("title",$(this).text());
});
}
3)
Or even easier just add the following code and that's it !:
// Assign Tooltip value on click of dropdown list //
$(document).ready(function () {
try{
$('select').click(function (el) {
$(this).find("option:[title='']").each(function (el) {
$(this).attr("title",$(this).text());
})
});
}
catch(e)
{
alert(e);
}
-- Hope this helps save time to some developers !

Related

How to bind repeater in loop in c#

I have used repeater in asp.net
<div class="slider-inner">
<div id="daslider" runat="server" class="da-slider">
<asp:Repeater ID="rptSlider" runat="server">
<ItemTemplate>
<asp:Panel ID="sld" runat="server" class="da-slide">
<h2><asp:Literal ID="lblTitle" runat="server"></asp:Literal></h2>
<p>
<asp:Literal ID="lblDescription" runat="server"></asp:Literal>
</p>
<div class="da-img">
<iframe id="framevid" runat="server" visible="false" width="530" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<asp:Image ID="sldrimg" runat="server" CssClass="img-responsive"/>
</div>
</asp:Panel>
</ItemTemplate>
<FooterTemplate>
<asp:Panel ID="btnlinks" runat="server" class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</asp:Panel>
</FooterTemplate>
</asp:Repeater>
</div>
</div>
In CS File I want to bind them programically using loop as below lines of code
private void GetMainAppSettings()
{
MainSetting Item = context.FetchMainAppSettings();
SliderContext contextSlider = new SliderContext();
Slider SW = new Slider();
string PageName = "Home Page";
IEnumerable<_14Muslims.Domain.Entity.Slider> pType = contextSlider.SliderFetchAllEnabled(PageName);
foreach (Slider item in pType)
{
lblTitle.Text = item.SliderTitle;
lblDescription.Text = item.SliderDescription;
framevid.Attributes.Add("src", item.SliderImage);
sldr.Attributes.Add("src", item.SliderImage);
daslider.Style.Add("background-image", WebUtility.UrlSchemeAuthority() + #"/FileStore/AppSettingsSiteLogos/" + item.BackgroundImage);
}
}
Note that GetMainAppSettings() is called on page_load event
Please Help me !!!
There are two separate things that you need to do:
Set the source of the repeater
Tell the repeater what to do for each item in the source.
To achieve the first, you just need to set the DataSource property of the repeater to the collection of items you need displayed, and execute a DataBind call:
private void GetMainAppSettings()
{
MainSetting Item = context.FetchMainAppSettings();
SliderContext contextSlider = new SliderContext();
Slider SW = new Slider();
string PageName = "Home Page";
IEnumerable<_14Muslims.Domain.Entity.Slider> pType = contextSlider.SliderFetchAllEnabled(PageName);
rptSlider.DataSource(pType);
rptSlider.DataBind();
}
When this is done, the repeater will loop through each item, process it and, display whatever is needed. To customize this process, the repeated provides an ItemDataBound event where you can set how the template should look for a specific item:
protected void rptSlider_ItemDataBound(object sender, RepeaterItemEventArgs e) {
// This event is raised for the header, the footer, separators, and items.
// Execute the following logic for Items and Alternating Items.
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) {
//get the item from the event arguments
var item = (Slider)e.Item.DataItem;
//get the controls
var lblTitle = (Label)e.Item.FindControl("lblTitle");
var lblDescription= (Label)e.Item.FindControl("lblDescription");
var framevid= (HtmlGenericControl)e.Item.FindControl("framevid");
var sldr= (HtmlGenericControl)e.Item.FindControl("sldr");
//set the values
lblTitle.Text = item.SliderTitle;
lblDescription.Text = item.SliderDescription;
framevid.Attributes.Add("src", item.SliderImage);
sldr.Attributes.Add("src", item.SliderImage);
}
}
This will execute once for each item in the data source, and you have complete control over what goes where and how. The looping is done implicitly for you by the repeater itself.
No need to loop the data in your code behind, you can directly assign the DataSource and Repeater control will take care of rest.
In Code behind, you can programatically set the DataSource like this:-
rptSlider.DataSource = pType;
rptSlider.DataBind();
In your repeater control, you can put the Data Binder code nuggets to assign particular properties to control like this:-
<h2><asp:Literal ID="lblTitle" runat="server" Text='<%# SliderTitle%>'></asp:Literal></h2>
and so on..for other controls.
Why use loop for bind repeater? You can directly assign your object "pType" to repeater data source. Like
IEnumerable<_14Muslims.Domain.Entity.Slider> pType = contextSlider.SliderFetchAllEnabled(PageName);
rptSlider.DataSource=pType;
rptSlider.DataBind();
After you can access all your field in repeater on .aspx page.
More Details see below article:
http://www.c-sharpcorner.com/UploadFile/5089e0/how-to-use-repeater-control-in-Asp-Net/

JavaScript - Disabling Textbox upon Change of Drop Down List Index

I have the following code which suppoesedly disables or enables a textbox depending on the value in a drop down list.
Now this is how I am making a reference to this code from the drop down lists:
Unfortunately, the code is generating an exception. I believe that I am using the wrong event handler, that is, OnSelectedIndexChanged. How can I remedy the situation please?
1) replace OnSelectedIndexChanged with onchange
and
2) replace
var DropDown_Total = document.getElementById("DropDown_Total")
with
var DropDown_Total = document.getElementById("<%= DropDown_Total.ClientID %>")
for all getElementById
3) replace (DropDown_Date.options[DropDown_Date.selectedIndex].value
with
(DropDown_Date.options[DropDown_Date.selectedIndex].text for both dropdown
try this it's working
<script type="text/javascript">
function DisableEnable() {
var DropDown_Total = document.getElementById("<%= DropDown_Total.ClientID %>")
var Textbox_Total = document.getElementById("<%= Textbox_Total.ClientID %>")
var DropDown_Date = document.getElementById("<%= DropDown_Date.ClientID %>")
var Textbox_Date = document.getElementById("<%= Textbox_Date.ClientID %>")
if (DropDown_Total.options[DropDown_Total.selectedIndex].text == "Any Amount") {
Textbox_Total.disabled = true;
}
else {
Textbox_Total.disabled = false;
}
if (DropDown_Date.options[DropDown_Date.selectedIndex].text == "Any Date") {
Textbox_Date.disabled = true;
}
else {
Textbox_Date.disabled = false;
}
}
</script>
html
<asp:TextBox runat="server" ID="Textbox_Total" />
<asp:TextBox runat="server" ID="Textbox_Date" />
<asp:DropDownList ID="DropDown_Total" runat="server" onchange="DisableEnable();">
<asp:ListItem>Any Amount</asp:ListItem>
<asp:ListItem>Exact Amount</asp:ListItem>
<asp:ListItem>Below Amount</asp:ListItem>
<asp:ListItem>Above Amount</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="DropDown_Date" runat="server" onchange="DisableEnable();">
<asp:ListItem>Any Date</asp:ListItem>
<asp:ListItem>Exact Date</asp:ListItem>
<asp:ListItem>Before</asp:ListItem>
<asp:ListItem>After</asp:ListItem>
</asp:DropDownList>
Use onchange event which will work for javascript function calling. OnSelectedIndexChanged is server side event.
just replace OnSelectedIndexChanged with onchange because onchange is handled by js. OnSelectedIndexChanged is handled by code behind.
Tutorial: how to disable/enable textbox using DropDownList in Javascript
In this function we pass dropdownlist id and textbox id as parameter in js function
<script type="text/javascript">
function DisableEnableTxtbox(DropDown, txtbox) {
if (DropDown.options[DropDown.selectedIndex].text == "free") {
txtbox.disabled = true;
}
else {
txtbox.disabled = false;
}
}
</script>
Now add the following code:
<td align="center" class="line">
<asp:DropDownList ID="ddl_MonP1" runat="server" CssClass="ppup2" onchange="DisableEnableTxtbox(this,txt_MonP1);"></asp:DropDownList>
<asp:TextBox ID="txt_MonP1" runat="server" CssClass="ppup" placeholder="Subject"></asp:TextBox>
</td>

Yet another viewstate dropdownlist issue

I have the following code in the Page_Load method of a web form:
protected void Page_Load(object sender, EventArgs e)
{
CountrySelectButton.Click += new EventHandler(CountrySelectButton_Click);
if (HomePage.EnableCountrySelector) //always true in in this case
{
if(!IsPostBack)
BindCountrySelectorList();
}
}
The BindCountrySelectorList method looks like this:
private void BindCountrySelectorList()
{
NameValueCollection nvc = HttpUtility.ParseQueryString(HomePage.CountryList);
var ds = nvc.AllKeys.Select(k => new { Text = k, Value = nvc[k] });
CountrySelector.DataSource = ds;
CountrySelector.DataTextField = "Text";
CountrySelector.DataValueField = "Value";
CountrySelector.DataBind();
}
And I have a LinkButton click event handler which gets the SelectedValue from the SelectList as so:
void CountrySelectButton_Click(object sender, EventArgs e)
{
//get selected
string selectedMarket = CountrySelector.SelectedValue; //this is always the first item...
//set cookie
if (RememberSelection.Checked)
Response.Cookies.Add(new HttpCookie("blah_cookie", selectedMarket) { Expires = DateTime.MaxValue });
//redirect
Response.Redirect(selectedMarket, false);
}
EDIT:
This is the DDL and LinkButton definition:
<asp:DropDownList runat="server" ID="CountrySelector" />
<asp:LinkButton runat="server" ID="CountrySelectButton" Text="Go" />
Resulting markup:
<select name="CountrySelector" id="CountrySelector">
<option value="http://google.com">UK</option>
<option value="http://microsoft.com">US</option>
<option value="http://apple.com">FR</option>
</select>
<a id="CountrySelectButton" href="javascript:__doPostBack('CountrySelectButton','')">Go</a>
END EDIT
ViewState is enabled but the SelectedValue property only ever returns the first item in the list regardless of which item is actually selected. I'm certain I'm missing something obvious but I can't find the problem; any help is much appreciated.
Thanks in advance.
Dave
You are correct that your issue stems from the jquery ui dialog... you can get around this by using a hidden field to record the value of the dropdownlist. Then in your code, reference the hidden field.
Front end could look like:
<div id="myModal" style="display: none;">
<asp:DropDownList runat="server" ID="SelectList" />
<asp:LinkButton runat="server" ID="MyButton" Text="Go" />
</div>
<input type="hidden" id="countryVal" runat="server" />
<a id="choose" href="#">Choose</a>
<script type="text/javascript">
$(document).ready(function () {
$('#choose').click(function () {
$('#myModal').dialog({
});
return false;
});
$('#<%= SelectList.ClientID %>').change(function () {
var country = $(this).val();
$('#<%= countryVal.ClientID %>').val(country);
});
});
</script>
Then your code behind:
var selected = countryVal.Value;
Wrap the MyButton.Click+=... statement inside (!IsPostBack) like
if(!IsPostBack)
{
MyButton.Click += new EventHandler(MyButton_Click);
BindSelectList();
}

Managing Tab Click Event through jQuery and Repeater

I have a repeater which displays and data bind the source of tab links. Here is the code:
protected void rptTab_ItemBound(Object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
Item i = e.Item.DataItem as Item;
Link hlTabLink = e.Item.FindControl("hlTabLink") as Link;
hlTabLink.Target = Sitecore.Links.LinkManager.GetItemUrl(i);
hlTabLink.DataSource = i.Paths.FullPath;
hlTabLink.Field = "Title";
}
}
Now this is my markup:
<asp:Repeater ID="rptTab" runat="server" OnItemDataBound="rptTab_ItemBound">
<ItemTemplate>
<li id= "liTabTest" runat = "server">
<a>
<sc:Link ID = "hlTabLink" Field = "scTabLink" onclick = "TabClick()" runat ="server"></sc:Link>
</a>
</li>
</ItemTemplate>
</asp:Repeater>
And this is the jQuery which is adding CSS class dynamically based on which item is selected:
$(document).ready(function () {
init();
});
function init() {
$("ul#Tab-labels li").removeClass("tab-label TabbedPanelsTabSelected");
$("ul#Tab-labels li:first").addClass("tab-label TabbedPanelsTabSelected");
};
function TabClick() {
alert('test');
};
Now you can see that I am displaying the CSS file based on the index of the tab. I also have to add the click event in that jQuery. So there are basically two things that I am confused:
My click event in jQuery is not getting called :(
From jQuery I have to know in the click event that which page it has
to go through? So that I have to get from codebehind or what? Like a
hidden field and store the tab pages in that, then fetch out from
jQuery.
How should I resolve this? Please help!
For sc:Link, change the bind method to onClientClick for onclick = "TabClick()". OnClick is for the postback server method.
BTW, what is the sc prefix? Is there a user control you are adding to the page?

get value from textbox within repeater asp.net c#

I've been trying to get this working for a couple of hours now but nothing from google could help me fix the problem.
I have a very simple repeater control:
<asp:Panel ID="userDefDiv" Visible="false" runat="server">
<asp:Repeater ID="userDefRepeater" EnableViewstate="false" runat="server">
<ItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" EnableViewState="false"></asp:TextBox><br/>
</ItemTemplate>
</asp:Repeater>
</asp:Panel>
the userDefDiv panel is inside another panel, which is inside contentPLaceHolder.
the parent panel to userDefDiv does NOT have the "enableviewstate="false"".
So.
Everything on this page happens after a couple of linkbuttons_click. so nothing happens during page_load. And after i click another linkbutton i want to get the data from the different textboxes that is within the repeater.
C# code:
This is the code to create all the repeater items.
public void createUserDef()
{
DataTable userDefData;
userDefData = ..... (data from Database.)
userDefDiv.Visible = true;
userDefRepeater.DataSource = userDefData;
userDefRepeater.DataBind();
}
The code for the linkbutton:
protected void linkButton_Click(object sender, EventArgs e)
{
createUserDef();
Label2.Visible = true;
foreach (RepeaterItem item in userDefRepeater.Items)
{
TextBox box = (TextBox)item.FindControl("TextBox1");
string b = box.Text;
Label2.Text += b + " . ";
}
}
As you see i create the repeater once again during the click. But the only thing i can read in label2. is a a number of " .", on dot for each textbox.
but the text from the textbox is empty..
What am I doing wrong??
thanks for reading!
Mattias
SOLUTION:
add EnableVIewState="true" to textbox & repeater.
Dont call call dataBind() before you get the values.
Thanks!
You need to set EnableViewState to 'true' for linkbuttons to work properly in a repeater

Categories

Resources