We Keep Coding

Using Select2 to make asp:dropdownlist searchable in a popup

I have a asp:DropDownList that needs to have a search bar for the user to search through the dropdown.
If I remove the line 'dropdownParent: $("#ModalPanelCard")' the dropdown displays and I can search on it, but it appears to be behind the modal. Once I reference the dropdownParent, I can't even select the dropdown - almost like it isn't calling the select2. Am I referencing the incorrect parent?
Frontend Code
<asp:Panel runat="server" ID="ModalPanelCard">
<div class="col-lg-6">
<asp:DropDownList ID="selCustomerCard" runat="server"></asp:DropDownList>
</div>
</asp:Panel>
Script
<script>
$('#<%= selCustomerCard.ClientID %>').select2({
dropdownParent: $("#ModalPanelCard")
});
</script>

Try the following:
<script>
$('#<%= selCustomerCard.ClientID %>').select2({
dropdownParent: $("#<%= ModalPanelCard.ClientID %>")
});
</script>
Just making sure the ID is right from ASP. ASP can add extra text to your HTML id, which is why we need to make sure it's the same ID.

The server tag is not well formed.(databinder.eval)

I am trying to working the following code.
<asp:DataGrid ID="Grid" runat="server" DataKeyField="KeyID" CssClass="grid"
...
<asp:CheckBox runat="server" ID="checkBox-<%#DataBinder.Eval(Container.DataItem,"KeyID")%>" AutoPostBack="false"></asp:CheckBox>
When I run the code,I have got the below error:
Error 25 The server tag is not well formed.
Note : This is working without runat="server".
What is the remedy for this problem ?

You don't need to set the ID of the CheckBox to do what you want to do (change the background color). Your CheckBox should look like this (I added the KeyID as the text value if you want to display it... or you can just remove that if you only want the checkbox):
<asp:CheckBox runat="server" ID="checkbox" Text='<%# Eval("KeyID") %>' AutoPostBack="false"></asp:CheckBox>
Now your checkbox will render something like this:
<input id="MainContent_Grid_checkbox_0" type="checkbox" name="ctl00$MainContent$Grid$ctl02$checkbox" /><label for="MainContent_Grid_checkbox_0">Value of KeyID</label>
Since all the names end with "checkbox", you can apply a function on the change event for those elements whose name ends with "checkbox". You didn't specify that this was a JavaScript question or if you are using jQuery... this answer uses jQuery:
<script>
$('input[name$="checkbox"]').change(function () {
if ($(this).is(':checked')) {
$(this).parent().css('background-color', 'yellow');
}
else {
$(this).parent().css('background-color', 'white');
}
});
</script>
That will determine if the checkbox is checked, and if so it will set the background-color of its parent (the <td> that it is in, inside the DataGrid rendered HTML), depending on the value.
Likewise, you can go up to the next parent() and highlight the entire row.
Resources:
jQuery Selectors
OnCheckedChanged -- an event that you would process in the code behind, not in JavaScript.

ASP.NET AJAX ColorPickerExtender client side works fine, codebehind color empty

I have unusual problem with AJAX toolkit ColorPickerExtender. Javascript code works fine it changes backgound color of extended textbox to picked color and text to picked color code also, but when I try to grab text of that Extended textBox from codebehind it return like it returns initial Text Value like javascript didn't change it. Since this same code works on my other application I suspect that the problem is that I put ColorPickerExtender in UpdatePanel and then in User Control.Here is the code:
User Control Code where ColorPickerExtender is:
<script language="javascript" type="text/javascript">
function colorChanged(sender) {
sender.get_element().style.backgroundColor = "#" + sender.get_selectedColor();
sender.get_element().style.color = "#" + sender.get_selectedColor();
sender.get_element().value = "0x" + sender.get_selectedColor();
}
</script>
...
...
<asp:TextBox ID="ColorTextBox" runat="server" ReadOnly="True" BackColor="Black" Text="" >0x000000</asp:TextBox>
<asp:ColorPickerExtender ID="ColorTextBox_ColorPickerExtender" runat="server" Enabled="True" TargetControlID="ColorTextBox" OnClientColorSelectionChanged="colorChanged" PopupButtonID="PickColorButton">
</asp:ColorPickerExtender>
<asp:Button ID="PickColorButton" runat="server" Text="Pick Color" />
Page Code (Upper user control is wrapped in Panel and than update panel):
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="PostNewThoughtButton1" PopupControlID="pnlThoghtPopup" BackgroundCssClass="modalBackground" DropShadow="false" />
...
<asp:Panel ID="pnlThoghtPopup" runat="server" Style="display:none;">
<asp:UpdatePanel ID="pnlUpdate" runat="server">
<ContentTemplate>
<My:NewThoughtPopup ID="NewThoughtPopup1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
So when I try to call this in codebehind:
string color = ColorTextBox.Text;
color always returns inital value of: 0x000000 altought everything seems fine from client side ColorTextBox text gets updated and it's color changed,nothing happens on server side, do I have to call postback before trying to get string color? Note: same code works fine without update panel and when not using it on user control

I had a similar problem - it's because the TextBox is set to ReadOnly="True"
you can use a HiddenField additionally to your TextBox
<asp:HiddenField ID="HiddenFieldColorText" runat=server />
and in javascript just set the value of the HiddenField with
document.getElementById('<%=HiddenFieldColorText.ClientID %>').value = yourColorString;
because you set the value of the HiddenField in Javascript and you want this value again on PostPack you need to set it again on Page_Load with
HiddenFieldColorText.Value = Request.Params[HiddenFieldColorText.UniqueID];

