We Keep Coding

How to Highlight a search text in a drop down list

I have a Textbox and a drop down list in my webpage. when I enter a text in TextBox and its TextChanged event is fired items containing that text are loaded into another dropdown list below.I had set dropdown state to Openloadondemand to true.
I need to highlight that search text inside the dropdown list items only, but I am unable to do so.
I have got codes from here and I tried to implement it in my page.
Codes are
Style.css
<style type="text/css">
.highlight
{
text-decoration:none; font-weight:bold;color:black; background:yellow;
}
cs code
protected void txtItemCode_TextChanged(object sender, EventArgs e)
{
//my code
ddl_ItemName.OpenDropDownOnLoad = true;
HighlightText(itemtext);
}
public string HighlightText(string InputTxt)
{
Regex RegExp = new Regex(InputTxt.Replace(" ", "|").Trim(), RegexOptions.IgnoreCase);
return RegExp.Replace(InputTxt, new MatchEvaluator(ReplaceKeyWords));
}
public string ReplaceKeyWords(Match m)
{
return ("<span class=highlight>" + m.Value + "</span>");
}
My Design is
<table>
<tr>
<td class="label">Item Code : </td>
<td style="width: 180px;" class="field">
<telerik:RadTextBox ID="txtItemCode" AutoPostBack="true" runat="server"
ontextchanged="txtItemCode_TextChanged" >
</telerik:RadTextBox>
</td>
</tr>
<tr>
<td class="label">Item Name : </td>
<td class="field">
<telerik:RadComboBox ID="ddl_ItemName" AutoPostBack="true" runat="server"
EmptyMessage="Choose an Item"
EnableLoadOnDemand="True" MarkFirstMatch="true"
onselectedindexchanged="ddl_ItemName_SelectedIndexChanged" >
</telerik:RadComboBox>
</td>
</tr>
</table>

If my understanding is correct, you are trying to implement an auto-complete text field which shows a user a dropdown of options to choose from. The keyword query that a user entered is always bolded in every list item in the dropdown.
On the basis of the above understanding, what you really want is to ensure that your dropdown of auto-complete options wraps a span or any HTML element around the keyword that a user has entered in the text field.
See the following example:
HTML (The unordered list below is dynamically generated by JavaScripted on TextChanged)
<input type="text" value="Something">
<ul id="auto-complete">
<li>
<span>Something</span> Borrowed
</li>
<li>
There's <span>something</span> about Mary
</li>
<li>
<span>Something</span>'s Gotta Give
</li>
</ul>
CSS
#auto-complete li span {
font-weight: bold;
}
Check the following JSFiddle to see the styling in action: http://jsfiddle.net/hadynz/AE7TE/

return value to parent page from modal pop up extender

<asp:Button ID="btnCheckPatientID" CssClass="cssbutton" runat="server" Text="Check"
OnClick="btnCheckPatientID_Click" />
<asp:ModalPopupExtender ID="btnCheckPatientID_ModalPopupExtender" runat="server"
PopupControlID="panelCheckPatient" TargetControlID="hiddenTargetControlForModalPopup"
BackgroundCssClass="modalbackground" CancelControlID="btnClose">
</asp:ModalPopupExtender>
<asp:Button runat="server" ID="hiddenTargetControlForModalPopup" Style="display: none" />
<div id="panelCheckPatient" class="modalpopup" style="display: none">
<iframe id="iframeCheckPatient" class="csstable" runat="server" width="550px" height="485px" scrolling="auto">
</iframe>
<table>
<tr>
<td align="right">
<asp:Button ID="btnClose" runat="server" CssClass="cssbutton" Text="Close" />
</td>
</tr>
</table>
</div>
Serve Code
protected void btnCheckPatientID_Click(object sender, EventArgs e)
{
iframeCheckPatient.Attributes["src"] = "Check_Patient.aspx?patientID=" + txtPatientID.Text.Trim();
btnCheckPatientID_ModalPopupExtender.Show();
}
I have open an Ajax Modal popup on click of btnCheckPatientID.
In Modal Popup load an iframe which contains Check_Patient.aspx page.All working correctly.
In Check_Patient.aspx there is Pass button.
On click of button i have to return some value to parent page.
What should i do.
Search on google but cant find any help

