The Blazorise DataGrid supports textbox filters.
I would like to use a drop-down component to allow filtering by specific values. What do I need to do to make the grid react to the change of the Select value?
Code Example
#page "/ItemList"
#using DataAccessLibrary
#using Blazorise
#using Blazorise.DataGrid
#inject IItemList _items;
<div align="center">
<h3>Item List</h3>
</div>
#if (ItemListItems is null)
{
<p>Loading...</p>
}
else
{
<DataGrid Data="#ItemListItems" TItem="ItemListItem" PageSize="20" ShowPager="true" Filterable="true" Striped="true" Narrow="true" #bind-SelectedRow="#selectedItem">
<EmptyTemplate>
<div class="box">
No items were found!
</div>
</EmptyTemplate>
<DataGridColumns>
<DataGridCommandColumn TItem="ItemListItem" Caption="Action" EditCommandAllowed="true">
<EditCommandTemplate>
<Button Color="Color.Primary" Clicked="#context.Clicked">Edit</Button>
</EditCommandTemplate>
</DataGridCommandColumn>
<DataGridNumericColumn TItem="ItemListItem" Field="#nameof(ItemListItem.ItemID)" Caption="Item ID" Sortable="true" TextAlignment="TextAlignment.Right">
<DisplayTemplate>
#(context.ItemID)
</DisplayTemplate>
</DataGridNumericColumn>
<DataGridSelectColumn TItem="ItemListItem" Field="#nameof(ItemListItem.TypeShortDesc)" Caption="Item Type" Sortable="true">
// This filter should replace the default textbox with a dropdown listing only specific values
<FilterTemplate>
<Select TValue="string" #bind-SelectedValue="#ItemTypeFilter">
#foreach (string type in ItemTypeList)
{
<SelectItem Value="#type">#type</SelectItem>
}
</Select>
</FilterTemplate>
</DataGridSelectColumn>
<DataGridSelectColumn TItem="ItemListItem" Field="#nameof(ItemListItem.Description)" Caption="Item Description" Sortable="true" TextAlignment="TextAlignment.Left" />
<DataGridSelectColumn TItem="ItemListItem" Field="#nameof(ItemListItem.StatusShortDesc)" Caption="Status" Sortable="true">
<FilterTemplate>
// This filter should replace the default textbox with a dropdown listing only specific values
<Select TValue="string" #bind-SelectedValue="#ItemStatusFilter">
#foreach(string status in ItemStatusList)
{
<SelectItem Value="#status">#status</SelectItem>
}
</Select>
</FilterTemplate>
</DataGridSelectColumn>
<DataGridNumericColumn TItem="ItemListItem" Field="#nameof(ItemListItem.ItemPrice)" Caption="Amount" Sortable="false" TextAlignment="TextAlignment.Right" DisplayFormat="{0:C}" />
</DataGridColumns>
</DataGrid>
}
#code {
private List<ItemListItem> ItemListItems;
private ItemListItem selectedItem;
private List<string> ItemStatusList;
private string ItemStatusFilter;
private List<string> ItemTypeList;
private string ItemTypeFilter;
protected override async Task OnInitializedAsync()
{
ItemListItems = await _items.GetItems();
ItemTypeList = await _items.GetItemTypes();
ItemStatusList = await _items.GetItemStatuses();
}
}
Related
For the following code, for some reason the selection of the radio buttons binds x.MyCapability with -> "on" instead of the label of the button (let's assume the labels of the radio element are *a ,*b and *c):
#foreach (var capability in myList)
{
<label>
<input type="radio" name="MyCapability" SelectedValue="MyCapability" #bind-value="x.MyCapability" />
#capability <text> </text>
</label>
}
how can I link x.MyCapability with a, b or c?
.NetCore 3.1
You are binding in a wrong way, here is the way you can
Your html
<div>Your Capability: #MyCapability</div>
<div>
#foreach (var capability in myList)
{
<div>
<label>#capability.MyCapability</label>
<input type="radio"
name="#capability.MyCapability"
#onchange=#(() => MyCapability = capability.MyCapability)
checked="#(capability.MyCapability==MyCapability)">
</div>
}
</div>
Here is the code behind
#code{
private string MyCapability = "a";
private List<Capabilities> myList = new()
{
new Capabilities()
{
MyCapability = "a"
},
new Capabilities()
{
MyCapability = "b"
},
new Capabilities()
{
MyCapability = "c"
}
};
public class Capabilities
{
public string MyCapability { get; set; }
}
}
When you select any option it will be update in above div
Using DropDown input fields is very common when you want to display a description while saving an ID in your database.
If I consider my Person model, I have PersonViewModel which has a SelectList used to display a list of possible Job Descriptions
public SelectList SelectJobDescription
{
get
{
MyDbContext _context = new MyDbContext();
var result = new SelectList(_context.Keywords
.Where(k => k.Name == ".JobDescription")
.OrderBy(r => r.Valuename), "Valuecode", "Valuename");
_context.Dispose();
return result;
}
}
and I use this SelectList in my create/edit views like this:
<div class="form-group row">
<label asp-for="JobDescription" class="col-sm-4 col-form-label"></label>
<div class="col-sm-8">
<select asp-for="JobDescription" asp-items="#Model.SelectJobDescription" class="form-control">
<option>Select a Job Description</option>
</select>
</div>
Is it correct to use _context this way in the ViewModel or there is some other way to do the same thing better (maybe DI?)
Set the property after instatiating the view model (or during initialization), for example:
var vm = new YourViewModel()
{
SelectJobDescription = new SelectList( _context... ),
};
return View( vm );
I am building a two-level menu for my application using wicket framework. Using ListView#populateItem is redrawing the markup (SubMenuPanel.html) and unable to display menu items which were buried inside markup tags in SubMenuPanel.html. Code below -
html:
<div wicket:id="navMenu"></div>
Main.java:
NavigationMenu navigationMenu = new NavigationMenu("navMenu", navigationMenuAdapter);
add(navigationMenu);
NavigationMenu.java
public NavigationMenu(final String id, final NavigationMenuAdapter adapter)
{
super(id);
this.adapter = adapter;
add(new SubMenuPanel("mainMenu", adapter.getNavigationMenus(this)));
}
SubMenuPanel.java
public SubMenuPanel(final String id, List<NavigationMenuItem> list)
{
super(id);
add(new Rows("firstLevel", list));
setVersioned(false);
}
private static class Rows extends ListView<NavigationMenuItem>
{
private static final long serialVersionUID = 1L;
public Rows(String name, List<NavigationMenuItem> list)
{
super(name, list);
}
#Override
protected void populateItem(ListItem<NavigationMenuItem> listItem)
{
Object modelObject = listItem.getDefaultModelObject();
WebMarkupContainer rowAnchor = new WebMarkupContainer("firstLevelLink");
rowAnchor.add(new Label("firstLevelLabel", ((NavigationMenuItem) modelObject).getName()));
rowAnchor.add(new AttributeAppender("onclick", new Model("handleMenuClick()");
listItem.add(rowAnchor);
listItem.add(new SubMenuPanel("secondLevelMenu", ((NavigationMenuItem) modelObject).getChildMenuItem()));
}
}
SubMenuPanel.html
<body>
<wicket:panel>
<li wicket:id="firstLevel">
<a wicket:id="firstLevelLink" class="dropdown-toggle" aria-expanded="true" data-toggle="dropdown" href="javascript:void(0);" >
<span wicket:id="firstLevelLabel"></span>
</a>
<ul wicket:id="secondLevelMenu" class="dropdown-menu">
</ul>
</li>
</wicket:panel>
Working version
Non-working
i have a datebox
<datebox id="infrom" style ="z-index: 100000;" format="yyyy-MM-dd" value ="#bind(vm.date)"
onChange="#global-command('dataChanged', indate = infrom.value)" />
default value of date is now -1
and have a button search
<button id="searchButton" label="Search" image="/img/search.png" onClick="#command('listCars', indate = infrom.value)"/>
and grid will load data of yesterday
when i choose another day
grid will load data of chose day
and there is my grid
<listbox id="carListbox" height="" emptyMessage="No data found in the result" model="#bind(vm.cars)" >
<listhead>
<listheader label="Date" />
<listheader label="Actionid" />
<listheader label="Num user" />
<listheader label="Total action" />
</listhead>
<template name="model" >
<listitem>
<listcell label="#bind(each.date)"></listcell>
<listcell label ="#bind(each.action)"></listcell>
<listcell label="#bind(each.user)"></listcell>
<listcell label="#bind(each.total)"></listcell>
</listitem>
</template>
</listbox>
and there are my code
private List<Car> cars;
public List<Car> getCars()
{
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
Calendar c = Calendar.getInstance();
c.setTime(new Date()); // Now use today date.
c.add(Calendar.DATE, -1);
String output = sdf.format(c.getTime());
final StringBuilder builder = new StringBuilder("");
for (final Action action : getActions()) {
if (action.getChecked()) {
builder.append(';');
builder.append(action.getActionid());
}
}
String lstAction = builder.toString();
lstAction = lstAction.substring(1);
String[] arrAction = lstAction.split(";");
cars = carService.search(output, arrAction);
return cars;
}
#Command
#NotifyChange("cars")
public void listCars(#BindingParam("indate") Date indate){
SimpleDateFormat dt1 = new SimpleDateFormat("yyyy-MM-dd");
String date = dt1.format(indate);
final StringBuilder builder = new StringBuilder("");
for (final Action action : actions) {
if (action.getChecked()) {
builder.append(';');
builder.append(action.getActionid());
}
}
String lstAction = builder.toString();
lstAction = lstAction.substring(1);
String[] arrAction = lstAction.split(";");
cars = carService.search(date, arrAction);
//return result;
//carListbox.setModel(new ListModelList<Car>(result));
}
but i can't reload grid when i choose another day
please give me any way to slove them
thanks all
Why do you bind param to function with #BindingParam("indate")?
If you bind date value with this:
<datebox style ="z-index: 100000;" format="yyyy-MM-dd" value ="#bind(vm.date)"
onChange="#global-command('dataChanged', indate = infrom.value)" />
so you may not use
String date = dt1.format(indate);
in listCars function, and not use #BindingParam in it.
Instead, you need to declare
private Date date;
in the viewmodel, with his getter and setter.
I have added a Form on submit of which I have to add more wicket controls like Labels, textfields and button with an Ajex Link. But not able to get the correct HTML. Can anyone please help me to get rid of it ?
voucherPanel.html
<html xmlns:wicket>
<head>
</head>
<body>
<wicket:panel>
<div class="form-block">
<div wicket:id="form">
<wicket:message key="lbl.vouchercode" />
<div wicket:id="list">
<input wicket:id="word" type="text" />
</div>
<div wicket:id="vouchercode"></div>
<button wicket:id="submit"><wicket:message key="submitText"/></button>
</div>
</div>
</wicket:panel>
</body>
</html>
voucherPanel.java
public class VoucherPanel extends Panel
{
private static final long serialVersionUID = 1L;
public VoucherPanel(final String id)
{
super(id);
final TextField<String> voucherCodeField = new TextField<String>("vouchercode", Model.of(""));
voucherCodeField.setRequired(true);
final Button button = new Button("submit");
Form<?> form = new Form<Void>("form")
{
#Override
protected void onSubmit()
{
numberOfFields = new ArrayList<String>();
int noOfVocuhers = getNoOfAllowedVoucher();// just returing the number
for (int i = 0; i < noOfVocuhers; i++) {
numberOfFields.add(new String(""));
}
add(new ListView<Object>("list", numberOfFields) {
private static final long serialVersionUID = 1L;
#Override
protected void populateItem(ListItem<Object> item) {
final String word = (String) item.getModelObject();
System.out.println( "word =" +word );
TextField<String> textField = new TextField<String>("word", Model.of(""));
textField.setOutputMarkupId(true);
item.add(textField);
}
});
}
}
};
add(form);
form.add(voucherCodeField);
form.add(button);
}
}
You're trying to assign a Textfield to a <div> element (voucherCode), you need <input type="text"> instead.
You need to add list to your form right away, onSubmit is too late. Just set it outside, similar to button and call myListView.setList when submitting the form.
These are the two things I spotted... if you still have problems please let us know about the error messages you get.