get asp:textbox value in client side using javascript function doesn't work

This code doesn't display the value, I don't know why?
I have server control:
<asp:TextBox ID="txtTest" runat="server" Visible="false" TextMode="MultiLine"
Rows="3" Columns="23" CssClass="white-scroll" />
in javascript function:
var eventText = document.getElementById('<%=txtTest.ClientID%>').value;
alert (eventText);
I enter text then click on button that call the javascript function, but the alert box doesn't display the entered text.
EDIT: when I initialize the text with Text="some text", it is displayed in alert, I want to enter text in client side and get the value of it in the Javascript function.
Thanks

Using label or textbox visible set false so it can access the value in JavaScript
Sol
1)
Make a div and set style="display:none;" so label is not display at UI(browser) but value can access in JavaScript.

This is because you server Control is called "txtTest" not "txtEventDescription"
change your javascript function to :
var eventText = document.getElementById('<%=txtTest.ClientID%>').value;
alert (eventText);
EDIT: ok, I see you've now changed the post to show the code and renamed the js control, so above is no longer relevant (for those who are confused by my answer) :-)
The problem is the Visible="false" - this control will not render into the client and will therefore not be accessible via javascript (as the HTML element does not exist client side)
So, hide the element using CSS and then call alert on it. Sample snippet
CSS
.hide-element {
display: none;
}
HTML Markup
<asp:TextBox ID="txtTest" runat="server"
Columns="23"
CssClass="white-scroll hide-element"
Rows="3"
TextMode="MultiLine"/>
JavaScript
var eventText = document.getElementById('<%=txtTest.ClientID%>').value;
alert (eventText);
This way you will definitely get an alert.
You alert is empty because you have not set the property Text for your asp:Textbox

Make it Visible="true" to your textbox and than test.
<asp:TextBox ID="txtTest" runat="server" TextMode="MultiLine"
Rows="3" Columns="23" CssClass="white-scroll" />

if "txtTest" textbox has visible="false" in that case its not render on html code on client machine and if it hasn't on client's html code then how javascript calls this textbox. Because when javascript search this textbox by its id it doesn't find and it gives an error.

you can assign any other custom attribute to the control i.e.
<asp:TextBox ID="txtTest" runat="server" Visible="false" TextMode="MultiLine"
Rows="3" Columns="23" CssClass="white-scroll"
clientID="myClientID" />
and then access control using jquery like
var txtVal = $('textbox[clientID=myClientID]').val();
hope it helps.

Setting focus on top of the page on click of asp.net link button

I've a asp.net datagrid which shows customer order details.
Pagination at the bottom of the grid is done using datalist and asp.net Linkbutton controls.
Here is the code:
<asp:DataList ID="DataList2" runat="server" CellPadding="1" CellSpacing="1"
OnItemCommand="DataList2_ItemCommand"
OnItemDataBound="DataList2_ItemDataBound" RepeatDirection="Horizontal">
<ItemTemplate>
<asp:LinkButton ID="lnkbtnPaging" runat="server"
CommandArgument='<%# Eval("PageIndex") %>'
CommandName="lnkbtnPaging"
Text='<%# Eval("PageText") %>' />
<asp:Label runat="server" ID="lblPageSeparator" Text=" | " name=></asp:Label>
</ItemTemplate>
</asp:DataList>
When the user clicks on any page number(ie.Link button), I need to set focus on top of the page.
How do i do this?
Thanks!

I think the default behaviour would be for the page scroll position to be set back to the top of the page. Is there anything else in your page that might be overriding this behaviour?
For example:
Is your DataList inside an UpdatePanel? In that case the current scroll position will be maintained over a (partial) post-back. You would therefore need to reset the scroll position to the top of the page yourself. One way to do this would be to implement a handler for the PageRequestManager's EndRequest client-side event which would set the scroll position - this thread explains how
Is the Page MaintainScrollPositionOnPostBack property set to true?

You could try setting a named anchor at the top of the page. Here is an article that explains it http://www.w3schools.com/HTML/html_links.asp

After an AJAX partial postback you may need to return to the top of your ASPX page to display an error message, etc. Here is one way that I have done it. You can add the JavaScript function below to your ASPX page and then call the method when needed in your code-behind by using the ScriptManager.RegisterClientScriptBlock method.
ASP.NET C# Code-behind:
ScriptManager.RegisterClientScriptBlock(this, Page.GetType(),
"ToTheTop", "ToTopOfPage();", true);
JavaScript:
<script type="text/javascript">
function ToTopOfPage(sender, args) {
setTimeout("window.scrollTo(0, 0)", 0);
}
You can also just JavaScript to scroll to the top of the page by using the OnClientClick property of your button. But this will cause this behavior to occur every time the button is clicked and not just when you want it to happen. For example:
<asp:Button id="bntTest" runat="server"
Text="Test" OnClick="btn_Test" OnClientClick="javascript:window.scrollTo(0,0);" />

<asp:LinkButton ID="lbGonder" runat="server" CssClass="IK-get" ValidationGroup="ik" OnClick="lbGonder_Click" OnClientClick="ddd();" title="Gönder">Gönder</asp:LinkButton>`
<script type="text/javascript">
var ddd = (function () {
$('body,html').animate({
scrollTop: 300
}, 1453);
return false;
});