I have a dynamic list and it is the source of a ListView.
I have a command in the ViewModel, where I need to receive the item, which was clicked. I want to get the object that represents that item, so I can perform a change on it.
I am using MvvmCross.
That is fairly trivial. I imagine you have a ListView in your layout which looks something like:
<Mvx.MvxListView
...
local:MvxBind="ItemsSource Items" />
To be able to get the clicked item you just add a command to ItemClick:
<Mvx.MvxListView
...
local:MvxBind="ItemsSource Items; ItemClick ItemClickedCommand" />
Then in your ViewModel you should have an ItemClickedCommand:
private MvxCommand<ItemViewModel> _itemClickedCommand;
public ICommand ItemClickedCommand
{
get
{
return _itemClickedCommand = _itemClickedCommand ??
new MvxCommand<ItemViewModel>(item => {
// do something with the item here
}):
}
}
Where ItemViewModel is the type of the items in the collection you have bound to the ItemsSource.
Related
I try to expand the server side blazor todo app.
I would like to
add a responsible person to a todoitem
add a todoitem after onkeyup inside the input field
This gist contains my attempt to expand the todo app
What works
Adding a list of people inside a select field
<select>
#foreach (var person in people)
{
<option value="person">#person</option>
}
</select>
What does not work
Two things are not working
adding a person to a todoItem inside AddTodo()
adding a todoItem for the event onKeyUp == Enter
The method
private void AddTodo()
{
if (!string.IsNullOrWhiteSpace(newTodo))
{
todos.Add(new TodoItem { Title = newTodo, Responsible = person});
newTodo = string.Empty;
}
}
Questions
How can multiple form values (input, select) be bound to a method?
Why is onkeyup not firing?
Source code of my Todo.razor gist
The cause for why is onkeyup not firing? was a silly mistake; the event handler was attached to the wrong input. This seems to work
<input placeholder="Something todo" #bind="newTodo" #onkeyup="AddTodoOnEnter" />
To get a value from a selected option from a select-tag to your code you bind the variable #newPerson on the select-tag.
<select #bind="newPerson">
#foreach (var person in people)
{
<option value="#person" >#person.name (#person.id)</option>
}
</select>
You can access it inside the #code section with
#code {
// named tuple list
private List<(int id, string name)> people = new List<(int id, string name)>()
{
(1, "Tom"), (2, "Luise"), (3,"Jane")
};
private void AddTodo()
{
if (!string.IsNullOrWhiteSpace(newTodo))
{
todos.Add(new TodoItem { Title = newTodo, Responsible = "who " + newPerson });
newTodo = string.Empty;
}
}
Screenshot of the html
Current Code / Gist
I updated my gist - you can see the old code next the revision 4 side by side here
Is it possible to implement an OnClick listener in a list box in ZK? The trigger when clicking on an item works fine with the following code, but I can't get to the clicked item (getSelectedItems () shows the items selected by checkbox or the topmost selected item, but I want to trigger something independent of it by clicking on it). That's why the OnSelect listener doesn't matter to me either, the checkbox element must be selected directly and is not automatically selected by clicking on the item.
Thanks for any hint.
ZUL:
<row>
<listbox id="article_output" width="100%" height=""
multiple="true" checkmark="true" nonselectableTags="*">
<listhead>
<listheader label="Article"/>
</listhead>
</listbox>
</row>
Create Model and Listener
public void fillListBoxWithArticles(final Listbox lb, List<Article> articles) {
lb.setItemRenderer(new ArticleItemRenderer());
lb.setCheckmark(true);
lb.setMultiple(true);
ListModelList<Article> lml_articles = new ListModelList<Article>(articles);
lml_articles.setMultiple(true);
lb.setModel(lml_articles);
lb.addEventListener(Events.ON_CLICK, new EventListener() {
#Override
public void onEvent(Event event) throws Exception {
logger.debug("SELECTED INDEX: " + lb.getSelectedIndex());
setArticleToInfobox(articles.get(lb.getSelectedIndex()));
}});
lb.focus();
}
ItemRenderer:
public class ArticleItemRenderer implements ListitemRenderer<Article> {
#Override
public void render(Listitem item, Article data, int index) throws Exception {
item.appendChild(new Listcell(data.getArticletitle())); }}
I have an accordion panel with tabs containing name of students. I select on one of the tab and choose edit. I am calling a tab change listener and getting student object and trying to edit it works fine.
But My problem is when for the first time Accordion loads, even though I select on the tab,and click on edit, I will get not get student object. Its giving me null pointer exception. since Tab change event does not get called for the first time it loads. How do I solve this?
private StudBean formBean;
public StudBean getFormBean() {
if(formBean==null){
formBean= new StudBean();
}
return formBean;
}
public void onTabChange(TabChangeEvent event) {
formBean = (StudBean) event.getData();
}
public String edit(){
formBean = testDelegate.getDetails(formBean.getName(),formBean.getId());
return "/ui/EditStudent?faces-redirect=true";
}
<p:commandButton process="#this" value="edit" action="#{testBean.edit}" >
<p:accordionPanel value="#{testBean.students}" var="stud">
<p:ajax event="tabChange" listener="#{testBean.onTabChange}" immediate="true"/>
<p:tab title="#{stud.name}">
I have a create method in my controller and this opens up a view. On the view the user can enter data to populate the model. Some of that data comes from select lists. These select lists are populated from the database.
What I would like to know is should I:
a) Get data for the select lists in the controller, populate a field like this:
public IEnumerable<SelectListItem> Statuses { get { return GetStatusType(); } }
pass Statuses to the model and then do a for () to loop through statuses and create a select list and options HTML
b) Do nothing in the controller and in the view have the following in the model:
<select id="Q_StatusID" name="Q.StatusID">#Html.Raw(
SelectHelper.Status(false, #Model.PageMeta.StatusID))</select>
Where the SelectHelper is C# code that gets all the select list and options HTML.
c) Some better way:
I would go with the first one. some thing like this
a helper method
public List<SelectListItem> getAllSelectList(List<Items> lists)
{
List<SelectListItem> selectListItems = new List<SelectListItem>();
foreach (Term term in lists)
{
selectListItems.Add(new SelectListItem() { Text = term.yourselectfield, Value = term.your value });
}
return selectListItems;
}
on your controller
//assuming you GetStatusType() method will return list of objects
ViewData.selectlist=getAllSelectList(GetStatusType());
on your view, if you are using Razor
#Html.DropDownList("selectlist", null, "Choose")
or
<%: Html.DropDownList("selectlist", null, "Choose") %>
Create a static Look-up class & static method for your GetStatusType there.
Cache all the status types after first time loading from your database.
Call GetAllStatusType from the view to display.
I would create a view model, which has a IEnumerable< Statuses > property. Then in your view to display the select element :
#Html.DropDownListFor(model => model.PageMeta.StatusID, new SelectList(Model.Statuses, "Id", "Name"), "Some default which has no value")
Where Id and Name are set to the appropriate properties in your Statuses model.
For a project I need a dynamic way of loading partial views, preferably by jquery / ajax.
Here's the functionality I require:
User enters form. A dropdownlist is shown and a generic partial view is rendered with some input controls.
User selects a different value in the dropdown
The partial view refreshes. Based on the value of the dropdown, it should load the partial view. Some values have custom views associated with them (I could name them with the primary key for instance), others don't. When there's no custom view; it should load the default. When there is one, it should of course load the custom one.
And this should all be ajaxified when possible.
I have read some things about dynamically loading partials, but I wanted to repost the complete case so I can find the best solution for this specific case.
Assuming you have a dropdown:
#Html.DropDownListFor(
x => x.ItemId,
new SelectList(Model.Items, "Value", "Text"),
new {
id = "myddl",
data_url = Url.Action("Foo", "SomeController")
}
)
you could subscribe for the .change() event of this dropdown and send an AJAX request to a controller action which will return a partial and inject the result into the DOM:
<script type="text/javascript">
$(function() {
$('#myddl').change(function() {
var url = $(this).data('url');
var value = $(this).val();
$('#result').load(url, { value: value })
});
});
</script>
And place a DIV tag where you want the partial view to render in your host view:
<div id="result"></div>
and inside the Foo action you could return a partial view:
public ActionResult Foo(string value)
{
SomeModel model = ...
return PartialView(model);
}
You should handle the value changed event of the combobox, get the Id selected, then use ajax to call a server action, passing the selected Id.
The server action will return the corresponding view. At client side you populate the returned view to a region on the page.
For example of the server side action:
public ActionResult GetView(int id)
{
switch (id)
{
case 1:
return View("View1", model1);
break;
case 2:
return View("View2", model2);
break;
default:
return View("Default", modelDefault);
}
}