|
. . .
<SfDialog Width="450px" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsChargesVisible">
<DialogTemplates>
<Header> Dialog </Header>
<Content>
<div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="orderedit">OrderID</label>
<input class="form-control" @bind="@(SelectedProduct.OrderID)" type="number" disabled />
</div>
<div class="form-group col-md-6">
<label for="customeredit">CustomerID</label>
<SfTextBox ID="CustomerID" @bind-Value="@(SelectedProduct.CustomerID)"></SfTextBox>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="freightedit">Frieght</label>
<SfNumericTextBox ID="Freight" TValue="double?" @bind-Value="@SelectedProduct.Freight"></SfNumericTextBox>
</div>
<div>
<label class="e-float-text e-label-top">Order Date</label>
<SfDatePicker ID="OrderDate" @bind-Value="@SelectedProduct.OrderDate"></SfDatePicker>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="countryedit">ShipCountry</label>
<SfDropDownList ID="ShipCountry" @bind-Value="@SelectedProduct.ShipCountry" TItem="Country" TValue="string" DataSource="@Dropdown">
<DropDownListFieldSettings Value="ShipCountry" Text="ShipCountry"></DropDownListFieldSettings>
</SfDropDownList>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Please enter a reason:</label>
<SfTextBox @ref="TextBoxRef" Placeholder='Reason'></SfTextBox>
</div>
</div>
</div>
</Content>
</DialogTemplates>
<DialogButtons>
<DialogButton Content="OK" IsPrimary="true" OnClick="@OKCloseDialogCharges" />
<DialogButton Content="Cancel" OnClick="@CancelCloseDialogCharges" />
</DialogButtons>
</SfDialog>
@code{
SfGrid<Order> Grid;
SfTextBox TextBoxRef;
private List<Object> Toolbaritems = new List<Object>() { "Add", "Edit", "Delete", "Update", "Cancel",
new ItemModel() { Text = "Archive", TooltipText = "Archive", PrefixIcon = "e-click", Id = "Click" },
new ItemModel() { Text = "Charges", TooltipText = "Charges", PrefixIcon = "e-click", Id = "Charges" }};
. ..
public void RowSelectHandler(RowSelectEventArgs<Order> args)
{
SelectedProduct = args.Data; //get selected record data
selectedIndex = args.RowIndex; //get selected row index
}
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
. . .
if (args.Item.Id == "Charges")
{
var selected = await Grid.GetSelectedRecordsAsync();
if (selected.Count > 0) //check whether anyone of the reocrds are selected or not
{
this.IsChargesVisible = true; //shown dialog
}
}
}
private bool IsVisible { get; set; } = false;
private bool IsChargesVisible { get; set; } = false;
. .
private async Task OKCloseDialogCharges()
{
SelectedProduct.Remarks = TextBoxRef.Value;
await this.Grid.UpdateRowAsync(selectedIndex, SelectedProduct); // update the row using method
this.IsChargesVisible = false;
}
private async Task CancelCloseDialogCharges()
{
this.IsChargesVisible = false;
}
}
<style>
.form-group.col-md-6 {
width: 200px;
}
label.e-float-text {
position: relative;
padding-left: 0;
top: 10%;
}
</style> | 
