Indicate row that is being edited.

[Gerald]

Hi

I have a grid with multi-row in-line edit that uses a command item template for edit/update/cancel.  When edit is selected all rows are put into edit mode with just the far right of many columns being editable.  This work fine, but I am wondering if there is a way to indicate which row is being edited so the user can easily folllow the row back to the columns on the left as they are doing data entry?  I would like to change the background or add some kind of indicator on each side of the grid indicating the row currently being edited.  Is this possible?

Thanks,
Gerald

[Pavlina]

Hi Gerald,

Please refer to the following help article which elaborates on this subject and let me know if it helps to achieve the desired functionality:
http://www.telerik.com/help/aspnet-ajax/grid-selected-row-at-all-times.html

Best wishes,
Pavlina
the Telerik team

[Gerald]

Pavlina,

Thanks for the reply.  Unfortunately the suggestion in help article does not work for multi-row edit.  What I end up with is the last row on the page being highlighted (selected).  What I'm looking for is the highlight to move with the current row being edited client side.

Thanks,
Gerald

[Pavlina]

Hi Gerald,

Please go through the following forum thread and see if it helps to achieve your goal:
http://www.telerik.com/community/forums/aspnet-ajax/grid/clientside-row-select-w-o-set-selected.aspx

All the best,
Pavlina
the Telerik team

[Gerald]

Pavlina,

Thanks for the reply. I can get the desired results by subscribing to the onFocus and onBlur evernts of my RadNumberTextBox and setting the dataItem classname of the current row to my own CSS class. (see code below). 

I just have a couple questions I'm hoping you can answer.

1. Why must I subtract 3 from the rowIndex to get the actual row I'm on? I'm guessing it has to with the fact that I have a header row and a filter row and the index is zero-based?

2. The thread you pointed my too indicates "this approach is not recommended".  Can  you see any downfalls for doing this?  Is there  a better way to achieve my disired result?

Thanks,
Gerald

 

 

<style type="text/css">

.myEditRow td

{

    border-style:solid;

    border-width:0 0px 1px 0px;

    background-color:#dae2e8;

    padding-left:8px;

    padding-right:8px;

    padding-top:4px;

    padding-bottom:3px;

    border-color:#fff #fff #768ca5 #fff;

    white-space:nowrap;

    overflow:hidden;

}

</style>



<script type="text/javascript" language="javascript">

    function Focus(sender, eventArgs) {
     var row = sender.get_element().parentNode.parentNode.parentNode;
     var index = (row.rowIndex - 3)
     $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_dataItems()[index].get_element().className = "myEditRow";
    }

    function Blur(sender, eventArgs) {
     var row = sender.get_element().parentNode.parentNode.parentNode;
     var index = (row.rowIndex - 3)
     $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_dataItems()[index].get_element().className = "rgEditRow";
    }
 </script>


<telerik:GridTemplateColumn DataField="Value" DataType="System.Decimal" HeaderText="Amount"
     UniqueName="Amount" AllowFiltering="False">
     <EditItemTemplate>
         <telerik:RadNumericTextBox ID="AmountRadNumericTextBox" runat="server" Width="7em"
             Type="Number" DbValue ='<%# Bind("Value") %>' NumberFormat-AllowRounding="true"
             NumberFormat-DecimalDigits='2'>
             <ClientEvents OnFocus="Focus" OnBlur="Blur"/>
             <IncrementSettings InterceptArrowKeys="false" InterceptMouseWheel="false" />
         </telerik:RadNumericTextBox>
     </EditItemTemplate>
     <ItemTemplate>
         <asp:Label ID="AmountLabel" runat="server" Text='<%# Eval("Value", "{0:$#,##0.00}") %>'></asp:Label>
     </ItemTemplate>
     <HeaderStyle HorizontalAlign="Right" Width="10em" />
     <ItemStyle HorizontalAlign="Right" Width="10em" />
 </telerik:GridTemplateColumn>

[Genti]

Hello Gerald,

Thank you for contacting us.

1) Regarding the first issue, the index might not be the same with the DataItem index as the Grid is also including in the the Header and Command item.
Yes, the index starts from zero.

2) This might bring some issues when you try to change the styling of the grid or apply some skin to the grid. Then you would have to change even the CSS definition for the edited row, otherwise the rendering of the edited row would be different and somehow scramble the GridView.
One solution in this case would be to override the CSS of that the skin genarates:

.GridEditRow_[SkinName] td
{
/* your definitions here */
}

Another simple solution in this case would be to make use of the EditItemStyle of the RadGrid:

<EditItemStyle BackColor="Red"/>

This way you won't need to write any JavaScript code to highlight the row.


Hope this helps.

Best wishes,
Genti
the Telerik team

[Gerald]

Thank you for the reponse. I'm not sure you are understanding what I am trying to accomplish on my grid.  All items on the RadGrid page are in EditMode.  If I change the EditItemStyle or override the CSS of the skin it is applied to every row on the Grid!  I only want the active row to be changed so the user can easily tell which row they are currently editing.

I'm not to concerned with the skin changing, so in lieu of a better solutiion I will proceed with what I have.

Thank you,
Gerald