<EjsMultiSelect @ref="MultiSelect" Placeholder="e.g. Australia" Value="@MultiVal"DataSource="@Country">
<MultiSelectFieldSettings Value="Name"></MultiSelectFieldSettings>
</EjsMultiSelect>
<EjsButton OnClick="Filter">Render Grid</EjsButton>
@if (CanRender)
{
<EjsGrid DataSource="@Orders" AllowPaging="true" AllowFiltering="true"Query=@Query>
<GridPageSettings PageSize="5"></GridPageSettings>
. . . . . . .
</EjsGrid>
}
>>>>>>>>>>>>>>>>>>>>>>>>>
public void Filter()
{
var Sel = MultiSelect.Text.Split(',');
if (Sel.Length > 1)
{
for (var I = 0; I < Sel.Length; I++)
{
if (I == 0) {
Pre = $"new ej.data.Predicate('CustomerID', 'equal','{Sel[I]}')";
}
else {
Pre = Pre + $".or('CustomerID', 'equal','{Sel[I]}')";
}
}
Query = $"new ej.data.Query().where({Pre})";
CanRender = true;
}
else
{
Query = $"new ej.data.Query().where('CustomerID', 'equal', '{Sel[0]}')";
CanRender = true;
}
StateHasChanged();
} |
<EjsMultiSelect Placeholder="e.g. Australia" @bind-Value="@MultiVal" DataSource="@Country">
<MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
</EjsMultiSelect>
<EjsButton OnClick="Filter">Render Grid</EjsButton>
@if (CanRender)
{
<EjsGrid DataSource="@Orders" AllowPaging="true" AllowFiltering="true" Query=@Query>
<GridPageSettings PageSize="5"></GridPageSettings>
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="yMd" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
</GridColumns>
</EjsGrid>
}
@code{
public List<Order> Orders { get; set; }
public bool CanRender = false;
public static string Pre;
public string Query;
EjsMultiSelect<string> MultiSelect { get; set; }
public int?[] MultiVal;
public class Countries
{
public string Name { get; set; }
public int Code { get; set; }
}
List<Countries> Country = new List<Countries>
{
new Countries() { Name = "ALFKI", Code = 1 },
new Countries() { Name = "ANATR", Code = 2 },
new Countries() { Name = "ANTON", Code = 3 },
new Countries() { Name = "BLONP", Code = 4 },
new Countries() { Name = "BOLID", Code = 5 }
};
public void Filter()
{
int?[] Sel = MultiVal;
if (Sel.Count() > 1)
{
for (var I = 0; I < Sel.Count(); I++)
{
if (I == 0) {
Pre = $"new ej.data.Predicate('EmployeeID', 'equal',{Sel[I]})";
}
else {
Pre = Pre + $".or('EmployeeID', 'equal',{Sel[I]})";
}
}
Query = $"new ej.data.Query().where({Pre})";
CanRender = true;
StateHasChanged();
}
else
{
Query = $"new ej.data.Query().where('EmployeeID', 'equal', {Sel[0]})";
CanRender = true;
StateHasChanged();
}
}
// "new ej.data.Predicate('CustomerID', 'equal','ALFKI').or('CustomerID', 'equal','BOLID')";
//public string query = $"new ej.data.Query().where({Pre})";
protected override void OnInitialized()
{
Orders = Enumerable.Range(1, 75).Select(x => new Order()
{
OrderID = 1000 + x,
EmployeeID = x,
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
Freight = 2.1 * x,
OrderDate = DateTime.Now.AddDays(-x),
}).ToList();
}
public class Order
{
public int? OrderID { get; set; }
public int? EmployeeID { get; set; }
public string CustomerID { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
}
} |