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.
Nancy | Davolio | Sales Representative | 12/8/1978 | 5/1/2005 |
|
Andrew | Fuller | Vice President, Sales | 2/19/1965 | 8/14/1992 |
|
Janet | Leverling | Sales Representative | 8/30/1985 | 4/1/2002 |
|
Margaret | Peacock | Sales Representative | 9/19/1973 | 5/3/1993 |
|
Steven | Buchanan | Sales Manager | 3/4/1955 | 10/17/1993 |
|
Michael | Suyama | Sales Representative | 7/2/1981 | 10/17/1999 |
|
Robert | King | Sales Representative | 5/29/1960 | 1/2/1994 |
|
Laura | Callahan | Inside Sales Coordinator | 1/9/1985 | 3/5/2004 |
|
Anne | Dodsworth | Sales Representative | 1/27/1980 | 11/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.
Nancy | Davolio | 12/8/1978 | Sales Representative | 5/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.
|
Andrew | Fuller | 2/19/1965 | Vice President, Sales | 8/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.
|
Janet | Leverling | 8/30/1985 | Sales Representative | 4/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.
|
|
|
|
|
Alfreds Futterkiste | Maria Anders | Germany | Berlin | Obere Str. 57 |
Ana Trujillo Emparedados y helados | Ana Trujillo | Mexico | México D.F. | Avda. de la Constitución 2222 |
Antonio Moreno Taquería | Antonio Moreno | Mexico | México D.F. | Mataderos 2312 |
Around the Horn | Thomas Hardy | UK | London | 120 Hanover Sq. |
Berglunds snabbköp | Christina Berglund | Sweden | Luleå | Berguvsvägen 8 |
Blauer See Delikatessen | Hanna Moos | Germany | Mannheim | Forsterstr. 57 |
Blondesddsl père et fils | Frédérique Citeaux | France | Strasbourg | 24, place Kléber |
Bólido Comidas preparadas | Martín Sommer | Spain | Madrid | C/ Araquil, 67 |
Bon app' | Laurence Lebihan | France | Marseille | 12, rue des Bouchers |
Bottom-Dollar Markets | Elizabeth Lincoln | Canada | Tsawassen | 23 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.
<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.
<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;
}