|
<EjsSchedule @ref="LookSchedule" TValue="ViewModel.Look" Height="100%" Width="100%" CurrentView="View.Month" AllowDragAndDrop="false" AllowResizing="false"
RowAutoHeight="true" FirstDayOfWeek="1" ShowQuickInfo="false">
<ScheduleWorkHours Highlight="false" />
<ScheduleEvents TValue="ViewModel.Look" EventRendered="OnEventRenderedHandler" OnPopupClose="PopupClose" />
<ScheduleEventSettings TValue="ViewModel.Look" AllowAdding="false" AllowDeleting="false" EnableTooltip="true">
<ChildContent>
<EjsDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></EjsDataManager>
</ChildContent>
<Template>
@{
var entity = (context as ViewModel.Look);
<div class="template-wrap">
<div class="subject">@($"{entity.StartTime.ToUniversalTime().ToString("hh:mm tt")} - {entity.Craft} - {entity.Status}")</div>
</div>
}
</Template>
<TooltipTemplate>
@{
var entity = (context as ViewModel.Look);
<div class="tooltip-wrap">
<div class="content-area">
<div class="name">@entity.Craft</div>
<div class="city">@entity.Site</div>
<div class="time">@($"{entity.StartTime.ToUniversalTime().ToString("hh:mm tt")} - {entity.EndTime.ToUniversalTime().ToString("hh:mm tt")}")</div>
<div class="time">@($"{TimeSpan.FromSeconds(entity.Duration).ToString(@"mm")} min")</div>
</div>
</div>
}
</TooltipTemplate>
</ScheduleEventSettings>
...
</EjsSchedule>
@code {
public class CustomAdaptor : DataAdaptor
{
public async override Task<object> ReadAsync(DataManagerRequest dataManagerRequest, string keyValue = null)
{
// you can define the own customization here instead of using Navigating event
var data = await Index.GetDataSource();
return dataManagerRequest.RequiresCounts ? new DataResult() { Result = data, Count = data.Count() } : (object)data; ;
}
}
} |
|
@using Syncfusion.EJ2.Blazor.Data;
@using Syncfusion.EJ2.Blazor.DropDowns
...
<EjsDropDownList TValue="string" TItem="Type" Placeholder="Select a game" DataSource="@LocalData">
<DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
<DropDownListEvents TValue="string" ValueChange="OnChangeValue"></DropDownListEvents>
</EjsDropDownList>
<EjsSchedule @ref="LookSchedule" TValue="ViewModel.Look" Height="100%" Width="100%" CurrentView="View.Month" AllowDragAndDrop="false" AllowResizing="false"
RowAutoHeight="true" FirstDayOfWeek="1" ShowQuickInfo="false">
<ScheduleWorkHours Highlight="false" />
<ScheduleEventSettings TValue="ViewModel.Look" Query="@ScheduleQuery" AllowAdding="false" AllowDeleting="false" EnableTooltip="true">
<ChildContent>
<EjsDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></EjsDataManager>
</ChildContent>
...
</ScheduleEventSettings>
</EjsSchedule>
...
@code{
public class Type
{
public string ID { get; set; }
public string Text { get; set; }
}
public List<Type> LocalData = new List<Type> {
new Type() { ID= "Type1", Text= "Paris" },
new Type() { ID= "Type2", Text= "Germany" }
};
public void OnChangeValue(ChangeEventArgs<string> args) // you can use filter the event based on dropdownvalue
{
if (args.Value != null)
{
Type items = JsonConvert.DeserializeObject<Type>(args.ItemData.ToString());
ScheduleQuery = new Query().Where(new WhereFilter() { Field = "Subject", Operator = "equal", value = items.Text }); ;
}
}
public class CustomAdaptor : DataAdaptor
{
public async override Task<object> ReadAsync(DataManagerRequest dm, string keyValue = null) // Get filtered data by using the instance of datamanager request
{
var data = await Index.GetDataSource() as IEnumerable;
await Task.Delay(100); //To mimic asynchronous operation, we delayed this operation using Task.Delay
if (dm.Where != null && dm.Where.Count > 0)
{
// Filtering
data = DataOperations.PerformFiltering(data, dm.Where, dm.Where[0].Operator);
}
return dm.RequiresCounts ? new DataResult() { Result = data, Count = data.Cast<ViewModel.Look>().Count() } : (object)data; ;
}
}
...
} |