Cell Template

The Grid View control allows you to customize layouts of its visual elements using the template technology. This demo demonstrates the use of a template to display cells within the 'Details' column. The template contains a link labeled 'More Info'. Clicking this link displays a popup window containing additional information about an employee.

First NameLast NameTitleBirth DateHire DateDetails
NancyDavolioSales Representative12/8/19785/1/2005
AndrewFullerVice President, Sales2/19/19658/14/1992
JanetLeverlingSales Representative8/30/19854/1/2002
MargaretPeacockSales Representative9/19/19735/3/1993
StevenBuchananSales Manager3/4/195510/17/1993
MichaelSuyamaSales Representative7/2/198110/17/1999
RobertKingSales Representative5/29/19601/2/1994
LauraCallahanInside Sales Coordinator1/9/19853/5/2004
AnneDodsworthSales Representative1/27/198011/15/2004
<dx:BootstrapGridView runat="server" DataSourceID="DataSource1" KeyFieldName="EmployeeID">
    <ClientSideEvents Init="initMoreButton" EndCallback="initMoreButton" />
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="FirstName" />
        <dx:BootstrapGridViewDataColumn FieldName="LastName" />
        <dx:BootstrapGridViewDataColumn FieldName="Title" />
        <dx:BootstrapGridViewDataColumn FieldName="BirthDate" />
        <dx:BootstrapGridViewDataColumn FieldName="HireDate" />
        <dx:BootstrapGridViewDataColumn Caption="Details">
            <DataItemTemplate>
                <button type="button" class="btn btn-link more-info" data-key="<%# Container.KeyValue %>">More Info...</button>
            </DataItemTemplate>
        </dx:BootstrapGridViewDataColumn>
    </Columns>
    <CssClasses Table="grid-table-with-template" />
    <SettingsPager Mode="ShowAllRecords" />
</dx:BootstrapGridView>
<dx:ASPxCallback runat="server" ID="Callback1" ClientInstanceName="callback1" OnCallback="Callback1_Callback"></dx:ASPxCallback>

Preview Template

Preview Rows are used to display large memo fields or custom data across all the columns within a Grid View. This demo illustrates how to create a template to display images along with textual content within preview rows.

First NameLast NameBirth DateTitleHire Date
NancyDavolio12/8/1978Sales Representative5/1/2005
Nancy received a BA degree in psychology from Colorado State University in 2000. She also completed "The Art of the Cold Call" course. She is a member of Toastmasters International.
AndrewFuller2/19/1965Vice President, Sales8/14/1992
Andrew received his BTS commercial in 1987 and a Ph.D. in international marketing at the University of Dallas in 1994. He speaks French and Italian fluently, and reads German. He joined the company as a sales representative. After that, he was promoted to sales manager in January 2005 and vice president of sales in March 2006. Andrew is a member of the Sales Management Round table, Seattle Chamber of Commerce, and Pacific Rim Importers Association.
JanetLeverling8/30/1985Sales Representative4/1/2002
Janet received a BS degree in chemistry at Boston College in 2006. She also completed a certificate program in food retailing management. Janet was hired as a sales associate in 2013 and promoted to sales representative in February 2014.
<dx:BootstrapGridView runat="server" DataSourceID="DataSource2" KeyFieldName="EmployeeID" PreviewFieldName="Notes">
    <Settings ShowPreview="true" />
    <Templates>
        <PreviewRow>
            <div class="media">
                <div class="media-left">
                    <dx:BootstrapBinaryImage ID="BinaryImage" runat="server" Value='<%# Eval("Photo") %>' />
                </div>
                <div class="media-body">
                    <asp:Literal runat="server" Text="<%# Container.Text %>"></asp:Literal>
                </div>
            </div>
        </PreviewRow>
    </Templates>
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="FirstName" />
        <dx:BootstrapGridViewDataColumn FieldName="LastName" />
        <dx:BootstrapGridViewDataColumn FieldName="BirthDate" />
        <dx:BootstrapGridViewDataColumn FieldName="Title" />
        <dx:BootstrapGridViewDataColumn FieldName="HireDate" />
    </Columns>
</dx:BootstrapGridView>

Data Attributes in Header

This demo demonstrates the use of the data-toggle attribute to declaratively assign an action to a control displayed within a column header template. In this demo, a button's data-toggle attribute is set to gridview-column-filterpopup to show the header filter popup.

Company Name
Contact Name
Country
City
Address
Alfreds FutterkisteMaria AndersGermanyBerlinObere Str. 57
Ana Trujillo Emparedados y heladosAna TrujilloMexicoMéxico D.F.Avda. de la Constitución 2222
Antonio Moreno TaqueríaAntonio MorenoMexicoMéxico D.F.Mataderos 2312
Around the HornThomas HardyUKLondon120 Hanover Sq.
Berglunds snabbköpChristina BerglundSwedenLuleåBerguvsvägen 8
Blauer See DelikatessenHanna MoosGermanyMannheimForsterstr. 57
Blondesddsl père et filsFrédérique CiteauxFranceStrasbourg24, place Kléber
Bólido Comidas preparadasMartín SommerSpainMadridC/ Araquil, 67
Bon app'Laurence LebihanFranceMarseille12, rue des Bouchers
Bottom-Dollar MarketsElizabeth LincolnCanadaTsawassen23 Tsawassen Blvd.
<dx:BootstrapGridView runat="server" KeyFieldName="CustomerID" DataSourceID="DataSource3">
    <Settings ShowHeaderFilterButton="true" />
    <Templates>
        <Header>
            <div>
                <a data-toggle="gridview-column-sort" aria-label="First Name header column. Sorted ascending" href="javascript:;"><%# Container.Column.Caption %></a>
                <div>
                    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="gridview-column-filterpopup">
                        <%# GetCurrentFilter(Container.Column as BootstrapGridViewDataColumn) %>
                        <span class="caret"></span>
                    </button>
                </div>
            </div>
        </Header>
    </Templates>
    <Columns>
        ...
    </Columns>
</dx:BootstrapGridView>

Data Attributes in Row

This demo demonstrates the use of the data-toggle attribute to declaratively assign an action to a control displayed within a data item template. In this demo, each data row displays custom Edit and Delete buttons. The Edit button's data-toggle attribute is set to gridview-datarow-edit allowing the button to start editing the current row on click. Likewise, the Delete button's data-toggle attribute is set to gridview-datarow-delete allowing the button to delete the current row. Additionally, the Title Panel template contains a custom button whose data-toggle attribute is set to gridview-newrow allowing the button to create a new data row.

Customers
Company NameContact NameCountryCityAddress
Alfreds Futterkiste Maria AndersGermanyBerlinObere Str. 57
Ana Trujillo Emparedados y helados Ana TrujilloMexicoMéxico D.F.Avda. de la Constitución 2222
Antonio Moreno Taquería Antonio MorenoMexicoMéxico D.F.Mataderos 2312
Around the Horn Thomas HardyUKLondon120 Hanover Sq.
Berglunds snabbköp Christina BerglundSwedenLuleåBerguvsvägen 8
Blauer See Delikatessen Hanna MoosGermanyMannheimForsterstr. 57
Blondesddsl père et fils Frédérique CiteauxFranceStrasbourg24, place Kléber
Bólido Comidas preparadas Martín SommerSpainMadridC/ Araquil, 67
Bon app' Laurence LebihanFranceMarseille12, rue des Bouchers
Bottom-Dollar Markets Elizabeth LincolnCanadaTsawassen23 Tsawassen Blvd.
<dx:BootstrapGridView runat="server" KeyFieldName="CustomerID" DataSourceID="DataSource3">
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName">
            <DataItemTemplate>
                <%# Eval("CompanyName") %>
                <button type="button" class="btn btn-link" data-toggle="gridview-datarow-edit">
                    <span class="fa fa-pencil"></span>
                </button>
                <button type="button" class="btn btn-link" data-toggle="gridview-datarow-delete">
                    <span class="fa fa-trash"></span>
                </button>
            </DataItemTemplate>
        </dx:BootstrapGridViewDataColumn>
        ...
    </Columns>
    <Settings ShowTitlePanel="true" />
    <Templates>
        <TitlePanel>
            Customers
            <button type="button" class="btn btn-link" data-toggle="gridview-newrow">
                <span class="fa fa-plus"></span>
            </button>
        </TitlePanel>
    </Templates>
    <SettingsDataSecurity AllowDelete="true" AllowEdit="true" AllowInsert="true" />
</dx:BootstrapGridView>
Screen Size
Color Themes
Demo QR Code