#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
{

&nbsp;

<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);
}
}

&nbsp;
<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>