I have a GridView with a Textbox and when the user changes the text within that box, I want them to be able to hit the enter button and postback and update the changes they made within that textbox on the row in the GridView.
I can't figure out how to do this?
Thanks,
Mark
You need to use some JavaScript code to do that - its on the page part. Here is one that I use (jQuery)
$(document).ready(function(){
// capture the editors
var AllEditors = jQuery('#<%= gvGridViewID.ClientID %> :input[type=text]');
AllEditors.keydown(function (e) {
if (e.keyCode == 13)
{
e.preventDefault();
// the [value=Update] is the default value to Update control of GridView
jQuery(this).parents("tr").find("input[value=Update]").click();
}
});
});
If you have it inside UpdatePanel, you need to initialize it each time the UpatePanel fires. If you have it inside a custom control, you need to add extra variables on the function names to avoid conflicts.
Related
I have used GM's datepicker control inside update panel.Inside update panel one more control(dropdownlist) is there.Onpageload everything is working properly.After Onselectedindexchange of dropdownlist,user can select datepicker's value.It is not working.How to handle this?
// update panel
// datepicker
// dropdownlist
// close updatepanel
You have to unbind/bind your datepicker to your TextBox every time the page (re-)loads. I don't know how your timepicker works, but with jQueryUI's you can use something like that (js):
function pageLoad() {
$("#myTextBox").unbind();
$("#myTextBox").datepicker();
}
Your textbox should use ClientIDMode="Static" for that.
I have a textbox1 and button1 and panel1 (which is used as a popup control)
i want if textbox1.text="show" then modalpopup control whose id is panel1 will be visible on buttonclick event other wise .... modal popup control panel1 will not be shown ...
how to do this ? using vb.net ?
Use Javascript's getElementById method to determine if the text has that specific value and then call showPopup() if you want to.
function showPopup() {
var modalPopupBehavior = $find('programmaticModalPopupBehavior');
modalPopupBehavior.show();
}
function hidepopup() {
var modalPopupBehavior = $find('programmaticModalPopupBehavior');
modalPopupBehavior.hide();
}
I know you stated, you want to do this in vb.net, but then you're at server-side and it is far easier to deal with this on client-side if you don't have something not to.
Here's how you do in code-behind. Add this to your button click event:
If TextBox1.Text = "something" Then
ModalPopupExtender1.Show()
Else
ModalPopupExtender1.Hide()
End If
I am trying to assign the Enter key to a button inside of a gridview. Does anyone know how this can be accomplished? Thank you.
You can give the button an id on one of the rendering events of the GridView, and then with jQuery bind the keypress() to a main div that wraps your site, and have it simulate the click() event on the button in your gridview when the 'enter' key (keyCode 13) was detected.
Like this :
$(document).ready(function() {
$('#mainDivWrapperId').keypress(function(event) {
if (event.keyCode == '13') {
$('#buttonId').click();
}
});
});
Edited Addition :
If you have a button in a gridview, then you just need to catch the 'enter' key press event like I've shown above, and then you can have it trigger the 'click' event of your button.
Like this :
$(document).ready(function() {
$('#mainDivWrapperId').keypress(function(event) {
if (event.keyCode == '13') {
$('#buttonId').trigger('click');
}
});
});
actually to make it simple,
1st declare the button on click event handler.
2nd declare a on keydown/keypress event handler for grid view.
inside the gridview's keypress/keydown event handler, check for keycode 13 from the event argument.
if the event.keycode==13, do button.click().
what ever logic inside the button's click event handler will be processed.
I need to capture the 'Update' click event with jQuery in an asp.net GridView and have no way of knowing where to start. I'm still rather new to jQuery. My GridView is attached to a SQLDataSource and, naturally, has all the bells and whistles that that combination affords. Any help would be greatly appreciated.
Simply add the script block anywhere after the GridView is declared and it should work with the default non-templated GridView column. No code in the codebehind as it is purely a Javascript solution.
Use this if you are using a Link-type GridView column:
<script type="text/javascript">
// a:contains(The text of the link here)
$('#<%= theGridViewID.ClientID %> a:contains(Update)').click(function () {
alert('Update click event captured from the link!');
// return false: stop the postback from happening
// return true or don't return anything: continue with the postback
});
</script>
Use this if you are using a Button-type GridView column and you don't want your Javascript to block the postback:
<script type="text/javascript">
// :button[value=The text of the button here]
$('#<%= theGridViewID.ClientID %> :button[value=Update]').click(function () {
alert('Update click event captured from the button!');
});
</script>
Use this if you are using a Button-type GridView column and you want to have control whether to continue with the postback or not:
<script type="text/javascript">
// :button[value=The text of the button here]
var updateButtons = $('#<%= theGridViewID.ClientID %> :button[value=Update]');
updateButtons
.attr('onclick', null)
.click(function () {
alert('Update click event captured from the button!');
var doPostBack = true; // decide whether to do postback or not
if (doPostBack) {
var index = updateButtons.index($(this));
// 'Update$' refers to the GridView command name + dollar sign
__doPostBack('<%= theGridViewID.UniqueID %>', 'Update$' + index);
}
});
</script>
Update: I think this would be a better solution in replacement of the last (3rd) script block I presented above, since you won't need to update the __doPostBack function call manually based on the command name, and as such, it should be less error-prone:
<script type="text/javascript">
// :button[value=The text of the button here]
var updateButtons = $('#<%= theGridViewID.ClientID %> :button[value=Update]');
updateButtons.each(function () {
var onclick = $(this).attr('onclick');
$(this).attr('onclick', null).click(function () {
alert('Update click event captured from the button!');
var doPostBack = true; // decide whether to do postback or not
if (doPostBack) {
onclick();
}
});
});
</script>
Credit to Aristos for this idea. :)
Ok here is my solution to capture only one update (or more) from a button.
This is the javascript code that I run on update click
<script type="text/javascript">
function NowRunTheUpdate(){
alert("ok I capture you");
}
</script>
and here is the page code
`<asp:GridView ID="MyGridView" runat="server" OnRowDataBound="MyGridView_RowDataBound" ... >`
<asp:ButtonField Text="update" CommandName="Update" ButtonType="Button" />
...
Here is the code thats run behind and set the javascript.
protected void MyGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
// loop all data rows
foreach (DataControlFieldCell cell in e.Row.Cells)
{
// check all cells in one row
foreach (Control control in cell.Controls)
{
// I go to get the button if exist
Button button = control as Button;
if (button != null && button.CommandName == "Update")
// Add delete confirmation
button.OnClientClick = "NowRunTheUpdate();";
}
}
}
}
You need to attach a client-side event listener to the click event of the Update [link]button. I don't think it can be done using AutoGenerateEditButton="true" if you are doing it that way. You'll need to use a TemplateField so that you can manipulate the button. Then you can use jQuery to bind to the click event of the button.
Add the update column to the column templates. Convert it to a custom column, and modify it in such a way you can hook to it with jquery i.e. like adding a css class to it.
Gridview is nothing but a table with a bunch of "tr" and "td". If you understand that concept then it would be easy for you to handle anything at client side. If you have enabled auto everything then it will be a link which would result for Edit, Delete, Update or Cancel (Check View Source). The code given below should capture the update click event:
$("a:contains(Update)").live("click", function() {
//alert("hi"); do what needs to be done
return false;//would not sent the control back to server
});
HTH
A TextBox is set to AutoPostback as changing the value should cause a number of (display-only) fields to be recalculated and displayed.
That works fine.
However, when the field is tabbed out of, the focus briefly moves on to the next field, then disappears when the page is redrawn so there is no focus anywhere.
I want the focus to be on the new field, not the textbox I've just changed.
Is there a way to work out which field had the focus and force it to have it again when the page is redrawn?
This is "by design". If you are using ASP.NET 2.0+ you can try calling the Focus method of your TextBox once the postback occurs (preferably in the TextChanged event of the TextBox).
I am not sure if there is any built-in way to track focus but I found this article in CodeProject which should do the trick.
You could also consider refresh display-only fields using AJAX UpdatePanel. This way you won't lose focus from the new field.
Also I have proposed pure server-side solution based on WebControl.Controls.TabIndex analysis, you can use it, if you like.
This is what is happening:
1) TAB on a field - client event
2) Focus on next field - client event
3) Postback - server event
4) Page redrawn - client event new page overrides preious client events
The solution of your problem is to:
a) get the element that has gained focus BEFORE postback
<script>
var idSelected;
$("input").focusin(function () {
idSelected = this.id;
});
</script>
b) store the ClientID (actually in var idSelected) somewhere (i.e. an hidden Textbox, vith ViewState = true) BEFORE postback
** b) get ClientID ** (extract from hidden TextBox and put it in var idSelected) AFTER postback
d) get the element with ClientID and set focus AFTER postback
<script>
$(document).ready(function () {
if (idSelected != null) {
$("#" + idSelected).focus();
idSelected = null;
});
});
</script>
Note: this sample scripts use JQuery.
Remember to put Jquery.js in your solution and a reference in your page
<form id="form1" runat="server" enctype="multipart/form-data" method="post">
<asp:ScriptManager runat="server" >
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery.js" ScriptMode="Auto" />
....
Note2: this solution works without AJAX.
Look at this answer: to make Javascript work over Ajax you must use code like this:
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
function EndRequestHandler(sender, args)
{
MyScript();
}
</script>