如何在我的 radGrid 中添加一个复选框列？以及如何显示展开按钮？

Question

我正在学习 Telerik，我正在尝试将以下设计翻译成英文（我不需要你帮我翻译，只需要设计组件）：

到目前为止我有这个：

如何添加 check box？另外，我如何摆脱我自己创建的 columns 之前的那 3 个空白 columns？

这是我目前的 HTML 代码：

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" Width="483px"> 

            <asp:Label ID="TreatmentCenter" Text="Treatment Center:         " runat="server"></asp:Label>
            <telerik:RadDropDownList RenderMode="Lightweight" DefaultMessage="Select City" DataTextField="City" ID="DDL1" runat="server"></telerik:RadDropDownList>
                 
            <br />
          
            <telerik:RadGrid RenderMode="Lightweight"
                ID="RadGrid1" runat="server" AutoGenerateColumns="False" 
                ShowGroupPanel="True" Height="148px" Width="462px">

            <MasterTableView EnableHierarchyExpandAll="true" DataKeyNames="OrderID">
                <DetailTables>
                    
                    <telerik:GridTableView EnableHierarchyExpandAll="true" DataKeyNames="ProductID" runat="server">
                        
                        <ParentTableRelation>
                            <telerik:GridRelationFields DetailKeyField="OrderID" MasterKeyField="OrderID" />
                        </ParentTableRelation>
                       
                         <Columns>
                            <telerik:GridCheckBoxColumn>
                               
                            </telerik:GridCheckBoxColumn>
                            <telerik:GridBoundColumn SortExpression="ProductName" HeaderText="Product Name" HeaderButtonType="TextButton"
                                DataField="ProductName">
                            </telerik:GridBoundColumn>
                            
                            <telerik:GridBoundColumn SortExpression="ProductID" HeaderText="Product ID" HeaderButtonType="TextButton"
                                DataField="ProductID">
                            </telerik:GridBoundColumn>
                            
                            <telerik:GridBoundColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton"
                                DataField="Quantity">
                            </telerik:GridBoundColumn>
                            
                            <telerik:GridBoundColumn SortExpression="Price" HeaderText="Price" HeaderButtonType="TextButton"
                                DataField="Price">
                            </telerik:GridBoundColumn>                      
                            
                            <telerik:GridBoundColumn SortExpression="Procurer" HeaderText="Procurer" HeaderButtonType="TextButton"
                                DataField="Procurer">
                            </telerik:GridBoundColumn>   
                                           
                        </Columns>
                    
                    </telerik:GridTableView>                 
                
                </DetailTables>
                
                <Columns>
                     
                    <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="Order ID" HeaderButtonType="TextButton"
                                DataField="OrderID">
                    </telerik:GridBoundColumn> 

                    <telerik:GridBoundColumn SortExpression="DateOfOrder" HeaderText="Date Of Order" HeaderButtonType="TextButton"
                                DataField="DateOfOrder">
                    </telerik:GridBoundColumn> 

                    <telerik:GridBoundColumn SortExpression="OrderName" HeaderText="Order Name" HeaderButtonType="TextButton"
                                DataField="OrderName">
                    </telerik:GridBoundColumn> 

                    <telerik:GridBoundColumn SortExpression="OrderAddress" HeaderText="Order Address" HeaderButtonType="TextButton"
                                DataField="OrderAddress">
                    </telerik:GridBoundColumn> 

                </Columns>

            </MasterTableView>
           
            <ClientSettings Scrolling-AllowScroll="true">
                <Scrolling AllowScroll="true" />
                <Resizing AllowRowResize ="true" EnableRealTimeResize="true" ResizeGridOnColumnResize="false" />
            </ClientSettings>

            <GroupingSettings ShowUnGroupButton="true" />

        </telerik:RadGrid>

        </telerik:RadAjaxPanel>

Answer 1

我看不懂阿拉伯语文本，所以我不确定您需要的东西有多相似（例如，您是否也需要 RTL 格式的东西），但我建议如下：

检查样本的渲染和控制结构
尝试添加您需要的控件并像任何简单的 HTML 元素一样重新排序它们

这里有一些例子：

只需添加一个复选框：

            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" Width="93px">
            <telerik:RadCheckBox runat="server" ID="rchb1" Text="label text goes here"></telerik:RadCheckBox>
                <%--<asp:Label ID="TreatmentCenter" Text="Treatment Center" runat="server"></asp:Label>--%>
                <telerik:RadDropDownList RenderMode="Classic" DefaultMessage="Select City" DataTextField="City" ID="DDL1" runat="server"></telerik:RadDropDownList>

注意：RadCheckbox 仅支持轻量级渲染模式，因此其他 Telerik 按钮也应该使用它们的轻量级模式，或者您应该使用 asp:Checkbox 并使用 asp:Label 的 AssociatedControlID。

在网格列上 - 由于 AutoGenerateColumns 为假，这些列很可能只出现在设计时表面上。在浏览器中尝试运行页面，看看是否是这种情况。如果它们仍然存在，请查看代码隐藏以防事件发生，例如 Page_Init 以编程方式将列添加到您的网格。

另请注意，分组会添加元素（列）以在视觉上区分分组。

至于按钮 - 只需将它们包裹在 div 个元素中，例如：

            <div>
                <telerik:RadButton ID="Confirm" Text="Confirm" runat="server" />
                <telerik:RadButton ID="MainPage" Text="Main Page" runat="server" />
            </div>
            <telerik:RadButton ID="PosterPrintTitle" Text="Poster Print Title" runat="server" />
            <telerik:RadButton ID="PrintInvoice" Text="Print Invoice" runat="server" />

Answer 2

GridCheckBoxColumn 用于位绑定数据。如果要使用复选框进行多选，则必须使用 GridTemplateColumn

<telerik:GridTemplateColumn UniqueName="CheckBoxColumn">
    <ItemTemplate>
        <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" />
    </ItemTemplate>
</telerik:GridTemplateColumn>

至于前两列，一旦您运行它们将不会呈现。它们是 DetailTables

的占位符

Answer 3

想通了

<Columns>
  <telerik:GridClientSelectColumn UniqueName="GridClientSelectColumn1" />
</Columns>

如何在我的 radGrid 中添加一个复选框列？以及如何显示展开按钮？

How can I add a check box column in my radGrid? And how do I show the expand button?

asp.net

telerik

grouping

radgrid