时间戳

首页 > 解决方案 > 如何设置 ComponentArt 数据网格以添加引导网格系统数据网格？

c# - 如何设置 ComponentArt 数据网格以添加引导网格系统数据网格？

问题描述

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

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

到我的数据网格，

我的引导 css 来自bootstrap.min.css

我尝试在我的代码中设置代码（col-md-4），但我不知道该怎么写？

网格视图 ：

<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>

标签： c#asp.netdatagridbootstrap-gridcomponentart

解决方案

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

为了使 Bootstrap 工作，您需要生成一个结构，如此处所示。GridView 或 DataGrid 不适合。你需要这样的东西和中继器。

<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>

推荐阅读