Put focus back on a gridview's selected row after postback - asp.net

Is it possible to put focus back on a gridview row after that a selection of the row generates a postback?
I'm trying to add an onkeydown handler on the gridview rows in order to use the keyboard for navigation. My problem, I believe, is that after the first postback, the selected cell loses focus, and so the next key stroke is not caught by the cell.
I have the following code
The grid view
<asp:GridView runat="server" ID="gdvPersons" AutoGenerateColumns="false"
onrowcreated="gdvPersons_RowCreated" onselectedindexchanged="gdvPersons_SelectedIndexChanged">
<Columns>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<%# ((GridviewFocus.Person) Container.DataItem).Name %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Age">
<ItemTemplate>
<%# ((GridviewFocus.Person) Container.DataItem).Age %>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
The Code behind
protected void Page_Load(object sender, EventArgs e)
{
var persons = new List<Person> {new Person() {Name = "Fikre", Age = 24},
new Person() {Name = "Mike", Age = 29},
new Person() {Name = "Mark", Age = 35}};
gdvPersons.DataSource = persons;
gdvPersons.DataBind();
}
protected void gdvPersons_RowCreated(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
e.Row.Attributes.Add("onkeydown", ClientScript.GetPostBackEventReference((Control)sender, "Select$" + e.Row.DataItemIndex));
}
protected void gdvPersons_SelectedIndexChanged(object sender, EventArgs e)
{
gdvPersons.SelectedRow.Focus();
}

On your onkeydown script code copy the id of the cell to a hidden input field.
<input type="text" id="gridviewcell_id" onkeydown="lastcell.value = this.id" />
<input type="hidden" id="lastcell" runat="server" />
the example above is plain html, and you would have to add the proper onkeydown code to your gridview.
In your postback (for example onclick) event handler code you can retrieve the id from the hidden fields value property and register javascript to execute once the page is refreshed. If you have a button which is clicked which performs the postback you could do something like this:
protected void MyButton_Click(object sender, EventArgs e)
{
string id = lastcell.Value;
string script = "var ctrl = document.getElementById('" + lastcell.Value + "');";
script += "ctrl.focus();";
ClientScript.RegisterClientScriptBlock(this.GetType(),
"focusScript", script, true);
}
This should make your page execute the following script once it's loaded, and the control should retrive focus:
var ctrl = document.getElementById("yourid");
ctrl.focus();

Add MaintainScrollPositionOnPostBack="true" in the #Page directive in your .aspx file or add it to system.web/pages section in web.config
<system.web>
<pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID" maintainScrollPositionOnPostBack="true"/>
</system.web>
This works also when navigating to previous page with large table e.g.
When Web pages are posted back to the server, the user is returned to the top of the page. On long Web pages, this means that the user has to scroll the page back to the last position on the page.
Documentation

Related

Simultaneously deleting a file from a DataBase and a Folder using a LinkButton or Gridview_RowDeleting method

HELP! Is it achievable to use LinkButton or Gridview_RowDeleting method to simultaneously delete a file from a DataBase and from a Folder? Below is my code using a LinkButton:
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID = "lnkDelete" Text = "Delete" OnClientClick="return confirm('Are you sure you want to delete this record?');" CommandArgument = '<%# DataBinder.Eval(Container.DataItem,"ID") %>' runat = "server" OnClick = "DeleteFile" />
</ItemTemplate>
</asp:TemplateField>
Code Behind:
protected void grdProducts_RowEditing(object sender, GridViewEditEventArgs e)
{
//Get seleted row
GridViewRow row = grdProducts.Rows[e.NewEditIndex];
//Get Id of selected product
int rowId = Convert.ToInt32(row.Cells[1].Text);
//Redirect user to Manage Products along with the selected rowId
Response.Redirect("~/Pages/Management/ManageProducts.aspx?id=" + rowId);
}
protected void DeleteFile(object sender, EventArgs e)
{
string filePath = (sender as LinkButton).CommandArgument;
File.Delete(filePath);
Response.Redirect(Request.Url.AbsoluteUri);
}
PL: I have an existing gridview and a datasource for my table.
Thank you all for your contribution. I later got the answer to this. I will like to share it with all. Just enable OnRowDeleting in your Gridview properties then use the code behind below.
protected void grdProducts_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
Image oImg = grdProducts.Rows[e.RowIndex].FindControl("ImageFile") as Image;
if (oImg != null)
{
string sUrl = oImg.ImageUrl;
File.Delete(Server.MapPath(sUrl));
grdProducts.DataBind();
}
}
}
Finally: put this TemplateField on your aspx page.
<asp:TemplateField>
<ItemTemplate>
<asp:Image ID="ImageFile" runat="server" ImageUrl='<%# Bind("Image", "Images/Products/{0}")%>' AlternateText="Picture unavailable" style="width:50px; height:40px" />
</ItemTemplate>
</asp:TemplateField>