You can use button postbackurl property where you need to specify your parent page address and on the parent page use the following code:
let say you have a textbox on your popup, you can use the same as folows
TextBox txtnew=(TextBox)PreviousPage.FindControl("id or name of control");
and then use its value OR create a property on popup page like
public string popupdata
{
get; set;
}
popupdata=your poppage value;
now access the same on parent page using
string str=PreviousPage.popupData.Tostring();
OR you can use cookies or session as your other options.

asp:Image does not show the image

I have this code. This code is a part of my menu items:
<li class="" id="fifth-li">
<ul style="visibility: hidden; display: none;" id="fifth-ul">
<li><asp:HyperLink ID="hpl_undergraduate" runat="server"></asp:HyperLink></li>
<li><asp:HyperLink ID="hpl_graduate" runat="server"></asp:HyperLink></li>
</ul>
<asp:HyperLink ID="hpl_lessons" runat="server">
<asp:Image ID="img_lessons" runat="server" />
<strong></strong>
<em id="em_lessons" runat="server"></em>
</asp:HyperLink>
</li>
And this is a part of my .cs code file:
em_lessons.InnerHtml = lang["MENU_LESSONS"];
hpl_lessons.Text = lang["MENU_LESSONS"];
hpl_undergraduate.Text = lang["MENU_UNDERGRADUATE"];
hpl_graduate.Text = lang["MENU_GRADUATE"];
hpl_lessons.NavigateUrl = "lessons.html";
hpl_undergraduate.NavigateUrl = "lessons-801.html";
hpl_graduate.NavigateUrl = "lesson-802.html";
img_lessons.ImageUrl = "images/lessons.png"; //Here the image url is defined.
This code is for my web page's menu. There are a few more items like this. I add an image to the img_lessons object on the codebehind. But after running the page I get this code:
<li class="" id="fifth-li">
<ul style="visibility: hidden; display: none;" id="fifth-ul">
<li>
<a id="MainContent_hpl_undergraduate" href="lesson-801.html">
Undergraduate
</a>
</li>
<li>
<a id="MainContent_hpl_graduate" href="lesson-802.html">
Graduate
</a>
</li>
</ul>
<a id="MainContent_hpl_lessons" href="lessons.html">
Lessons
</a>
</li>
I was thinking that if I pull out img_lessons between <asp:HyperLink></asp:HyperLink>, the image would have been shown. But no way. I have changed the codes a bit to be cleaner.
The point is not about the image path, is about some programmatic incompetence/inconvenience. Because I do not see a <img id="MainContent_img_lessons" ... /> code on the browser's code view.
As you can see my image does not look. What do you think?
Regards.

When you do this:
hpl_lessons.Text = lang["MENU_LESSONS"];
you are wiping out any and all markup from the inside of the hyperlink.
EDIT: Since it looks like you already have a <em> tag that you have made a server tag, this line:
em_lessons.InnerHtml = lang["MENU_LESSONS"];
should already be setting viewable text, so, really, you should only have to remove the line mentioned above.

You are clearing the hyperlink innerHTML when you are setting the .Text to lang["MENU_LESSONS"]
What you would need to do is change your markup as follows:
<asp:HyperLink ID="hpl_lessons" runat="server">
<asp:Image ID="img_lessons" runat="server" />
<strong><asp:Literal ID="lit_lessons"/></strong>
<em id="em_lessons" runat="server"></em>
</asp:HyperLink>
And then change your code so that it reads
lit_lessons.Text = lang["MENU_LESSONS"];

How can i make a div as non selectable from code behind

I have my div as follows
<div class="menu" id="admindiv" runat="server">
<ul>
<li>welcome to my site<!--[if IE 7]><!--><!--<![endif]-->
<table>
<tr>
<td>
<ul>
<li>Reports</li>
<li>Delete</li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<!--[if lte IE 6]></a><![endif]-->
</ul>
</div>
I would like to enable or disable on a page from code behind, means i would like to make this div as non selectable field on certain conditions. I tried this but i didn't get succeeded
protected void Page_Load(object sender, EventArgs e)
{
admindiv.Attributes.Add("style", "color:gray;");
admindiv.Attributes.Add("disabled", "true");
}

