Как установить DataGrid ComponentArt для добавления сетки данных начальной загрузки Grid? - PullRequest
Новая
       30

Как установить DataGrid ComponentArt для добавления сетки данных начальной загрузки Grid?

0 голосов
/ 25 октября 2018

У меня есть вопрос о форматировании с использованием системы сетки начальной загрузки ...
из моего кода, я хочу установить Bootstrap Grid System 

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

в мою сетку данных,

mybootstrap css get from 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>

1 Ответ

0 голосов
/ 25 октября 2018

Я точно не знаю, что такое 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>
...