How to get the repeater-item in a Checkbox' CheckedChanged-event?

I have a CheckBox inside a Repeater. Like this:
<asp:Repeater ID="rptEvaluationInfo" runat="server">
<ItemTemplate>
<asp:Label runat="server" Id="lblCampCode" Text="<%#Eval("CampCode") %>"></asp:Label>
<asp:CheckBox runat="server" ID="cbCoaching" value="coaching-required" ClientIDMode="AutoID" AutoPostBack="True" OnCheckedChanged="cbCoaching_OnCheckedChanged" />
</ItemTemplate>
</asp:Repeater>
When some one clicks on the checkbox I want to get that entire row in my code behind. So if a CheckedChanged happens I want to get the Text of the Label lblCampCode in code behind.
Is it possible?
I have managed to write this much code.
protected void cbCoaching_OnCheckedChanged(object sender, EventArgs e)
{
CheckBox chk = (CheckBox)sender;
Repeater rpt = (Repeater)chk.Parent.Parent;
string CampCode = "";// here i want to get the value of CampCode in that row
}
So you want to get the RepeaterItem? You do that by casting the NamingContainer of the CheckBox(the sender argument). Then you're almost there, you need FindControl for the label:
protected void cbCoaching_OnCheckedChanged(object sender, EventArgs e)
{
CheckBox chk = (CheckBox)sender;
RepeaterItem item = (RepeaterItem) chk.NamingContainer;
Label lblCampCode = (Label) item.FindControl("lblCampCode");
string CampCode = lblCampCode.Text;// here i want to get the value of CampCode in that row
}
This has the big advantage over Parent.Parent-approaches that it works even if you add other container controls like Panel or Table.
By the way, this works the similar way for any databound web-control in ASP.NET (like GridView etc).

How do I get a reference to a telerik:GridTemplateColumn from a child control?

Simplified code from page:
<%# Page Language="C#" etc... %>
<%# Register src="~/controls/RequiredField.ascx" tagname="rf" tagprefix="custom" %>
<telerik:RadGrid runat="server">
<MasterTableView>
<Columns>
<telerik:GridTemplateColumn DataField="Name" HeaderText="Name" SortExpression="Name">
<ItemTemplate><%#Eval("Name")%></ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="NewName" runat="server" Text='<%#Bind("Name")%>'></asp:TextBox>
<custom:rf runat="server" />
</EditItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
In my control, I want to check if the parent is an EditItemTemplate and then set a property of the telerik:GridTemplateColumn. For example:
public partial class controls_RequiredField : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
if (this.Parent is Telerik.Web.UI.GridEditFormItem.EditFormTableCell)
{
// how do I get a reference to 'Telerik.Web.UI.GridTemplateColumn' (or any other object that lets me set the header text)
((Telerik.Web.UI.GridTemplateColumn)this.Parent.Parent).EditFormHeaderTextFormat = "{0}:" + RequiredText.Text;
RequiredText.Visible = false;
}
}
}
I don't have the telerik:RadGrid but it is pretty similar to the MS GridView, so I was able to test your issue using asp:GridView (both inherit from CompositeDataBoundControl Class (System.Web.UI.WebControls))
since your custom control is located in the EditItemTemplate your RequiredField control's Page_Load event will not fire until the RadGrid switches to edit mode so you should be able to drop the if (this.Parent is...) check as you'll know the grid is in edit mode.
So with the custom control's page load indicating the grid is in edit mode you can set the HeaderText of the GridTemplateColumn by doing something like:
if (typeof(DataControlFieldCell) == Parent.GetType())
{
((DataControlFieldCell)this.Parent).ContainingField.HeaderText = "Your Custom Heading"; // Or += if appending
}
Well this is the code I'm currently using that works:
protected void Page_Init(object sender, EventArgs e)
{
if (this.Parent is GridEditFormItem.EditFormTableCell)
{
GridEditFormItem.EditFormTableCell parentCell = (GridEditFormItem.EditFormTableCell)this.Parent;
string col = parentCell.ColumnName;
// ridiculous:
Control parentFormItem = this.Parent.Parent.Parent.Parent.Parent.Parent.Parent.Parent.Parent;
if (parentFormItem is GridItem)
{
GridItem gi = (GridItem)parentFormItem;
GridColumn parentColumn = gi.OwnerTableView.Columns.FindByUniqueNameSafe(col);
if (parentColumn != null)
{
parentColumn.EditFormHeaderTextFormat = "{0}:" + RequiredText.Text;
RequiredText.Visible = false;
}
}
}
}
But having to cycle up through all those .Parents makes me uneasy.

