@using Syncfusion.EJ2.Blazor.Grids
@using Syncfusion.EJ2.Blazor.Calendars
@using Syncfusion.EJ2.Blazor.DropDowns
@using Syncfusion.EJ2.Blazor.Inputs
<h3>CustomerList</h3>
<div class="col-lg-12 control-section">
<div class="content-wrapper">
<div class="row">
<EjsGrid TValue="CustomerDto" DataSource="@customers" ModelType="@Model" AllowPaging="true" Toolbar="@(new List<string>() { "Add","Search"})">
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" ShowDeleteConfirmDialog="true" Mode="EditMode.Dialog">
<Template>
@{
var CustomerDetail = (context as CustomerDto);
<div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="e-float-text e-label-top">Customer ID</label>
<EjsTextBox ID="Id" Value="@(CustomerDetail.Id.ToString())" Enabled="false"></EjsTextBox>
</div>
<div class="form-group col-md-6">
<label class="e-float-text e-label-top">Customer Name</label>
<EjsAutoComplete ID="Name" FloatLabelType="FloatLabelType.Auto" Value="@(CustomerDetail.Name)" TValue="string" DataSource="@customers">
<AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
</EjsAutoComplete>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="e-float-text e-label-top">Phone Number</label>
<EjsNumericTextBox ID="PhoneNumber" Value="@(CustomerDetail.PhoneNumber)" TValue="string"></EjsNumericTextBox>
</div>
<div class="form-group col-md-6">
<label class="e-float-text e-label-top">Address</label>
<EjsNumericTextBox ID="Address" Value="@(CustomerDetail.Address)"></EjsNumericTextBox>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="e-float-text e-label-top">City</label>
<EjsNumericTextBox ID="City" Value="@(CustomerDetail.City)"></EjsNumericTextBox>
</div>
<div class="form-group col-md-6">
<label class="e-float-text e-label-top">Email</label>
<EjsNumericTextBox ID="Email" Value="@(CustomerDetail.Email)"></EjsNumericTextBox>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label class="e-float-text e-label-top">Gender</label>
<EjsTextBox ID="Gender" Value="@(CustomerDetail.Gender.ToString())"></EjsTextBox>
</div>
</div>
</div>
}
</Template>
</GridEditSettings>
<GridEvents OnToolbarClick="ToolbarClickHandler" OnActionComplete="OnComplete" TValue="CustomerDto" />
<GridColumns>
<GridColumn Field=@nameof(CustomerDto.Id) Visible="false"></GridColumn>
<GridColumn Field=@nameof(CustomerDto.Name) HeaderText="Name" Width="200"></GridColumn>
<GridColumn Field=@nameof(CustomerDto.PhoneNumber) HeaderText="Phone" ValidationRules="@(new { required=true})" Width="150"></GridColumn>
<GridColumn Field=@nameof(CustomerDto.Address) HeaderText="Address" Width="200"></GridColumn>
<GridColumn Field=@nameof(CustomerDto.City) HeaderText="City" Width="160"></GridColumn>
<GridColumn HeaderText="Manage Records" Width="150">
<GridCommandColumns>
<GridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-edit", CssClass="e-flat" })"></GridCommandColumn>
<GridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-delete", CssClass="e-flat" })"></GridCommandColumn>
<GridCommandColumn Type="CommandButtonType.Save" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-save", CssClass="e-flat" })"></GridCommandColumn>
<GridCommandColumn Type="CommandButtonType.Cancel" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-cancel", CssClass="e-flat" })"></GridCommandColumn>
<GridCommandColumn ButtonOption="@(new CommandButtonOptions() { Content = "Approve", CssClass = "e-flat"})"></GridCommandColumn>
</GridCommandColumns>
</GridColumn>
</GridColumns>
</EjsGrid>
</div>
</div>
</div>
