I am using the example on the AJAX website for the DropDownExtender. I'm looking to make the target control (the label) have the DropDown image appear always, instead of just when I hover over it.
Is there any way to do this?
This can be done using the following script tag:
<script>
function pageLoad()
{
$find('TextBox1_DropDownExtender')._dropWrapperHoverBehavior_onhover();
$find('TextBox1_DropDownExtender').unhover = VisibleMe;
}
function VisibleMe()
{
$find('TextBox1_DropDownExtender')._dropWrapperHoverBehavior_onhover();
}
</script>
I found this and some other tips at this dot net curry example.
It works but I'd also consider writing a new control based on the drop down extender exposing a property to set the behaviour you want on or off.
Writing a new AJAX control isn't too hard, more fiddly than anything.
Related
My ASP .Net page has a repeater that is loaded from AJAX. This AJAX page repeater has a column of checkboxes. The repeater is inside a html table.
<input id="chkOptionSelected" runat="server" enableviewstate="false"
type="checkbox" data-bind="click: Add" />
On the main page, I have a label whose value is computed by a JavaScript function. My view model:
function VM() {
var self = this;
self.totalSqft = ko.observable(TotalSqFt);
self.Add = function () {
self.totalSqft(TotalSqFt);
return true;
};
}
ko.applyBindings(new VM());
TotalSqFt is a global variable. The label is:
<asp:Label ID="lblTotalSqFt" runat="server" ClientIDMode="Static" data-bind="text: totalSqft"></asp:Label>
The click event computes the new total in a javascript function. All the view model needs to do is update the label with the new value.
What am I doing wrong? Is it because the checkbox is inside of AJAX content? I can see it all in the view source.
like #Jeroen said, asp:Lable will processed by server and render differently at client side.
so instead you can use normal html label and use runat="server" if you want to access it at server
check this working demo http://jsfiddle.net/91mek1tk/
The direct cause of your issue is most likely that data-bind on an asp:Label is not rendered. You would need to call Attributes.Add or something similar to add it.
Having said that, you're mixing Webforms and client-side heavy tech like KnockoutJS in a way that will probably negate the advantages you'd get from using KO, or worse cause lots of inconvenient cases like the one you're having now. I suggest either moving away from asp controls to more html-oriented controls (like you did with the first input tag), or dropping KO in favor of other, simpler client side technology (which seems more appropriate anyways, since you're currently using KO merely to handle clicks, whereas it excels mostly at two-way data-binding tasks).
Try this for your javascript function:
function VM() {
var self = this;
self.totalSqft = ko.observable("totalSqft");
self.Add = function () {
self.totalSqft("totalSqft");
return true;
};
}
ko.applyBindings(new VM());
Thank you, JAG. I tweaked the demo and got it working. I had val instead of text for my label in one of the lines and hence was not seeing the reflected value. It's working now. Thanks, everyone.
is there any simple jquery script/plugin to apply bootstrap pagination style in asp.net gridview ? I've found some good tips about how to do this, like these links: here and here.
the only problem with these tips/solutions is we need to make a lot of changes to achieve the result and this is not preferable when you have large application and you want to transform it to bootstrap style. we need another solution. like a simple jquery script that can do the job without making lot changes to the current code.
I've made simple jquery script to apply the bootstrap pagination in asp.net gridview and I think it will be useful to share it here in stackoverflow.
source code of this script is hosted in github here.
usage is very simple:
-include the plugin js file in your asp.net page file:
<script type="text/javascript" src="js/bs.pagination.js"></script>
-set gridview property:
PagerStyle-CssClass="bs-pagination"
that's is all you need to apply bootstrap pagination style in asp.net gridview.
check my blog for more info.
Edit:
about the problem when using gridview inside UpdatePanel, the reason of this problem is because “UpdatePanel completely replaces the contents of the update panel on an update. This means that those events we subscribed to are no longer subscribed because there are new elements in that update panel.”
There is more than one solution to solve this problem:
Solution 1:
Use pageLoad() instead of $(document).ready. Modify the code like this:
function pageLoad() {
$('.bs-pagination td table').each(function (index, obj) {
convertToPagination(obj)
});
}
Solution2:
re-change the style after every update. We can do this by adding these lines to the bs.pagination.js file:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
$('.bs-pagination td table').each(function (index, obj) {
convertToPagination(obj)
});
});
I have a system and I had a problem today, when the user double-click on button control and the system process the operation twice.
I found a solution with this code on the button:
OnClientClick = "this.disabled = true; this.value = 'submiting ...';" UseSubmitBehavior = "false"
However, I have several pages in the system, with several buttons ... is there any way to set these attributes to all the buttons of the application?
Thank you!
What about using a clientSide approach by using JQuery and disabling all Submit controls (jsfiddle)
$(document).ready(function () {
$(' :submit').click(function (event) {
$(this).attr("disabled","true");
});
});
I am quite new to JQuery so if there are any better solutions or I am completly wrong, pls let me know!
I'm not sure, but it seems that it is possible through skin file.
You can create a custom button. Here you have example how to create button that displays confirm window on client click. Almost what you wan't.
http://dhavalupadhyaya.wordpress.com/2008/07/20/creating-custom-controls-in-asp-net/
Than you would have to change all the asp:Buttons on every page to someTag:YourButton. Maybe simple Find/Replace. But I think there is possibility to configure in web.config so that ASP.NET uses someTag:YourButton everytime it sees asp:Button. But can't find now how to do it.
Using .NET 3.5.
How do I programmtically expand/collapse the panes contained within a AJAX accordion control?
My page will have several accordions controls which I want to be able to mass expand/collapse with some buttons.
UPDATE1
My final code solution looks like this:
<script language="javascript">
function collapse_all(flag)
{
if(flag==true)
{
var behavior = $get("<%=Accordion1.ClientID%>").AccordionBehavior;
behavior.set_SelectedIndex(-1);
}
else
{
var behavior = $get("<%=Accordion1.ClientID%>").AccordionBehavior;
behavior.set_SelectedIndex(0);
}
}
</script>
you can find the accourdion control in javascript and call "set_SelectedIndex(-1)"
so (using jquery)
$("#<%=Accordion1.ClientID%>_AccordionExtender").set_SelectedIndex(-1)
if you have a few, you can either do them all discretly or use one of the jquery selectors to find them all, the accordions will have to have been set up to allow all panes to close i believe (RequireOpenedPane = false)
You can't expand them programmatically via you server-side code(VB.NET/C#) because the expansion of the panes is done in the client-side code(JavaScript). If I were you I'd suggest taking a look at the JQuery Libraries and using their show/hide functions to build a custom accordion control to do what you want. JQuery will seem less "WebForm-like" but you'll find it much more flexible than the AJAX Control Toolkit.
If you put the accordion control in an asp.net ajax update panel, you can collapse all panes easily via the codebehind setting the selected index to zero.
i have a dynamically created gridview button that fires off a modal popup when clicked. I do this onclientside like so:
function openModal(btnId, v) {
deptdata(v);
// __doPostBack('<%=DropDownList1.ClientID %>', '');
btn = document.getElementById(btnId);
btn.click();
}
function deptdata(v) {
document.getElementById('<%=vendor.ClientID%>').value = v;
}
This is how the function is called in the code.
btnedit.OnClientClick = String.Format("openModal('{0}','" & GridView1.Rows(i).Cells(0).Text & "');return false;", hidden.ClientID)
I set the value of a hidden field(Vendor) but I need that value for what's in the modal popup. I have a dropdown list that depends on that newly set variable. The variable is set depending on what row was clicked. So i need to somehow just reload that popup. I have an Update Panel but I can't get that Panel to reload. I've tried __doPostback and it didn't help. any ideas how to update the panel or the dropdown in the panel using javascript?
It's not very clear from your description and the limited code you provide what it is exactly that you are trying to do and what is failing. However, the following might give you some ideas. If you provide more detail and code someone might be able to give you a better answer.
ScriptManager1.RegisterAsyncPostBackControl(Button1);
to trigger an update panel post back from js make sure you use UniqueID, not ClientID, thats a common gotcha that prevents the async postback from working.
__doPostBack("<%=Button1.UniqueID %>", "");
Personally, I have all but given up on UpdatePanels, I only use them in the most trivial cases. I prefer to have my js call an ASP.Net JSON webservice and have the on completed function render any needed changes to the html. It's more flexible, lighter and infinitely faster for pages with large grids or a lot of controls.