Why won't my LinkButton inside a GridView raise its OnClick event?

I have a LinkButton inside a GridView (via an TemplateField). No matter what I try, the LinkButton will not invoke its event handler. I have tried both:
A traditional event handler ("OnClick")
A OnRowCommand event handler at the GridView level.
In both cases, I've debugged and it doesn't even catch the event handler.
If I move the LinkButton out on the page (so it's not in the GridView), it works fine, so I know the syntax is right.
Here is the "traditional" method:
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton Text="Cancel" ID="DeleteButton" CausesValidation="false" OnClick="CancelThis" runat="server" />
</ItemTemplate>
<asp:TemplateField>
What's interesting is if I remove the "CancelThis" method from the code behind, it throws an error. So I know it's aware of its event handler, because it looks for it when it compiles.
Here is the RowCommand method:
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton Text="Cancel" ID="DeleteButton" CausesValidation="false" CommandName="CancelThis" runat="server" />
</ItemTemplate>
<asp:TemplateField>
In this case, the GridView has:
OnRowCommand="GridView_RowCommand"
It postsback, but never hints at raising the event.
Any idea what I'm missing here?
How are you binding your GridView? Are you using a datasource control? If you are binding manually during Page_Load, it's possible that since the grid is binding every round trip, the event handler isn't catching properly. If this is the case, you may want to try something like:
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
{
//do binding
}
}
Can you post sample binding code to go with your markup?
If you really want to force the issue, you could hook into the RowDataBound event on the Grid, find the button manually and add the handler in the code behind. Something like:
markup snippet:
<asp:GridView ID="gvTest" runat="server" OnRowDataBound="gvTest_RowDataBound" />
code behind:
protected void gvTest_RowDataBound(object sender, GridViewRowEventArgs e)
{
if(e.Row.RowType == DataControlRowType.DataRow)
{
//find button in this row
LinkButton button = e.Row.FindControl("DeleteButton") as button;
if(button != null)
{
button.Click += new EventHandler("DeleteButton_Click");
}
}
}
protected void DeleteButton_Click(object sender, EventArgs e)
{
LinkButton button = (LinkButton)sender;
// do as needed based on button.
}
I'm not sure what the purpose of the button is, but assuming it is a row delete button, you may not want to take this approach as in the event handler, you don't have direct access to the row in question, like you would using the RowCommand event.
Is there a reason you're using the Template field? Vs say a ButtonField? If you use a ButtonField, then you can hook into the RowCommand event.
markup snippet:
<asp:GridView ID="gvTest" runat="server" OnRowCommand="gvTest_RowCommand">
<columns>
<asp:buttonfield buttontype="Link" commandname="Delete" text="Delete"/>
....
</columns>
</asp:GridView>
code behind:
protected void gvTest_RowCommand(object sender, GridViewCommandEventArgs e)
{
if(e.CommandName == "Delete")
{
//take action as needed on this row, for example
int rowIndex = Convert.ToInt32(e.CommandArgument);
GridViewRow currentRow = (sender as GridView).Rows[rowIndex];
//do something against the row...
}
}
You might want to consult MSDN docs on some of these topics:
RowCommandEvent
ButtonField class
EDIT:
To answer your question on the ButtonField - yes I don't see why you couldn't still deal with a buttonfield. Here's a snippet to find the buttonfield during row data bound and hide it (untested but I think would work...)
protected void gvTest_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
//let's assume your buttonfield is in column 1
// (you'd know this based on your markup...)
DataControlFieldCell cell = e.Row.Cells[1] as DataControlFieldCell;
if(cell != null)
{
ButtonField field = cell.ContainingField as ButtonField;
//based on your criteria, show or hide the button
field.Visible = false;
//or
field.Visible = true;
}
}
}
Is viewstate turned on on your GridView? This has caught me out numerous times.
<button onclick="window.open('<%#Eval("ReportLinks")%>', '_blank');" title='<%#Eval("ReportLinks")%>'> Link</button>

details view with Dropdownn control

in the modal pop up i am using detailsview control by default all the data would
be shown in label.
there will be an edit button down once the user clicks edit button all the lablel would be gone and text box and dropdown control should be present so that user can change the values and again update into database
looking forward for a solution. i dnt want to use sqlDatasource. i wanted it to do in .cs
thank you
here is how to:
<EditItemTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" />
</EditItemTemplate>
protected void DetailsView1_DataBound(object sender, EventArgs e)
{
if (DetailsView1.CurrentMode == DetailsViewMode.Edit)
{
DropDownList ddl = DetailsView1.FindControl("DropDownList1") as DropDownList;
if (ddl != null)
{
ddl.DataSource = dataSource;
ddl.DataBind();
}
}
}

Resources