<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();
        });
    });
}

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

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

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

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