I want to set a row in edit mode when clicking on it and the clicked cell must get the focus.
i get this working when using a setTimeOut but i don't like this solution.
ex:
| ClientSettings.ClientEvents.OnRowCreated = @" |
| function RowCreatedEventHandler(sender, eventArgs) |
| { |
| var dataItem = eventArgs.get_gridDataItem(); |
| var lastCellFound = false; |
| var cell; |
| for(var i = 0; i < dataItem.get_element().cells.length; i++) |
| { |
| cell = dataItem.get_element().cells[i]; |
| cell.onclick = function() |
| { |
| if(selectedRow != this.parentNode.rowIndex-1) |
| { |
| selectedCol = this.cellIndex; |
| selectedRow = this.parentNode.rowIndex-1; |
| setTimeout(function() |
| { |
| $find(""" + MasterTableView.ClientID + @""").get_dataItems()[selectedRow].get_element().cells[selectedCol].childNodes[0].focus(); |
| }, 1000); |
| $find(""" + MasterTableView.ClientID + @""").editItem(selectedRow); |
| event.cancelBubble=true; |
| return false; |
| } |
| } |
| } |
| }"; |
I tried to use OnResponseEnd of the ajaxmanager to know when the editItem call ended and then set the focus but this does'n work.
ex:
| ClientSettings.ClientEvents.OnRowCreated = @" |
| function RowCreatedEventHandler(sender, eventArgs) |
| { |
| var dataItem = eventArgs.get_gridDataItem(); |
| var lastCellFound = false; |
| var cell; |
| for(var i = 0; i < dataItem.get_element().cells.length; i++) |
| { |
| cell = dataItem.get_element().cells[i]; |
| cell.onclick = function() |
| { |
| if(selectedRow != this.parentNode.rowIndex-1) |
| { |
| selectedCol = this.cellIndex; |
| selectedRow = this.parentNode.rowIndex-1; |
| var mgr = $find(""" + RadAjaxManager.GetCurrent(Page).ClientID + @"""); |
| mgr.OnResponseEnd = function(sender, eventArgs) |
| { |
| $find(""" + MasterTableView.ClientID + @""").get_dataItems()[selectedRow].get_element().cells[selectedCol].childNodes[0].focus(); |
| } |
| $find(""" + MasterTableView.ClientID + @""").editItem(editedRow); |
| event.cancelBubble=true; |
| return false; |
| } |
| } |
| } |
| }"; |
Can somone help me with this?
Thx in advance.
11 Answers, 1 is accepted
Rank 1
Here is what you need to do. Attach to the Client-side OnClick and OnGridCreated events of RadGrid:
| function GridCreated(sender, args) |
| { |
| if(document.getElementById('targetInput').value != "") |
| { |
| var itemIndex = document.getElementById('targetInput').value.split(':')[0]; |
| var cellIndex = document.getElementById('targetInput').value.split(':')[1]; |
| sender.get_masterTableView().get_dataItems()[itemIndex].get_element().cells[cellIndex].childNodes[0].focus() |
| } |
| } |
| function RowClick(sender, args) |
| { |
| var cellIndex = args.get_domEvent().target.cellIndex; |
| var itemIndex = args.get_itemIndexHierarchical(); |
| document.getElementById('targetInput').value = itemIndex + ":" +cellIndex ; |
| $find('<%= RadAjaxManager1.ClientID %>').ajaxRequest("Edit:" + itemIndex); |
| } |
The Click event sets the itemIndex and cellIndex to a hidden variable. The GridCreated event simply finds the input control by item and cell index and give it focus.
In the code-behind, you have a RadAjaxManager's AjaxRequest handler:
| void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e) |
| { |
| if (e.Argument.Split(':')[0] == "Edit") |
| { |
| string itemIndex = e.Argument.Split(':')[1]; |
| RadGrid1.EditIndexes.Add(Int32.Parse(itemIndex)); |
| RadGrid1.Rebind(); |
| } |
| } |
Kind regards,
Veli
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
I actually tested the approach with the newest RadControls for ASP.NET AJAX Q2.2009. Can you share any observations on why it is not working? Do you get any javascript errors?
All the best,
Veli
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Rank 1
I am not getting any Javascript error, but focus is not going to the cell.
If fact i tried
protected void RadGrid1_DataBound(object sender, EventArgs e)
{
RadGrid1.Items[0].Cells[3].Focus();
}
Didn't work either, should i call it in different event or...
thanks
virendra
I suggest you focus not a particular cell (<td> element), but the input element inside the cell. This is also demonstrated in my previous post using javascript, where I focus the first child node of the cell, which is supposedly an <input> element.
Best wishes,
Veli
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Rank 1
thanks for the response.
I did try the approach
protected void RadGrid1_PreRender(object sender, EventArgs e)
{
this.RadGrid1.Items[0].Cells[7].Controls[0].Focus();
but still no luck.
Sould i put it in some other event?
Is it correct if i say, Cell index changes when row changes into Edit mode?
Other approch i tried was to send textbox ID to client and set focus client side/javascript
Another strange this is happening is when i try to set focus from client side/javascript,
Focus get set only, when i have alert before it
function SetFocus(ControlID)
{
//alert(ControlID); //doesn't work
document.getElementById(ControlID).focus();
}
function SetFocus(ControlID)
{
alert(ControlID); //works..set focus correctly.
document.getElementById(ControlID).focus();
}
thanks
virendra
Rank 1
After doing all kind of R&D i am posting my code and queries
Default.aspx code.................................................................
<form runat="server" id="mainForm" method="post" style="width: 100%">
<!-- content start -->
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
<!--
var gvSender;
var gvEventArgs;
function ShowAlert(Message)
{
var show = 0;
if (show)
{
alert(Message);
}
}
function RowClick(sender, eventArgs)
{
//set values, it will be used later in making UpdateItem call
gvSender = sender;
gvEventArgs = eventArgs;
ShowAlert("RowClick");
//bgn: to set a row in edit mode and set focus on clicked cell
//make row editable
MakeRowEditable(sender, eventArgs);
}
function MakeAjaxRequest(RowIndex, ColumnIndex)
{
ShowAlert("MakeAjaxRequest");
}
/// <summary>
/// Fires underline RadGrid_ItemCommand with CommandName=Edit
/// </summary>
/// <param name="sender"></param>
/// <param name="eventArgs"></param>
function MakeRowEditable(sender, eventArgs)
{
ShowAlert("MakeRowEditable");
editedRow = eventArgs.get_itemIndexHierarchical();
$find("<%= RadGrid1.MasterTableView.ClientID %>").editItem(editedRow);
}
/// <summary>
/// Fires underline RadGrid_ItemCommand with CommandName=Update
/// </summary>
/// <param name="sender"></param>
/// <param name="eventArgs"></param>
function MakeUpdateItemRequest(sender, eventArgs)
{
ShowAlert("MakeUpdateItemRequest");
editedRow = eventArgs.get_itemIndexHierarchical();
$find("<%= RadGrid1.MasterTableView.ClientID %>").updateItem(editedRow);
}
/// <summary>
/// Fires underline RadGrid_ItemCommand with CommandName=Update
/// </summary>
function gvOnRadGridCellFocusIn()
{
ShowAlert("gvOnRadGridCellFocusIn");
//fire rowupdate event
//MakeUpdateItemRequest(gvSender, gvEventArgs);
//make Ajax request
//MakeAjaxRequest(RowIndex, ColumnIndex);
}
/// <summary>
/// Fires underline RadGrid_ItemCommand with CommandName=Update
/// </summary>
function gvOnRadGridCellFocusOut()
{
ShowAlert("OnRadGridCellFocusOut");
//fire rowupdate event
MakeUpdateItemRequest(gvSender, gvEventArgs);
//make Ajax request
//MakeAjaxRequest(RowIndex, ColumnIndex);
}
function SetFocus(ControlID)
{
//alert(ControlID);
if (ControlID != "")
{
document.getElementById(ControlID).focus();
}
}
//......................................................................................
-->
</script>
</telerik:RadCodeBlock>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1"/>
<telerik:AjaxUpdatedControl ControlID="Label1" />
<telerik:AjaxUpdatedControl ControlID="Label2" />
<telerik:AjaxUpdatedControl ControlID="Label3" />
<telerik:AjaxUpdatedControl ControlID="Label4" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<input id="targetInput" type="hidden" runat="server" />
<telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource2" Width="700" ShowStatusBar="True" AllowSorting="True" PageSize="7"
GridLines="None" AllowPaging="True" runat="server"
AutoGenerateColumns="False" OnItemEvent="RadGrid1_ItemEvent"
>
<ClientSettings>
</ClientSettings>
<MasterTableView TableLayout="Auto" DataKeyNames="CustomerID" EditMode="InPlace" CommandItemDisplay="TopAndBottom">
<Columns>
<telerik:GridButtonColumn HeaderStyle-Width="10" ConfirmText="Delete this product?" ConfirmDialogType="RadWindow" ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
<ItemStyle HorizontalAlign="Center" />
</telerik:GridButtonColumn>
<telerik:GridButtonColumn CommandName="Select" HeaderStyle-Width="100" Text="select" DataType="System.Boolean">
</telerik:GridButtonColumn>
<telerik:GridEditCommandColumn HeaderStyle-Width="100">
</telerik:GridEditCommandColumn>
<telerik:GridRowIndicatorColumn HeaderStyle-Width="100">
</telerik:GridRowIndicatorColumn>
<telerik:GridBoundColumn UniqueName="CustomerID" DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" HeaderStyle-Width="150" />
<telerik:GridBoundColumn UniqueName="CompanyName" DataField="CompanyName" HeaderText="Company Name" HeaderStyle-Width="350" ColumnEditorID="GridTextBoxColumnEditor1" />
<telerik:GridDropDownColumn UniqueName="BeveragesID" DataField="Beverages" DataSourceID="SqlDataSource1" HeaderText="Beverages" ListTextField="CategoryName" ListValueField="CategoryID" ColumnEditorID="GridTextBoxColumnEditor1"/>
<telerik:GridBoundColumn UniqueName="ContactName" DataField="ContactName" HeaderText="ContactName" HeaderStyle-Width="150" />
<telerik:GridCheckBoxColumn UniqueName="Discontinued" DataField="Discontinued" HeaderText="Discontinued" ReadOnly="false" HeaderStyle-Width="10%" ColumnEditorID="GridCheckBoxColumnEditor1" />
</Columns>
</MasterTableView>
<ClientSettings>
<ClientEvents OnRowClick="RowClick"/>
</ClientSettings>
</telerik:RadGrid>
<telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor1" runat="server" TextBoxStyle-Width="180px" TextBoxStyle-BorderWidth="1" />
<telerik:GridDropDownListColumnEditor ID="GridDropDownListColumnEditor1" runat="server" DropDownStyle-Width="70px" />
<telerik:GridCheckBoxColumnEditor ID="GridCheckBoxColumnEditor1" runat="server" CheckBoxStyle-BorderWidth="2" />
<telerik:GridNumericColumnEditor ID="GridNumericColumnEditor1" runat="server" NumericTextBox-Width="50px" />
<br />
<asp:Label ID="Label1" BorderColor="Black" BorderWidth="1" runat="server" EnableViewState="false" />
<asp:Label ID="Label2" BorderColor="Black" BorderWidth="1" runat="server" EnableViewState="false" />
<asp:Label ID="Label3" BorderColor="Black" BorderWidth="1" runat="server" EnableViewState="false" />
<asp:Label ID="Label4" BorderColor="Black" BorderWidth="1" runat="server" EnableViewState="false" />
<br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" ProviderName="System.Data.SqlClient" SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" ProviderName="System.Data.SqlClient" SelectCommand="SELECT CustomerID, CompanyName, ContactName, ContactTitle, Address, PostalCode, '7' as Beverages, 'true' as Discontinued FROM Customers"></asp:SqlDataSource>
<!-- content end -->
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
Deault.aspx.cs code..................................................................................................................................
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
using System.Collections;
using System.Web.Security;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;
public partial class Default : System.Web.UI.Page
{
struct RadGridCellInfo
{
public string OriginalValue;
public string CurrentValue;
public int RowIndex;
public int ColumnIndex;
public string ColumnUniqueName;
public string ClientID;
public RadGrid ParentGrid;
public bool IsValid; //if not valid, keep the focus in this cell only.
}
RadGridCellInfo movedInRadGridCellInfo = new RadGridCellInfo();
RadGridCellInfo movedOutRadGridCellInfo = new RadGridCellInfo();
RadGridCellInfo editedRadGridCellInfo = new RadGridCellInfo();
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
//set the first row in Edit mode
//RadGrid1.EditIndexes.Add(0);
}
else
{
//this.RadGrid1.Items[0].Cells[7].Controls[0].Focus();
}
this.Label2.Text = DateTime.Now.Ticks.ToString();
this.RadGrid1.PreRender += new EventHandler(RadGrid1_PreRender);
this.RadGrid1.ItemDataBound += new GridItemEventHandler(RadGrid1_ItemDataBound);
this.RadGrid1.ItemCommand += new GridCommandEventHandler(RadGrid1_ItemCommand);
}
protected void RadGrid1_PreRender(object sender, EventArgs e)
{
//set row in edit mode
if (editedRadGridCellInfo.ParentGrid != null)
{
editedRadGridCellInfo.ParentGrid.EditIndexes.Add(editedRadGridCellInfo.RowIndex);
int columnIndex = GetColumnIndexByUniqueName((RadGrid)sender, editedRadGridCellInfo.ColumnUniqueName);
//this.RadGrid1.Items[0].Cells[7].Controls[0].Focus();
//editedRadGridCellInfo.ParentGrid.Items[editedRadGridCellInfo.RowIndex].Cells[editedRadGridCellInfo.ColumnIndex].Controls[0].Focus();
editedRadGridCellInfo.ParentGrid.Rebind();
//this.RadGrid1.Items[0].Cells[7].Controls[0].Focus();
ScriptManager.RegisterClientScriptBlock(
this.Page,
this.GetType(),
"WebUserControlSript",
"SetFocus('" + editedRadGridCellInfo.ClientID + "')",
true);
}
//this.Label2.Text = "Move FROM <BR>"
// + "Row Index: " + movedOutRadGridCellInfo.RowIndex + "<BR>"
// + "Column Index: " + movedOutRadGridCellInfo.ColumnIndex + "<BR>"
// + "Original Value: " + movedOutRadGridCellInfo.OriginalValue + "<BR>"
// + "Current Value: " + movedOutRadGridCellInfo.CurrentValue + "<BR>";
//this.Label3.Text = "Move INTO <BR>"
// + "Row Index: " + movedInRadGridCellInfo.RowIndex + "<BR>"
// + "Column Index: " + movedInRadGridCellInfo.ColumnIndex + "<BR>"
// + "Original Value: " + movedInRadGridCellInfo.OriginalValue + "<BR>"
// + "Current Value: " + movedInRadGridCellInfo.CurrentValue + "<BR>";
this.Label4.Text = "Edit Item <BR>"
+ "Row Index: " + editedRadGridCellInfo.RowIndex + "<BR>"
+ "Column Index: " + editedRadGridCellInfo.ColumnIndex + "<BR>"
+ "Original Value: " + editedRadGridCellInfo.OriginalValue + "<BR>"
+ "Current Value: " + editedRadGridCellInfo.ClientID + "<BR>";
}
protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
if (e.Item is GridDataItem && e.Item.IsInEditMode)
{
if (e.Item is GridEditableItem)
{
GridDataItem item = (GridDataItem)e.Item;
foreach (Control tc in item.Controls)
{
if (tc.Controls.Count > 0)
{
if (tc.Controls[0].GetType().Name.Equals("TextBox"))
{
TextBox textBox = tc.Controls[0] as TextBox;
//to make mainly store the current cell informatiom so thata later focus can be set on it
textBox.Attributes.Add("onFocusIn", "gvOnRadGridCellFocusIn()");
//to make ItemUpdate call add client side fucntion
textBox.Attributes.Add("onFocusOut", "gvOnRadGridCellFocusOut()");
if (editedRadGridCellInfo.ClientID != null)
{
if (editedRadGridCellInfo.ClientID.Equals(textBox.ClientID))
{
textBox.Focus();
}
}
}
if (tc.Controls[0].GetType().Name.Equals("RadComboBox"))
{
RadComboBox radComboBox = tc.Controls[0] as RadComboBox;
//to make ItemUpdate call add client side fucntion
//radComboBox.Attributes.Add("onchange", "gvOnRadGridCellFocusOut()");
}
}
}
}
}
}
protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
{
if (e.CommandName == RadGrid.EditCommandName)
{
movedInRadGridCellInfo = GetRadGridCellInfo(source, e);
//movedOutRadGridCellInfo = movedInRadGridCellInfo;
}
if (e.CommandName == RadGrid.UpdateCommandName)
{
//e.Canceled = true; //no effect seen
//movedOutRadGridCellInfo = movedInRadGridCellInfo;
editedRadGridCellInfo = GetRadGridCellInfo(source, e);
//movedInRadGridCellInfo = editedRadGridCellInfo;
}
}
private RadGridCellInfo GetRadGridCellInfo(object source, GridCommandEventArgs e)
{
RadGridCellInfo radGridCellInfo = new RadGridCellInfo();
string oldValue ="";
string newValue ="";
int rowIndex =-1;
int columnIndex =-1;
string clientID = "";
string columnUniqueName="";
if (e.Item is GridEditableItem)
{
GridEditableItem gridEditableItem = e.Item as GridEditableItem;
//Prepare new dictionary object
Hashtable newValues = new Hashtable();
//here gridEditableItem.SavedOldValues will be the dictionary which holds the predefined values
//the newValues instance is the new collection of key -> value pairs with the updated ny the user data
e.Item.OwnerTableView.ExtractValuesFromItem(newValues, gridEditableItem);
rowIndex = gridEditableItem.ItemIndex;
columnIndex = -1;
foreach (DictionaryEntry savedOldValues in gridEditableItem.SavedOldValues)
{
//if the values are not same then that is the cell been changed
if (!savedOldValues.Value.ToString().Equals(newValues[savedOldValues.Key].ToString()))
{
oldValue = savedOldValues.Value.ToString();
newValue = newValues[savedOldValues.Key].ToString();
columnUniqueName = savedOldValues.Key.ToString();
columnIndex = GetColumnIndexByUniqueName((RadGrid)source, columnUniqueName);
clientID = gridEditableItem[savedOldValues.Key.ToString()].Controls[0].ClientID;
break;
}
}
//set it in sturct so that can be used in preRender event to make it editable
radGridCellInfo.ColumnIndex = columnIndex;
radGridCellInfo.RowIndex = rowIndex;
radGridCellInfo.CurrentValue = newValue;
radGridCellInfo.OriginalValue = oldValue;
radGridCellInfo.ParentGrid = (RadGrid)source;
radGridCellInfo.ClientID = clientID;
radGridCellInfo.ColumnUniqueName = columnUniqueName;
}
return (radGridCellInfo);
}
}
SUMMARY
On row click Grid goes in EditMode, focus has to set on the control user has clicked in
On FocusLost of TextBox or Combobox, "UpdateItem" command is sent to server
On server, after validation if Data is good, focus should go to new-clicked-in-control else focus must remain in last cell\control.
ISSUES
Focus is not setting anytime
thanks
virendra
As far as I understand, you need to perform server-side validation on blur of your textboxes and dropdownlists. If this is correct, we best recommend using client-side validation to reduce the amount of server-client round trips and the AJAX-incurred delays in UI. Alternatively, you can use one-time validation when the Update button is clicked to cancel the update event and return to the edited item if the newly edited values are not valid.
For focusing your edit controls, you can use RadGrid's ItemCreated event:
| void RadGrid1_ItemCreated(object sender, GridItemEventArgs e) |
| { |
| if (e.Item is GridEditableItem && e.Item.IsInEditMode) |
| { |
| GridEditableItem item = e.Item as GridEditableItem; |
| (item.EditManager.GetColumnEditor("ProductName") as GridTextBoxColumnEditor).TextBoxControl.Focus(); |
| } |
| } |
The above code demonstrate how I get the editor textbox control of the ProductName column and focus it.
Kind regards,
Veli
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Rank 1
You can find attached a small web site I have created to demonstrate a similar behavior. The code is commented so you should not have problems going through it. Textboxes are validated on blur back on the server.
Go through the example and see how you can apply it to your case. An interesting thing to note here is that additional updates to RadGrid are done on PreRender, after RadGrid has rebound for the last time before rendering. This is done because RadGrid's changes are not persisted on rebind, unless the data source itself is updated.
Greetings,
Veli
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.