I'm using and loving react-hook-form. I've run across an issue where I have a list of items (let's say in the left column), then when you click on any item it will display an edit component for the selected item in the right column. The issue is when I switch between items, nested array values don't seem to update the data correctly.
I think I understand that because a new edit component isn't created for each parent item (I'm just passing the selected index down) the nested useFieldArray in the edit component still references the first parent item. If that's the case, I'm not exactly sure how to make sure a new useFieldArray is created for each item that gets selected.
Here's a codesandbox replicating the issue:
https://codesandbox.io/s/dreamy-brattain-r74lx
Any help is much appreciated.
I think you can just map over the childItems prop of your watched item inside your <Details /> component instead of using fields. As you are using watch the <Details /> will be re-rendered after appending a new child item.
If your <Details /> component should get more complex i would also suggest to use useWatch here instead of passing watch. Check this quote from the documentation for useWatch:
Behaves similarly to the watch API, however, this will isolate
re-rendering at the component level and potentially result in better
performance for your application.
Here is an example using useWatch:
Related
I just ran into an issue that I have never noticed before and I want to know if this is something isolated to my current project for some reason or if this is an issue that I need to panic about and check every one of my applications and correct right away.
I have two drop downs on the same page using the same select list.
ex. HomeCity and CurrentCity
both populated from the same list of cities. Therefore in code both populated from the same IEnumerable<selectListItem>
It turns out that if the second value on the page is null (in the view model) then instead of defaulting to the optionLabel it defaults to whatever the first value is.
This issue is much exasperated when (as I often do) you try to cache the SelectList. Not only is the next item on the same page set to the wrong value, but the selected item gets changed in the cache (which is so strange because you would imagine that the cache serializes the values and give you a copy.
So my question is twofold.
is this the usual functionality or did I trigger this weird behavior somehow?
What is the recommended way to avoid this? Would I need to do a deep clone of my select list between dropdowns?
We are facing a problem with dynamic columns. We have a table where columns depend on some filters previouosly selected. When you enter the page you can select year and some other criteria, and with these values we render the table. Our problem is that columns may vary when you select different criteria, and this is a problem because c:forEach is not so much dynamic.
If you look at the example provided in IceSoft Wiki you can see something similar to what we have in our code (but our code is much more complicated):
http://www.icesoft.org/wiki/display/ICE/DataTable+Dynamic+Columns
The problem comes with this sentence:
<c:forEach items="#{backing.columns}" var="colModel">
backing.columns is static. But if you change its number of elements (in this example it makes no sense because values in "columns" List match to properties in Task class, but if you are printing a List instead of List) you have a problem, as described here:
http://drewdev.blogspot.com.es/2008/08/cforeach-with-jsf-could-ruin-your-day.html
We've tried to recreate component list when we change columns with:
component.getChildren().clear(); //component is of UIComponent type
But didn't work. Also we've tried restoring view from context in a PhaseListener, and no positive results. And we've run out of ideas.
Any idea (or solution :D) would be appreciated. And if someone need more specific code, just ask.
TIA.
PS: This question is also posted in ICEFaces Forum (http://www.icesoft.org/JForum/posts/list/0/21842.page#76787), and I will update with solution (if any) both places.
We've solved the problem, as we've been suggested at IceSoft Forum, redirecting navigation to the same page in order to get a completely new component tree. For this you need your state to be in a bean that will survive that, but since our backing beans are usually viewscoped this is not a problem. To achieve this, we've changd valueChangeListener method that was changing the list behind the c:foreach and used an action method, and in this action method we're returning null as navigation rule to get the page reload.
See more at: http://www.icesoft.org/JForum/posts/list/21842.page#sthash.sXtPazmS.dpuf
First, I apologize if this is a dumb question, but I'm new to MVC and am trying to get up to speed as quickly as possible. I have spent hours searching for answers and even went and bought a book on MVC 4, but it still didn't answer my question.
I have a form I'd like a user to fill out to add a new product to the catalog. They choose the category, enter the name, a description, etc.. On the same page I'd like them to be able to add sizes or product options such as Small, Medium, Large, etc.. The problem is I'm not sure how to go about this.
I need to temporarily store the size options for example in some sort of collection until the user actually 'saves' the product, then I need to be able to read the collection. What I'm trying to avoid is to have the user add the basic product info, then save it, then select it, then choose to add options to it. I'm trying to just do it all on one form. Any help would be greatly appreciated!
There is nothing preventing you creating a view model with its own collections for the detail items and have those mapped to some sort of javascript control for selecting multiple items such as one that writes to an mvc hidden form control.
The controller handling the postback will simply create the master model from the postback data (the updated view model) and then create the child records. The whole thing could be achieved with ajax calling a controller action that returns a partial view of the updated ui.
Similar to this but have the list as a property of the master model
http://www.stevefenton.co.uk/Content/Blog/Date/201002/Blog/How-To-Handle-Multiple-Select-Lists-In-ASP-NET-MVC/
A little more advanced on how to manage your own bindings http://www.dotnetcurry.com/ShowArticle.aspx?ID=584
Sounds like u need to roll your sleeves up and get a control written in javascript that allows child items to be added client side whist serializing e.g. Into json when they save and saving it to an mvc hidden control ready for postback. Use json.net to hydrate these values into your pocos. http://erraticdev.blogspot.co.uk/2010/12/sending-complex-json-objects-to-aspnet.html
On Telerik demo site we can see an example of how to implement kind of functionality: "check all checkbox in a grid's column". But in my case it has 2 disadvantages:
It didn't check all checkbox on all pages.
It didn't save a state of checkboxes on different pages.
Is anybody know how to resolve these issues? Thanks in advance.
As long as I know there's no built-in functionality to do so. The same problem happens when you select records on page one and change to page two, you loose whatever you selected before.
To achieve that functionality you have 2 options (I've used both on previous projects)
1) On each check make an Ajax call to one of your controllers and store whatever you selected on a Session Variable (This can be inefficient if you have a lot of records)
2) Create a javascript variable and store your selections there, and send back to the controller using a json variable or a comma separated values string
As I said, I've used both approachs so it depends on if this works for you or not
Hope it helps
I can't test this, so I'm not 100% sure, but looking at Telerik's example, one reason it's not persisted is because every "page" of the grid requires a postback, and in the controller action result method, they aren't passing in the model (or view model) for the items that are bound to the grid, they're only returning that list of items back to the view, so it will never "save" which items are checked/selected and which ones aren't. You should be able to get around this by making your view model a parameter into the HttpPost action result method and then passing that list back to the view after the post so that it retains which items are selected instead of creating a new one. This won't solve the issue with not selecting all the items, but it should at least retain which ones are selected throughout the pages. I think the reason for it not working with all items is it can only select the ones that are actually being displayed at the time. You may want to do a post (or ajax) to select "all" items.
One of the major reasons for using paging in grids is so that you don't have to retrieve all of the data from the data store and generate a lot of HTML to push to the client.
It's been my experience that most users understand that a "select all" check box only checks the items on the current page. I've not seen a site where checking such a check box would actually check all records, even those I can't see.
If you have an action which will affect more than the current page of records, I would suggest that you add a button which clearly indicates that the action will affect all records, then send a command to your data layer which will perform that action. This will perform better (you don't have to send a potentially long list of ids across the wire) and allow users to understand the repercussions of their action.
I'm trying to build a todo list. http://d2burke.com/exp/todo/
I want my user to be able to mark items as complete, at which point the item is dropped down to the 'Complete' list, and vice versa. I also want each of these lists to be independently sortable.
I'm using a basic custom method to move the items back and forth, and I've used jQueryUI Sortable to sort them.
All of these things I've been able to accomplish; however, it doesn't seem as though the site (the DOM?) is registering that the items were moved from one list to the other. If I mark one item as 'Complete' it physically moves down...and becomes sortable in the 'Complete' list, but I'm echoing out the current positions in serialized format (because I'm going to record the order in a db) and the app doesn't seem to recognize that the item has moved.
I'd like to force the app to recalculate the list of items when an item is marked complete, or incomplete.
Help?
I looks to me like you should look at the resfresh methods of of the sortable: http://jqueryui.com/demos/sortable/
I would start with .refresh() too see if that also recalculates the positions. I assume it does but if not you might need to trigger the other one too.
There are few things that stand out that I would comment on:-
1) When you 'move' an item, you are moving more than you intend - the moved item has a 'tbody' around it - your code is very fragile, depending on parent.parent... which will be a nightmare to maintain.
2) You have various parent.parent constructs - lose these switch to '.closest()' to search up the tree to the class of item you wan to operate on.
3) You are doing things with binding/unbinding - lose them and switch to '$(document.body).on(,...)' then jquery will add/remove events automatically based on your selector - link once and forget.
Once this is done the bugs may go away - if not it will still be clearer so possible to debug properly!
Regards
ps. If it were me, I think I'd link the two list so they are sortable together, and toggle the completed flag if an item is moved from one list to the other.
This way the user has two ways of changing the status and jquery will do all the donkey work as you are simply sorting a normal linked list.