Accessing Rows in multiple RADGrids

[George]

Hi, 

I am not sure if this is the correct place to post this question but I hope so....

I am maintaining an existing app hat I have just been given and have 3 RADGRIDs which are identical and used for 3 types of transactions. I have several columns with a button at the end, with a row added to the bottom to have comments on the 2nd line of each transaction.

The button is to add comments and I want to get the current comments and put this into the dialog box when the add btn is clicked.

The problem I am having is that I dont know how to access the correct Row (the following example just gives me the 1st row and not the ROW whos add button was clicked and from which RADGRID.

Here is the code I found on you site which gives me the comments for the first transaction only and the radgrids after thet.

Thanks, George.

var grid = $find("RadGrid1").get_element();
var CommentsElement = $telerik.findElement(grid, "CommentsField");
if (CommentsElement)
$("#txtAddComment").val(CommentsElement.outerText); 



<telerik:RadGrid runat="server" ID="RadGrid1" HeaderStyle-HorizontalAlign="Left" 
<MasterTableView>
    <Columns>
        <telerik:GridTemplateColumn HeaderText="ID" ItemStyle-Width="200px" Display="false">
            <ItemTemplate>
                <asp:Label runat="server" ID="ID" Text='<%# DataBinder.Eval(Container.DataItem, "ID")%>' />
            </ItemTemplate>
        </telerik:GridTemplateColumn>
        <telerik:GridTemplateColumn HeaderText="Name" ItemStyle-Width="150px">
             <ItemTemplate>
                  <asp:Label runat="server" ID="NAME" Text='<%# DataBinder.Eval(Container.DataItem, "NAME")%>' />
             </ItemTemplate>
        </telerik:GridTemplateColumn>
        <telerik:GridTemplateColumn HeaderText="Add Comments">
             <ItemTemplate>
                <telerik:RadButton runat="server" Text="Add" ID="AddCommentBtn" OnClientClicked="AddCommentBtn_Clicked" AutoPostBack="false"  />
           </ItemTemplate>
        </telerik:GridTemplateColumn>
    </Columns>
    <DetailItemTemplate>
        <asp:Table ID="ColumnRow" runat="server">
            <asp:TableRow>
                <asp:TableCell>
                      <asp:Label runat="server" ID="CommentsField" Text='<%# DataBinder.Eval(Container.DataItem, "COMMENTS")%>' 
                </asp:TableCell>
            </asp:TableRow>
        </asp:Table>
    </DetailItemTemplate>
</MasterTableView>
</telerik:RadGrid>


<telerik:RadGrid runat="server" ID="RadGrid2" HeaderStyle-HorizontalAlign="Left" 
<MasterTableView>
    <Columns>
        <telerik:GridTemplateColumn HeaderText="ID" ItemStyle-Width="200px" Display="false">
            <ItemTemplate>
                <asp:Label runat="server" ID="ID" Text='<%# DataBinder.Eval(Container.DataItem, "ID")%>' />
            </ItemTemplate>
        </telerik:GridTemplateColumn>
        <telerik:GridTemplateColumn HeaderText="Name" ItemStyle-Width="150px">
             <ItemTemplate>
                  <asp:Label runat="server" ID="NAME" Text='<%# DataBinder.Eval(Container.DataItem, "NAME")%>' />
             </ItemTemplate>
        </telerik:GridTemplateColumn>
        <telerik:GridTemplateColumn HeaderText="Add Comments">
             <ItemTemplate>
                <telerik:RadButton runat="server" Text="Add" ID="AddCommentBtn2" OnClientClicked="AddCommentBtn_Clicked" AutoPostBack="false"  />
           </ItemTemplate>
        </telerik:GridTemplateColumn>
    </Columns>
    <DetailItemTemplate>
        <asp:Table ID="ColumnRow" runat="server">
            <asp:TableRow>
                <asp:TableCell>
                      <asp:Label runat="server" ID="CommentsField" Text='<%# DataBinder.Eval(Container.DataItem, "COMMENTS")%>' 
                </asp:TableCell>
            </asp:TableRow>
        </asp:Table>
    </DetailItemTemplate>
</MasterTableView>
</telerik:RadGrid>

[Princy]

Hi George,

I guess you want to have the same ClientClick function to be called on different RadGrid and access the selected row contents. Please try the following code snippet:

JS:

<script type="text/javascript">
  function AddCommentBtn_Clicked(btn){
   var row = btn._element.parentNode.parentNode;
   var rowIndex = row.rowIndex - 1;
   var id = row.cells[0].getElementsByTagName("span")[0].innerHTML;
   var name = row.cells[1].getElementsByTagName("span")[0].innerHTML;
   alert("RowIndex: " + rowIndex + " ID: " + id + " Name:" + name);
   return false;
  }
</script>

Thanks,
Princy

[George]

Hi Princy,

Thanks for the reply.

I have tried what you suggest but this is only giving me the items within the <Columns> section and not the text in the ID="CommentsField" within the <DetailItemTemplate> that I am trying to locate.

Do you have any further suggestes that I can try ?

Thanks, George.

[Princy]

Hi George,

You can try accessing the DetailItemTemplate from the code behind as follows:

C#:

protected void AddCommentBtn_Click(object sender, EventArgs e)
{
 RadButton btn = (RadButton)sender;
 GridDataItem item = (GridDataItem)btn.NamingContainer;
 // access DetailItemTemplate label
 Label lbl = item.DetailTemplateItemDataCell.FindControl("CommentsField") as Label;
}

Thanks,
Princy

[George]

Hi Princy,

Thanks for the reply. Sorry I didnt get time to do an update before I left last night, but here it is.

I changed your initial suggestion slightly, by adding a further ParentNode (was this not advisable ?) which works perfectly for the first Radgrid but doesnt work for the 2nd and 3rd that I have. I am currently trying to debug this to see whats going wrong with the 2nd 2.

I am wondering how the "span" term works in this context ?

Thanks George.

var allRows = sender._element.parentNode.parentNode.parentNode;
var currentRow = sender._element.parentNode.parentNode;
var rowIndex = currentRow.rowIndex;
var Comments = allRows.rows[rowIndex].getElementsByTagName("span")[0].innerHTML;

[George]

Hi Princy,

A quick update.

The previous code I posted worked perfectly. I finally realised I had made a change to the 1st RADGRID when doing the initial test for this and didnt propagate that to the 2nd two. (yes I know coding 101) :)

So now it works exactly as I had hoped.

Thanks so much for all your help, very much appreciated.

Regards, George.

Code that worked - 

var allRows = sender._element.parentNode.parentNode.parentNode;
var currentRow = sender._element.parentNode.parentNode;
var rowIndex = currentRow.rowIndex;
var Comments = allRows.rows[rowIndex].getElementsByTagName("span")[0].innerHTML;

[Princy]

Hi George,

Happy to hear that you have got the code working properly. Just to make sure, the rowIndex should be one less to have the detail item selected else the next row is selected:

JS:

var rowIndex = currentRow.rowIndex-1;

Thanks,
Princy