Grid formatting
Hi,
We're trying to do something similar to this - is this possible to add a daterange, filter and sort on the top row?
SIGN IN To post a reply.
1 Reply
Hi Alex,
Thanks for contacting Syncfusion support.
Query: “We're trying to do something similar to this - is this possible to add a daterange, filter and sort on the top row?”
We have achieved your requirement using Toolbar template feature. Using Toolbar template feature we have rendered the DatePicker and DropDownList above the Grid header. We have used Query property to filter the date column using the values from DatePickers and SortColumn method of EjsGrid to sort the column.
Refer the below code example.
|
<EjsGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true" Height="200" @ref="Grid">
<GridEvents TValue="Order"></GridEvents>
<EjsToolbar>
<ToolbarItems>
<ToolbarItem Type="ItemType.Input" Align="ItemAlign.Left">
<Template>
From:
<EjsDatePicker @ref="From" TValue="DateTime?" Placeholder='Choose a Date'>
<DatePickerEvents ValueChange="@((args)=>OnDateChange(args,"from"))" TValue="DateTime?"></DatePickerEvents>
</EjsDatePicker>
</Template>
</ToolbarItem>
<ToolbarItem Type="ItemType.Input" Align="ItemAlign.Left">
<Template>
To:
<EjsDatePicker @ref="To" TValue="DateTime?" Placeholder='Choose a Date'>
<DatePickerEvents ValueChange="@((args)=>OnDateChange(args,"to"))" TValue="DateTime?"></DatePickerEvents>
</EjsDatePicker>
</Template>
</ToolbarItem>
<ToolbarItem Type="ItemType.Input" Align="ItemAlign.Center">
<Template>
FilterBy:
<EjsDropDownList TValue="string" TItem="Select" DataSource=@LocalData Width="200">
<DropDownListFieldSettings Text="text" Value="text"> </DropDownListFieldSettings>
<DropDownListEvents TValue="string" ValueChange="OnFilterChange"> </DropDownListEvents>
</EjsDropDownList>
</Template>
</ToolbarItem>
<ToolbarItem Type="ItemType.Input" Align="ItemAlign.Right">
<Template>
SortBy:
<EjsDropDownList TValue="string" TItem="Select" DataSource=@LocalData Width="200">
<DropDownListFieldSettings Text="text" Value="text"> </DropDownListFieldSettings>
<DropDownListEvents TValue="string" ValueChange="OnChange"> </DropDownListEvents>
</EjsDropDownList>
</Template>
</ToolbarItem>
</ToolbarItems>
</EjsToolbar>
<GridColumns>
. . . . . . . .
</GridColumns>
</EjsGrid>
@code{
EjsDatePicker<DateTime?> From;
EjsDatePicker<DateTime?> To;
EjsGrid<Order> Grid;
public List<Order> Orders { get; set; }
public void OnDateChange(ChangedEventArgs<DateTime?> Args, string Col)
{
var pre = new WhereFilter();
if (Col == "from")
{
if (To.Value != null)
{
var predicate = new List<WhereFilter>();
predicate.Add(new WhereFilter() { Condition = "or", Field = "OrderDate", value = Args.Value, Operator = "greaterthanorequal" });
predicate.Add(new WhereFilter() { Condition = "or", Field = "OrderDate", value = To.Value, Operator = "lessthanorequal" });
pre = WhereFilter.And(predicate);
Grid.Query = new Query().Where(pre);
}
}
else if (Col == "to")
{
if (From.Value != null)
{
var predicate = new List<WhereFilter>();
predicate.Add(new WhereFilter() { Condition = "or", Field = "OrderDate", value = From.Value, Operator = "greaterthan" });
predicate.Add(new WhereFilter() { Condition = "or", Field = "OrderDate", value = Args.Value, Operator = "lessthan" });
pre = WhereFilter.And(predicate);
Grid.Query = new Query().Where(pre);
}
}
}
public class Select
{
public string text { get; set; }
}
List<Select> LocalData = new List<Select>
{
new Select() { text = "OrderID"},
. . .. . .
};
public void OnChange(Syncfusion.EJ2.Blazor.DropDowns.ChangeEventArgs<string> args)
{
this.Grid.SortColumn(args.Value, SortDirection.Ascending);
}
}
|
Refer the below screenshot for the output
 |
Kindly download the sample from below
Refer our UG documentation for your reference
Kindly get back to us if you have further queries.
Regards,
Vignesh Natarajan.
SIGN IN To post a reply.
