This example illustrates how the layout of editor list items can be modified by creating a template for the dropdown grid’s data rows via the GridViewProperties.Templates.DataRow property (GridViewTemplates.DataRow).
Note that the incremental filtering functionality (enabled via the ASPxGridLookup.IncrementalFilteringMode property) works correctly when list item templating is used.
In this demo, incremental filtering is performed over the values of the first two data columns defined within the editor’s ASPxGridLookup.Columns collection - ‘First Name’ and ‘Last Name’. These columns are pointed by the ASPxGridLookup.TextFormatString property using indexed placeholders ({0} and {1}) that correspond to column indexes within the ASPxGridLookup.Columns collection. Thus, the ASPxGridLookup.TextFormatString property defines the format for displaying the selected item’s value within the edit box (‘First Name’ ‘Last Name’) and serves as a column pointer and format designator for the incremental filtering functionality.
protected void Page_Load(object sender, EventArgs e) {
GridLookup.GridView.Width = 300;
GridLookup.GridView.DataBound += grdSelectFilters_SelectFilters_DataBound;
UpdateGridViewHeigth();
}
protected void grdSelectFilters_SelectFilters_DataBound(object sender, EventArgs e) {
UpdateGridViewHeigth();
}
protected void UpdateGridViewHeigth() {
if (GridLookup.GridView.VisibleRowCount > 2) {
GridLookup.GridView.Settings.ShowVerticalScrollBar = true;
GridLookup.GridView.Settings.VerticalScrollableHeight = 300;
}
else
GridLookup.GridView.Settings.ShowVerticalScrollBar = false;
}
<asp:Content ID="Content1" ContentPlaceHolderID="CustomHeadHolder" runat="server">
<style type="text/css">
.templateTable td.caption
{
font-weight: bold;
padding-left: 5px;
padding-top: 2px;
}
.templateContainer
{
margin: 10px;
height: 100px;
border: solid 1px #C2D4DA;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentHolder" runat="server">
<dx:ASPxLabel ID="CaptionLabel" runat="server" Text="Select employee (incremental filtering is on):" AssociatedControlID="GridLookup" />
<div class="TopPadding">
<dx:ASPxGridLookup ID="GridLookup" runat="server" DataSourceID="AccessDataSource" KeyFieldName="EmployeeID" Width="200px"
SelectionMode="Single" IncrementalFilteringMode="Contains" TextFormatString="{0} {1}">
<Columns>
<dx:GridViewDataColumn FieldName="FirstName" />
<dx:GridViewDataColumn FieldName="LastName" />
</Columns>
<GridViewProperties>
<Templates>
<DataRow>
<div class="templateContainer">
<div style="float: left;">
<dx:ASPxBinaryImage ID="PhotoBinaryImage" runat="server" Width="100px" Height="100px" Value='<%# Eval("Photo") %>' />
</div>
<table class="templateTable">
<tr><td class="caption">First Name:</td><td><dx:ASPxLabel ID="FirstNameLabel" runat="server" Text='<%# Eval("FirstName") %>' /></td></tr>
<tr><td class="caption">Last Name:</td><td><dx:ASPxLabel ID="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>' /></td></tr>
<tr><td class="caption">Birth Date:</td><td><dx:ASPxLabel ID="BirthDateLabel" runat="server" Text='<%# String.Format("{0:d}",Eval("BirthDate")) %>' /></td></tr>
<tr><td class="caption">City:</td><td><dx:ASPxLabel ID="CityLabel" runat="server" Text='<%# Eval("City") %>' /></td></tr>
<tr><td class="caption">Region:</td><td><dx:ASPxLabel ID="RegionLabel" runat="server" Text='<%# Eval("Region") %>' /></td></tr>
</table>
</div>
</DataRow>
</Templates>
<Settings ShowColumnHeaders="False" />
<SettingsPager Mode="ShowAllRecords" />
<SettingsBehavior EnableRowHotTrack="True" />
</GridViewProperties>
</dx:ASPxGridLookup>
</div>
<asp:AccessDataSource ID="AccessDataSource" runat="server" DataFile="~/App_Data/nwind.mdb"
SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [BirthDate], [City], [Region], [Photo] FROM [Employees] WHERE [Photo] is not null" />