Accessing Controls in Template Columns on DataBound Grid via Client-Side Scripting

[Matt]

I have a data bound grid that also contains two template columns.  One column contains a checkbox, the other contains a textbox.  Only if the checkbox is checked should the textbox be enabled.  I have added code that does this on the server side, but I'd rather execute this on the client side to reduce processing on the server.

Here's the grid definition:

<telerik:RadGrid ID="grdContentManagement" runat="server" SkinID="StaticColumnsNoPagingBuiltInSorting"

        OnItemCommand="ContentManagementGridItemCommand" OnNeedDataSource="grdContentManagement_NeedDataSource"

        OnItemDataBound="grdContentManagement_OnItemDataBound" CellSpacing="0" GridLines="None"

        AllowSorting="True" AllowPaging="True" PageSize="15" Height="478" ShowFooter="false">

        <MasterTableView DataKeyNames="Id" ClientDataKeyNames="Id" AllowSorting="true">

            <Columns>

                <telerik:GridTemplateColumn UniqueName="Selected" HeaderText="Display" HeaderStyle-HorizontalAlign="Center"

                    HeaderStyle-Width="50px" ItemStyle-HorizontalAlign="Center">

                    <ItemTemplate>

                        <asp:CheckBox ID="chkSelected" runat="server" onclick="CheckBoxClicked(this)" />

                    </ItemTemplate>

                </telerik:GridTemplateColumn>

                <telerik:GridBoundColumn HeaderText="Property" UniqueName="PropertyName" DataField="PropertyName"

                    SortExpression="PropertyName" HeaderStyle-Width="200px">

                </telerik:GridBoundColumn>

                <telerik:GridTemplateColumn UniqueName="DisplayName" HeaderText="Label" HeaderStyle-Width="200px"

                    SortExpression="DisplayName">

                    <ItemTemplate>

                        <telerik:RadTextBox ID="txtDisplayName" runat="server" MaxLength="255" Width="100%" />

                    </ItemTemplate>

                </telerik:GridTemplateColumn>

                <telerik:GridBoundColumn HeaderText="Data Type" DataField="DataType" SortExpression="DataType"

                    HeaderStyle-Width="100px">

                </telerik:GridBoundColumn>

                <telerik:GridBoundColumn HeaderText="Object Type" DataField="ObjectType" SortExpression="ObjectType" />

                <telerik:GridBoundColumn DataField="Id" SortExpression="Id" Visible="false" />

            </Columns>

            <EditFormSettings>

                <EditColumn FilterControlAltText="Filter EditCommandColumn column">

                </EditColumn>

            </EditFormSettings>

        </MasterTableView>

        <ClientSettings>

            <Selecting AllowRowSelect="True" />

            <Scrolling UseStaticHeaders="False" />

            <Resizing EnableRealTimeResize="true" />

        </ClientSettings>

        <FilterMenu EnableImageSprites="False">

            <WebServiceSettings>

                <ODataSettings InitialContainerName="">

                </ODataSettings>

            </WebServiceSettings>

        </FilterMenu>

    </telerik:RadGrid>

I create the checkboxes as follows:

protected void grdContentManagement_OnItemDataBound(object sender, GridItemEventArgs e)
{
    GridDataItem item = e.Item as GridDataItem;
    if (item != null)
    {
        TelerikGridHelper.SetGridToolTips(item as GridDataItem);
        TelerikGridHelper.SetGridHtmlEncode(item as GridDataItem);

        CheckBox chkBox = (CheckBox)item["Selected"].Controls[1];
        chkBox.Checked = ((ContentManagementFieldForDisplay)(item.DataItem)).Selected;
        chkBox.Attributes.Add("rowIndex", item.ItemIndex.ToString());

        RadTextBox txtBox = (RadTextBox)item["DisplayName"].Controls[1];
        txtBox.Text = ((ContentManagementFieldForDisplay)(item.DataItem)).DisplayName;
    }
}

The issue I'm experiencing is that I can't figure out how to access the textbox based on the checkbox row index on the client side.  If I place an alert in the following code, it will fire whenever the box is checked/unchecked, so I know it's reaching that point in code, but trying to access the "rowIndex" attribute I defined for the checkbox on the server side doesn't work.

function CheckBoxClicked(checkBox) {

    if (checkBox.checked) {
        //enable the textbox
    }
    else {
        //disable the textbox
    }
}

Any ideas?

[Radoslav]

Hello Matt,

I am sending you a simple example which demonstrates how to achieve the desired functionality. Please check it out and let me know if it helps you.

Looking forward for your reply.

Kind regards,
Radoslav
the Telerik team

[Matt]

Thanks for the response; we're rockin' with Dokken.  (That's a good thing.)