You can't make a DIV non-selectable. If you want to make the links non-clickable, this is the code-snipt does it:
<div class="menu" id="admindiv">
<ul>
<li>welcome to my site<!--[if IE 7]><!--><!--<![endif]-->
<table>
<tr>
<td>
<ul>
<li>
<asp:HyperLink ID="Link1" runat="server" Text="Reports" />
</li>
<li>
<asp:HyperLink ID="Link2" runat="server" Text="Delete" />
</li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<!--[if lte IE 6]></a><![endif]-->
</ul>
</div>
AND the code-behind:
protected void Page_Load(object sender, EventArgs e) {
if(isAdmin) { // check for admin user
Link1.NavigateUrl = "Reports.aspx";
Link1.NavigateUr2 = "Delete.aspx";
} else {
Link1.NavigateUrl = "javascript:return void;";
Link1.NavigateUr2 = "javascript:return void;";
}
}

Divs can be shown and hidden, but not disabled. If the div is visible its contents will be active unless you disable each item individually.
Another option to disabling each control is to create a new div that is transparent but sits on top of the part you want to disable, then just show / hide that div from the code behind.
However this is not a security mechanism, as anyone with a browser HTML developer plug-in (like firebug) can remove that div and gain access to the controls.
The best way to disable links in ASP.NET is to add an "onclick" event (works with linkbuttons and hyperlinks):
LinkButton1.Attributes["OnClick"] = “return false;”;

How to use getElementId for tag in an asp:Repeater

I have a div inside an asp:Repeater:
<ItemTemplate>
<div id="myDiv" style="display:none" />
</ItemTemplate>
</asp:Repeater>
<script type="text/javascript">
window.onload = function() {
document.getElementById('myDiv').style.display = 'block';
</script>
This works great except my div elements occur within a repeater which means only the first div is found. Could some please explain to me how to get all the divs in the ItemTemplate?

It is invalid to use the same id more than once on a page. Instead you'll have to use some other means of finding your elements, such as css class. jQuery makes this task easy.
$(".someClass").show();
However, you may not even need to do that. If all you are trying to do is change some styles on a set of elements under a common parent, you can just change the class name of the parent. Consider the following repeater:
<div id="repeaterParent">
<asp:Repeater runat="server">
<ItemTemplate>
<div class="repeaterItemDiv"></div>
</ItemTemplate>
</asp:Repeater>
</div>
Set up your css like this:
#repeaterParent .repeaterItemDiv
{
display: none;
}
#repeaterParent.showDivs .repeaterItemDiv
{
display: block;
}
Then use this JavaScript:
document.getElementById("repeaterParent").className = "showDivs";
Or, this jQuery:
$("#repeaterItemParent").addClass("showDivs");

You can't have multiple elements with the same ID value on the page. Use classes instead:
<ItemTemplate>
<div class="myDiv" style="display:none" />
</ItemTemplate>
Selecting the DIVs:
document.getElementsByClassName('myDiv')
// or
document.querySelectorAll('.myDiv')
// or
$('.myDiv') // jQuery

If you want to do this in javascript, you can do something like the following:
<div id="repeaterParent">
<asp:Repeater runat="server">
<ItemTemplate>
<div id="myDiv" style="display:none" runat="server"/>
</ItemTemplate>
</asp:Repeater>
</div>
<script type="text/javascript">
window.onload = function(){
//get the parent element
var ParentEle=document.getElementById('repeaterParent');
//get all the div tags within parent element
var AllDivInParentEle=ParentEle.getElementsByTagname('DIV');
//loop div elements and do what is required
for(var i=AllDivInParentEle.length-1;i>=0;i--){
AllDivInParentEle[i].style.display = 'block';
}
}
</script>
Using runat="server" for the div will give it its own id.
But if the div does not need to have an id, the javascript method will still work as it relies on the parent elements id.
So you could replace
<div id="myDiv" style="display:none" runat="server"/>
with
<div style="display:none">