JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Proper way to update changes made on data grid editing (Blazor) › Reply To: Proper way to update changes made on data grid editing (Blazor)
February 12, 2022 at 8:33 pm
#102864
ZachMtech
Participant
Full code here
@page "/InventoryGrid"
@inject ICommonRepository CommonRepo
<style>
body,<br />
html,<br />
app {<br />
height: 100%;<br />
}</p>
<p> app {<br />
overflow: auto;<br />
}</p>
<p> .content {<br />
height: calc(100% - 70px);<br />
}<br />
/* This is the CSS used in the demo */<br />
smart-grid {<br />
width: 100%;<br />
}<br />
</style>
The filtering feature is enabled by using the <strong>filtering</strong> property. If the <strong>enabled</strong> sub-property is set to <strong>true</strong>,
the column's filtering menu is enabled. Filter Menu displays Inputs, Numeric Inputs or Date Pickers depending on the column's type. The column's <strong>allowFilter</strong>
determines whether a column is filterable. The Grid has options to customize the visibility of filter icons, filter column background, custom filter icons, enabled/disable filter menu animations.
@if (dataRecords == null)
{
}
else
{
<button>Change filter</button>
}
@code {
public bool HideGrid = false;
string balanceTemplate = "#balanceTemplate";
GridAppearance appearance = new GridAppearance()
{
AlternationCount = 2,
ShowColumnFilterButton = true,
AutoShowColumnFilterButton = false
};
GridSorting sorting = new GridSorting()
{
Enabled = true,
Mode = GridSortingMode.One
};
GridFiltering filtering = new GridFiltering()
{
Enabled = true,
Filter = new string[][]
{
}
};
GridEditing editing = new GridEditing()
{
Enabled = true,
Mode = GridEditingMode.Row,
Action = GridEditingAction.DoubleClick,
Dialog = new Dialog() { Enabled = true },
CommandColumn = new GridEditingCommandColumn()
{
Visible = true,
Position = Position.Far
}
};
private List dataRecords;
protected override async Task OnInitializedAsync()
{
base.OnInitialized();
dataRecords = await CommonRepo.GetAllItemBins();
}
public async Task ChangeFilter()
{
filtering.Filter = new string[][]
{
new string[] { "Item", "contains 50_Bail" },
};
}
public async Task OnEndEdit(Event ev)
{
GridFilterEventDetail filterEventDetail = ev["Detail"];
Console.WriteLine(filterEventDetail.Data[0].datafield.QtyOnHand);
}
}
<div style="width: 100%; height: 100%;">
<div>
<div style="padding-left: 4px; color: green;">{{value::}}</div>
</div>
<div>
<div style="padding-left: 4px; color: orange;">{{value::}}</div>
</div>
<div>
<div style="padding-left: 4px; color: red;">{{value::}}</div>
</div>
<div>
<div style="padding-left: 4px; color: red;">{{value::}}</div>
</div>
</div>