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仅支持轻量级RenderMode，因此其他Telerik按钮也应该使用轻量级模式，或者您应该使用asp：Checkbox并使用asp：Label的AssociatedControlID。

在网格列上 - 由于AutoGenerateColumns为false，因此这些列很可能仅出现在设计时表面上。尝试在浏览器中运行该页面以查看是否是这种情况。如果它们仍然存在，请查看代码隐藏，例如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中添加复选框列？如何显示展开按钮？

3 个答案: