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 'Details'. Clicking this link displays a popup window containing additional information about an employee.

First Name Last Name Title Birth Date Hire Date  
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="EmployeesDataSource" 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 FieldName="Notes" Visible="false" />
        <dx:BootstrapGridViewDataColumn Caption="" Width="50px" Settings-AllowDragDrop="False">
            <DataItemTemplate>
                <button type="button" class="btn btn-link more-info" data-key="<%# Container.VisibleIndex %>">Details...</button>
            </DataItemTemplate>
        </dx:BootstrapGridViewDataColumn>
    </Columns>
    <SettingsPager Mode="ShowAllRecords" />
</dx:BootstrapGridView>
<dx:BootstrapPopupControl runat="server" ClientInstanceName="detailsModal" PopupAnimationType="None" CloseAnimationType="None">
    <SettingsAdaptivity Mode="Always" VerticalAlign="WindowCenter" />
</dx:BootstrapPopupControl>
function initMoreButton(s, e) {
    $(s.GetMainElement()).find(".more-info").click(function() {
        if(s.InCallback()) return;
        var $btn = $(this);
        s.GetRowValues($btn.attr("data-key"), 'FirstName;LastName;Title;Notes', function (values) {
            detailsModal.SetHeaderText(values[0] + " " + values[1] + " - " + values[2]);
            detailsModal.SetContentHtml(values[3]);
            detailsModal.Show();
        });
    });
}

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 Name Last Name Birth Date Title Hire 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="EmployeesDataSource" KeyFieldName="EmployeeID" PreviewFieldName="Notes">
    <Settings ShowPreview="true" />
    <Templates>
        <PreviewRow>
            <div class="d-flex">
                <dx:BootstrapBinaryImage ID="BinaryImage" runat="server" Value='<%# Eval("Photo") %>' CssClasses-Control="pe-3" />
                <asp:Literal runat="server" Text="<%# Container.Text %>"></asp:Literal>
            </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>
    <SettingsPager PageSize="3"></SettingsPager>
</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="DataSourceDataToggleInColumns">
    <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-secondary dropdown-toggle" type="button" data-toggle="gridview-column-filterpopup">
                        <%# GetCurrentFilter(Container.Column as BootstrapGridViewDataColumn) %>
                        <span class="caret"></span>
                    </button>
                </div>
            </div>
        </Header>
    </Templates>
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" Caption="Company Name"></dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewDataColumn FieldName="ContactName" Caption="Contact Name"></dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewDataColumn FieldName="Country" Caption="Country"></dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewDataColumn FieldName="City" Caption="City"></dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewDataColumn FieldName="Address" Caption="Address"></dx:BootstrapGridViewDataColumn>
    </Columns>
</dx:BootstrapGridView>
protected string GetCurrentFilter(BootstrapGridViewDataColumn column) {
    return string.IsNullOrEmpty(column.FilterExpression) ? "Filter" : column.FilterExpression;
}

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 Name Contact Name Country City Address
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="DataSourceDataToggleInRows">
    <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-alt"></span>
                </button>
                <button type="button" class="btn btn-link" data-toggle="gridview-datarow-delete">
                    <span class="fa fa-trash"></span>
                </button>
            </DataItemTemplate>
        </dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewDataColumn FieldName="ContactName"></dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewDataColumn FieldName="Country"></dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewDataColumn FieldName="City"></dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewDataColumn FieldName="Address"></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>

Sparkline Column

This demo demonstrates how to display the Bootstrap Sparkline within a grid cell in browse mode. In this demo, each data row displays a sparkline illustrating sales dynamics. Since the amount of data presented by a single sparkline is large and the DataItemTemplate can be rebuilt several times per request, it is recommended that you store the sparkline data in a cache variable after obtaining it from the data source. The BootstrapGridView.EnableRowsCache property should be set to False to prevent incorrect deserialization of a custom object used as a BootstrapSparkLine data source.

Product Name Unit Price Units On Order Reorder Level 2023 sales dynamics
Chai18010
Chang194025
Aniseed Syrup107025
Chef Anton's Cajun Seasoning2200
Chef Anton's Gumbo Mix2100
<dx:BootstrapGridView runat="server" DataSourceID="ProductsDataSource" KeyFieldName="ProductID" EnableRowsCache="false">
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="ProductName"></dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewDataColumn FieldName="UnitPrice" Width="150px"></dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewDataColumn FieldName="UnitsOnOrder" Width="150px"></dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewDataColumn FieldName="ReorderLevel" Width="150px"></dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewDataColumn Width="250px" Caption="2023 sales dynamics">
            <DataItemTemplate>
                <dx:BootstrapSparkline  runat="server" LineColor="Orange" ArgumentField="OrderID" ValueField="Quantity" DataSource="<%# GetSparklineData((int)Container.KeyValue, Container) %>">
                </dx:BootstrapSparkline>
            </DataItemTemplate>
        </dx:BootstrapGridViewDataColumn>
    </Columns>
    <SettingsPager PageSize="5" ></SettingsPager>
</dx:BootstrapGridView>
Dictionary<int, object> sparklineDataCache = new Dictionary<int, object>();
public object GetSparklineData(int key, GridViewDataItemTemplateContainer container) {
    List<int> currentPageKeys = container.Grid.GetCurrentPageRowValues(container.Grid.KeyFieldName).Cast<int>().ToList();
    if(!sparklineDataCache.ContainsKey(key) ) {
        var context = new NorthwindContextSL();
        var year2023 = new DateTime(2023, 1, 1);
        var year2024 = new DateTime(2024, 1, 1);
        var query = from orders in context.Orders
                    join orderDetail in context.OrderDetails on orders.OrderID equals orderDetail.OrderID
                    where currentPageKeys.Contains(orderDetail.ProductID) && orders.OrderDate > year2023 && orders.OrderDate < year2024
                    select new { ProductID = orderDetail.ProductID, OrderID = orderDetail.OrderID, Quantity = orderDetail.Quantity };
        var list = query.ToList().GroupBy(g => g.ProductID).ToList();
        foreach(var item in list) {
           sparklineDataCache[item.Key] = item.ToList();
        }
    }
    if(sparklineDataCache.ContainsKey(key)) {
        return sparklineDataCache[key];
    }
    return null;
}
Screen Size
Color Themes
Demo QR Code