[Solved] How to access grid cell on the client

[Fit2Page]

Howto access a grid's cell on the client?

I am working with a serverside dataload.

I try:

 

    var grid = $find("<%= dtgProducts.ClientID %>");

    var masterTable = grid.get_masterTableView();

    var dataItems = masterTable.get_dataItems();

            for (var i = 0; i < dataItems.length; i++) {
                var dataItem = dataItems[i];

 

But how further...i tried 

var lbl = dataItem.get_element().findControl("lbl_connect");
lbl.innerHTML = "here the text content";   

 

it's not working.

 

Thanks,

Marc

         

[Rumen]

Hi Marc,

Thanks for the details. The issue was that findControl is meant for client-side RadControl objects (like a RadComboBox or RadDatePicker), while an asp:Label has no such client-side representation, it renders as a plain <span>. That is why findControl("lbl_connect") was returning nothing for you.

The correct approach for plain HTML elements or server controls without a client RadControl wrapper is findElement, which returns the actual DOM element:

        <telerik:RadButton ID="RadButton1" runat="server" Text="Update labels via findElement"
            AutoPostBack="false" OnClientClicked="updateLabels">
        </telerik:RadButton>

        <script type="text/javascript">
            function updateLabels() {
                var grid = $find("<%= RadGrid1.ClientID %>");
                var masterTable = grid.get_masterTableView();
                var dataItems = masterTable.get_dataItems();

                for (var i = 0; i < dataItems.length; i++) {
                    var dataItem = dataItems[i];
                    // lblConnect is a plain asp:Label (no client RadControl), so findControl would return null; findElement gets its DOM element.
                    var lbl = dataItem.findElement("lblConnect");
                    if (lbl) {
                        lbl.innerHTML = "Updated row " + i;
                    }
                }
            }
        </script>

        <telerik:RadGrid ID="RadGrid1" runat="server" Width="800px"
            OnNeedDataSource="RadGrid1_NeedDataSource">
            <MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID">
                <Columns>
                    <telerik:GridBoundColumn DataField="OrderID" HeaderText="OrderID" UniqueName="OrderID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ShipName" HeaderText="ShipName" UniqueName="ShipName">
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn HeaderText="Connect" UniqueName="Connect">
                        <ItemTemplate>
                            <asp:Label ID="lblConnect" runat="server" Text="Not connected" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>

A couple of notes based on your scenario:

- Make sure the id you pass to findElement matches the control's ID as declared in the template, RadGrid resolves it internally.
- Since your data is loaded on the server, get_cell("ColumnUniqueName") is not an option here, that only works with client-side binding. findElement is the right tool for your case.

Let me know if this resolves it on your side.

 

Regards,
Rumen
Progress Telerik