For some reason my code is being posted in a strange way after editing. I will post it here again:
@page "/counter"
@using Syncfusion.EJ2.Blazor.DropDowns
@using Data
@using Syncfusion.EJ2.Blazor.Popups
@using Syncfusion.EJ2.Blazor.Calendars
@this.ComboBoxValue
<button @onclick=@(() => this.IsModalShown = true)>Open Modal</button>
@if (this.IsModalShown == true)
{
<EjsDialog id="dialog" header=@("Modal") width="800px" isModal="true" allowDragging="true">
<div class="form-group row">
<label for="Select" class="col-2 col-form-label">Select:</label>
<div class="col-4">
<EjsComboBox AllowCustom="true" AllowFiltering="true" @bind-value=this.ComboBoxValue DataSource=@OrdersDetails.GetAllRecords() PlaceHolder="Select an city" Fields=@this.ComboBoxFieldSettings>
</EjsComboBox>
</div>
</div>
<div class="form-group row">
<label for="Deadline" class="col-2 col-form-label">Deadline:</label>
<div class="col-4">
<div id="wrapper" class="datepicker-section">
<div id="datepicker-control">
<EjsDatePicker id="datepicker" placeholder="Choose a Date" @bind-value=@this.Deadline></EjsDatePicker>
</div>
</div>
</div>
</div>
<button @onclick=@(() => this.IsModalShown = false)>Close</button>
</EjsDialog>
}
@code
{
public ComboBoxFieldSettings ComboBoxFieldSettings { get; set; } = new ComboBoxFieldSettings() { Text = "ShipCity", Value = "ShipCity" };
public bool IsModalShown { get; set; }
public object ComboBoxValue { get; set; }
public DateTime? Deadline { get; set; }
}
