The DataFilter control can be bound to any data-aware control or to a model/custom collection. When you bind the DataFilter control with a data-aware control, fields are generated. On the basis of these fields present in the data source, different filters are automatically generated in the DataFilter control. These filters are ThreeStateFilter, RangeFilter, DateRangeFilter and ChecklistFilter. However, the filtering criterias are not generated with these filters, for example, no minimum and maximum values are generated for RangeFilter and empty checklist is generated for ChecklistFilter. So, you need to customize the auto generated filters for defining the filtering criterias using FilterAutoGenerating property of the C1DataFilter class to trigger the FilterAutoGenerating event.
To bind the DataFilter control with a custom collection, follow these steps:
Create a class named Car which contains the collection which is to be bound to DataFilter and FlexGrid.
| C# |
Copy Code
|
|---|---|
public class Car
{
public Car()
{
Random gen = new Random();
int range = 25 * 365;
DateProductionLine = DateTime.Today.AddDays(-gen.Next(range));
IsSportVersion = gen.NextDouble() > 0.5;
IsLimitedSeries = gen.NextDouble() > 0.5 ? true : gen.NextDouble() > 0.5? false: null;
}
public string Brand { get; set; }
public string Model { get; set; }
public double Price { get; set; }
public string Category { get; set; }
public string TransmissSpeedCount { get; set; }
public string TransmissAutomatic { get; set; }
public DateTime DateProductionLine { get; set; }
public bool IsSportVersion{ get; set; }
public bool? IsLimitedSeries{ get; set; }
[Browsable(false)]
public int ID { get; set; }
[Browsable(false)]
public Int16 HP { get; set; }
[Browsable(false)]
public double Liter { get; set; }
[Browsable(false)]
public Int16 Cyl { get; set; }
[Browsable(false)]
public Int16 MPG_City { get; set; }
[Browsable(false)]
public Int16 MPG_Highway { get; set; }
[Browsable(false)]
public string Description { get; set; }
[Browsable(false)]
public string Hyperlink { get; set; }
[Browsable(false)]
#if BLAZOR
public Lazy<string> Picture { get; set; }
#else
public byte[] Picture { get; set; }
#endif
}
}
|
|
Use the following code to add DataFilter and FlexGrid controls to your app and bind each of them to data using ItemsSource property from their respective classes. Now, set the FilterAutoGenerating property for the DataFilter to subscribe to the FilterAutoGenerating event which gets triggered when the DataFilter is getting rendered so that the auto generated filters can be customized for defining the filtering criterias such as the minimum /maximum values for the RangeFilter and the checklist items for the CheckListFilter. Then, you can set the AutoGeneratingColumn property of the FlexGrid control to subscribe to the OnAutoGeneratingColumn event which occurs when an auto-generated is being created.
| Index.razor |
Copy Code
|
|---|---|
@using Localization @using C1.Blazor.DataFilter @using C1.Blazor.Grid @using C1.Blazor.Accordion @using System.Globalization <h3>Car List</h3> <br /> <section class="sampleDataFilterSection"> <div class="filtersSection"> <C1DataFilter @ref="dataFilter" FilterAutoGenerating="@FilterAutoGenerating" ItemsSource="@data" Style="@("max-height: inherit")"> </C1DataFilter> </div> <div class="dataSection"> <FlexGrid AutoGeneratingColumn="OnAutoGeneratingColumn" ItemsSource="@data" HeadersVisibility="GridHeadersVisibility.All" Style="@("max-height: inherit")"> </FlexGrid> </div> </section> |
|
Then, add the following code in the event handler of the FilterAutoGenerating event which provides the checklist items for the three filters namely “Brand”, “TransmissSpeedCount” and "TransmissAutomatic", and sets the maximum and minimum value for the price filter. Defining these filters allows you to filter the cars listing by a specific brand, transmission speed, automatic transmission or price which are the basic criterias used to view a car listing.
| Index.razor |
Copy Code
|
|---|---|
@code{
C1DataFilter dataFilter { get; set; }
C1.DataCollection.C1DataCollection<Car> data { get; set; }
protected override void OnInitialized()
{
var carsTable = DataProvider.GetCarTable();
data = new C1.DataCollection.C1DataCollection<Car>(DataProvider.GetCarDataCollection(carsTable));
}
void OnAutoGeneratingColumn(object sender, GridAutoGeneratingColumnEventArgs args)
{
if (args.Property.Name == nameof(Car.Picture))
{
args.Column.CellTemplate = target => builder =>
{
builder.OpenElement(0, "img");
builder.AddAttribute(1, "style", "max-height: 35px");
builder.AddAttribute(2, "src", $"data:image/bmp;base64, {((Lazy<string>)target).Value}");
builder.CloseElement();
};
}
}
void FilterAutoGenerating(object sender, FilterAutoGeneratingEventArgs e)
{
// Show SearchBox for Brand Filters for CheckList Filter [String Type]
if (e.Property.Name == nameof(Car.Brand))
{
var filter = e.Filter as ChecklistFilter;
filter.ShowSearchBox = true;
}
// Set the Custom values for the InputNumbers and Increment Count [Number Types]
else if (e.Property.Name == nameof(Car.Price))
{
var priceFilter = (RangeFilter)e.Filter;
priceFilter.Maximum = data.Max(o => ((Car)o).Price);
priceFilter.Minimum = data.Min(o => ((Car)o).Price);
priceFilter.Increment = 1000;
priceFilter.Format = "F0";
}
else if (e.Property.Name == nameof(Car.TransmissSpeedCount))
{
var filter = e.Filter as ChecklistFilter;
filter.SelectionMode = SelectionMode.Single;
}
else if (e.Property.Name == nameof(Car.TransmissAutomatic))
{
var filter = e.Filter as ChecklistFilter;
var unset = filter.Items.FirstOrDefault(i => string.IsNullOrEmpty(i.DisplayValue));
if (unset != null)
{
unset.DisplayValue = C1.Blazor.DataFilter.Resources.Resource.Null;
}
}
}
}
|
|
