单击telerik rad网格内的复选框时显示文本框

Question

我有一个telerik radgrid，其中有带有值的复选框。值来自数据库。其中一个值是 OTHER。当用户选中 OTHER 复选框时，应在网格内的 OTHER 值旁边出现一个文本框。

如何使用 javascript 做到这一点？

<telerik:RadGrid ID="grid_diag_group" runat="server"                       
                        Width="100%"                     
                        AutoGenerateColumns="false"
                        HeaderStyle-HorizontalAlign="Left" >
                        <MasterTableView>
                            <Columns>
                                <telerik:GridTemplateColumn UniqueName="TempCol1" HeaderText="Select" ReadOnly="true">
                                    <ItemTemplate>
                                        <asp:CheckBox ID="CheckBox1" runat="server" />
                                    </ItemTemplate>
                                    <EditItemTemplate>
                                        <asp:CheckBox ID="CheckBox2" runat="server" />
                                    </EditItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridBoundColumn DataField="diag_code" Display="false" Visible="true" AutoPostBackOnFilter="false" ItemStyle-HorizontalAlign="Left" CurrentFilterFunction="Contains" />                              
                                <telerik:GridBoundColumn DataField="diag_desc" UniqueName="diag_description" HeaderText="Diagnosis"
                                    AutoPostBackOnFilter="false" ItemStyle-HorizontalAlign="Left" />
                            </Columns>
                        </MasterTableView>
</telerik:RadGrid>

我的用户界面是 >>

[]  MALARIA
[]  T.B.
[]  GLYCOMA
[]  MEASELES
[]  FUNGAL INFECTION
[]  OTHERS

当用户选中其他复选框时，文本框应出现在网格内的“其他”旁边。我该怎么做？

Answer 1

编辑：在 OP 评论之后，这是一个更新，它查找复选框值以使文本框可见。其余的 cmets 仍然适用。

        <telerik:RadGrid ID="grid_diag_group" runat="server"
                         Width="100%"
                         AutoGenerateColumns="false"
                         HeaderStyle-HorizontalAlign="Left"
                         OnNeedDataSource="grid_diag_group_NeedDataSource"
                         OnItemDataBound="grid_diag_group_ItemDataBound">
            <MasterTableView DataKeyNames="diag_code">
                <Columns>
                    <telerik:GridEditCommandColumn></telerik:GridEditCommandColumn>
                    <telerik:GridTemplateColumn UniqueName="TempCol1" HeaderText="Select" ReadOnly="false">
                        <ItemTemplate>
                            <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" Checked='<%#Eval("diag_code") != null %>' />
                            the desired textbox:
                            <asp:TextBox ID="Textbox1" runat="server" Visible="false" />
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:CheckBox ID="CheckBox2" runat="server" AutoPostBack="true" Checked='<%#Eval("diag_code") != null %>' />
                            the desired textbox:
                            <asp:TextBox ID="Textbox2" runat="server" Visible="false" />
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn DataField="diag_code" Display="false" Visible="true" AutoPostBackOnFilter="false" ItemStyle-HorizontalAlign="Left" CurrentFilterFunction="Contains" />
                    <telerik:GridBoundColumn DataField="diag_desc" UniqueName="diag_description" HeaderText="Diagnosis"
                                             AutoPostBackOnFilter="false" ItemStyle-HorizontalAlign="Left" />
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>

和服务器代码：

protected void grid_diag_group_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridEditableItem && e.Item.IsInEditMode)
    {
        GridEditableItem editableItem = e.Item as GridEditableItem;
        TableCell cell = editableItem["TempCol1"];
        TextBox textBox = editableItem.FindControl("Textbox2") as TextBox;
        CheckBox checkbox = editableItem.FindControl("CheckBox2") as CheckBox;
        if (textBox != null && checkbox.Checked && editableItem.GetDataKeyValue("diag_code").ToString().ToLowerInvariant() == "others")
        {
            textBox.Visible = true;
        }
    }
    if (e.Item is GridDataItem)
    {
        GridDataItem dataItem = e.Item as GridDataItem;
        TableCell cell = dataItem["TempCol1"];
        TextBox textBox = dataItem.FindControl("Textbox1") as TextBox;
        CheckBox checkbox = dataItem.FindControl("CheckBox1") as CheckBox;
        if (textBox != null && checkbox.Checked && dataItem.GetDataKeyValue("diag_code").ToString().ToLowerInvariant() == "others")
        {
            textBox.Visible = true;
        }
    }
}

有关访问控件的更多信息：

• http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/rows/accessing-cells-and-rows#accessing-controls-in-template-column

• http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/rows/accessing-cells-and-rows#accessing-controls-in-editinsert-mode

这里有两个问题让我觉得你实际上并不想要那个复选框：

• 我在您的网格声明中根本看不到其他列。

• 唯一存在复选框的地方，您已将列的ReadOnly 属性设置为true。

这是我试图获得一个简单的文本框。请注意，此代码非常基本且初级，如果您想要进行复杂的交互，您可能希望使用自己的用户控件作为编辑表单：http://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/edit-form-types/defaultcs.aspx。

        <telerik:RadGrid ID="grid_diag_group" runat="server"
                         Width="100%"
                         AutoGenerateColumns="false"
                         HeaderStyle-HorizontalAlign="Left"
                         OnNeedDataSource="grid_diag_group_NeedDataSource">
            <MasterTableView>
                <Columns>
                <telerik:GridEditCommandColumn></telerik:GridEditCommandColumn>
                    <telerik:GridTemplateColumn UniqueName="TempCol1" HeaderText="Select" ReadOnly="false">
                        <ItemTemplate>
                            <asp:CheckBox ID="CheckBox1" runat="server" />
                        </ItemTemplate>
                        <EditItemTemplate>aaaaaaa
                            <asp:CheckBox ID="CheckBox2" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBox2_CheckedChanged" />
                            <asp:TextBox ID="Textbox1" runat="server" Visible="false" />
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn DataField="diag_code" Display="false" Visible="true" AutoPostBackOnFilter="false" ItemStyle-HorizontalAlign="Left" CurrentFilterFunction="Contains" />
                    <telerik:GridBoundColumn DataField="diag_desc" UniqueName="diag_description" HeaderText="Diagnosis"
                                             AutoPostBackOnFilter="false" ItemStyle-HorizontalAlign="Left" />
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>

和服务器代码（非常基本，再次）

protected void CheckBox2_CheckedChanged(object sender, EventArgs e)
{
    (sender as Control).Parent.FindControl("Textbox1").Visible=true;
}