How to set ComponentArt datagrid to add bootstrap Grid system datagrid?

Question

I have a question about formatting using bootstrap's grid system...
from my code , I want to set Bootstrap Grid System

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

to my datagrid ,

my bootstrap css get from bootstrap.min.css

I try to set the code (col-md-4) in my code ,but I don't know how should I put it?

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>

Did you check out the docs? https://getbootstrap.com/docs/4.0/layout/grid/. But there is no bootstrap code in your code? — VDWWD, Oct 25 '18 at 07:14

score 0 · Answer 1 · answered Oct 25 '18 at 08:46

I don't know exactly wthat componentart:datagrid is, but if it is a custom control derived from a DataGrid then you cannot add Bootstrap classes to it since it will generate a table, not div's.

In order to make Bootstrap work you need to generate a structure as seen here. A GridView or DataGrid is unsuitable for that. You need something like this with a 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>

How to set ComponentArt datagrid to add bootstrap Grid system datagrid?

1 Answers1