c# - 如何设置ComponentArt datagrid添加bootstrap Grid系统datagrid？

Question

我对使用 bootstrap 的网格系统进行格式化有疑问...
在我的代码中，我想设置引导网格系统

(Mobile – xs ( < 768px )、  Tablet – sm ( 768~991px )、 Desktop – md ( 992~1200px )、Large Desktop - lg ( >= 1200px )) like <div class="col-md-8">

到我的数据网格，

我的 Bootstrap css 来自 bootstrap.min.css

我尝试在我的代码中设置代码 (col-md-4)，但我不知道应该如何放置？

GridView :

<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/css/bootstrap.min.css"></script>

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:Timer ID="Timer1" runat="server" Interval="300000" OnTick="Timer1_Tick">
    </asp:Timer>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">
        <ContentTemplate>
            <componentart:datagrid id="Grid1"
                cssclass="grid"
                groupingnotificationtext="<center>Document</center>"
                allowtextselection="true"
                enableviewstate="true"
                runningmode="Client"
                showheader="false"
                showfooter="true"
                runat="server"
                width="100%"
                pagesize="4">
                    <Levels>                                            
                      <ComponentArt:GridLevel 
                                ShowTableHeading="false"
                                ShowSelectorCells="false"
                                RowCssClass="row"
                                HoverRowCssClass="row-h"
                                SelectedRowCssClass="row-s"
                                SortImageWidth="12"
                                SortImageHeight="22">  

                        <Columns>     
                              <ComponentArt:GridColumn HeadingText="ID" Align="Center" Width="35" AllowSorting="False" DataCellClientTemplateId="IDTemplate" ContextMenuHotSpotCssClass="col-mnu" ContextMenuHotSpotHoverCssClass="col-mnu-h" ContextMenuHotSpotActiveCssClass="col-mnu-d" />              
                              <ComponentArt:GridColumn DataField="no" HeadingText="NO" Width="60" Align="Center" AllowSorting="True" />  
                              <ComponentArt:GridColumn DataField="class" HeadingText="Class" Width="155" Align="Left" AllowSorting="True" TextWrap="True" />                
                              <ComponentArt:GridColumn DataField="level" HeadingText="Level" Width="35" Align="Center" DataCellClientTemplateId="LevelTemplate" />               
                              <ComponentArt:GridColumn DataField="start" HeadingText="Start" Width="125" Align="Center" TextWrap="true" />                   
                        </Columns>      
                      </ComponentArt:GridLevel>
                    </Levels>                               
                    <ClientTemplates>
                       <ComponentArt:ClientTemplate ID="IDTemplate">
                          <div style="text-align: center;">## DataItem.Index + 1 ##</div>
                       </ComponentArt:ClientTemplate>            

                        </ClientTemplates>                                       
                  </componentart:datagrid>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
        </Triggers>
    </asp:UpdatePanel>
</form>

Answer 1

我不完全知道 componentart:datagrid 是什么，但是如果它是从 DataGrid 派生的自定义控件，那么您不能向它添加 Bootstrap 类，因为它会生成一个表，而不是 div 的.

为了使 Bootstrap 工作，您需要生成一个结构，如图 here . GridView 或 DataGrid 不适合这样做。您需要 Repeater 这样的东西。

<div class="container">
    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <div class="row">
                <div class="col-md-4">
                    <%# Eval("ID") %>
                </div>
                <div class="col-md-4">
                    <%# Eval("no") %>
                </div>
                <div class="col-md-4">
                    <%# Eval("class") %>
                </div>
                <div class="col-md-4">
                    <%# Eval("level") %>
                </div>
                <div class="col-md-4">
                    <%# Eval("start") %>
                </div>
            </div>
        </ItemTemplate>
    </asp:Repeater>
</div>