I am using react and flux in my application. We have a grid. It shows country information. If user selects a row in the gird, Based on selected row, I get the country name and set the value in the store. Various listeners are listening to the store for country name change event & as soon as country name is changed, multiple subscribers perform specific task. All this is working fine.
Now as per a new requirement, we need to add a new column in the grid, which will show the country name & the value will be shown as hyperlink. When user clicks on this link, it will take user to a new page.
Problem is when user clicks on the hyperlink, then I need to update the value in store (as country information is changed). once I do that, it actually fires multiple events on current page as all the subscribers who have subscribed for country name changed event will fire.
What alternative I have in this scenario?
Related
I am working on a react page. If I click on remove button I want the
three input(school name, school address, year) to be removed from the page
and If i click on add more button the three input(school name, school address, year)
should be added as a group. The user can enter up to 3 records maximum meaning there
can exist 3 groups of (schoolname,schooladdress,year) on the page.
Here is my codesandbox
https://codesandbox.io/s/interesting-sanderson-fuz8o
Here is the link to what I was following to do this.
https://codesandbox.io/s/dynamic-fields-with-class-z65gn
Quesition : How can i do this such that when i click on the add more button
the three input boxes are duplicated/dynamically created and when I click on remove
button, the 3 input boxes tied to that row are removed.
Your application should consist out of a component that manages the creation and deletion of the records and a component that manages the internal state (content of the input fields).
You probably want to exclude the create button from your records, since the action is not related to a specific record.
To remove a record you would need to pass a function as a prop to each record component and call that function inside the record container whenever the button is clicked.
I have a problem with Angular UI-Grid (http://ui-grid.info/). Grid is implemented in modal window that appears after user clicks button.
Service works that way: User selects data set to prepare and clicks button. After clicking button website sends request to rest service to receive data. After receiving data modal with table is shown. Columns count depends on data requested by user.
The problem is that after user changes columns width and close modal with this table UI-Grid 'remembers' this column width that user left. If then user will select another set of data I am cleaning GridOptions object and fill it once again after data is received. The problem is that row width stays in previous state.
I tried so far:
using apis core.refresh() method - while debugging I can see that this
method fires some event but no effect on my grid,
remove whole DOM node and append it again before receiving response with new data
various different hacks trying to use many methods found inside grid api - no success at all.
I am sorry that I am unable to reproduce this in any fiddle but it would be really difficult I am afraid to match my case.
Any help would be very appreciated. Thanks
ps. it also applies to my another table where user can pin and hide columns. Pinned/hidden columns remains hidden/pinned after receiving brand new data. And it is not cool.
Once you set the data to the grid, you should be calling this -
gridApi.core.notifyDataChange( uiGridConstants.dataChange.ALL)
From the docs,
Notifies us that a data change has occurred, used in the public api
for users to tell us when they've changed data or some other event
that our watches cannot pick up
notifyDataChange tells the framework that one of the options or columnDefs has been changed.
Checkout this thread
How can I reset my viewmodel when the user clicks new button on the view that has the viewmodel as it's datacontext?
For example:
If I have a view NewCustomer and upon save, the data is saved to the DB and the newly created account number is displayed. But when the user clicks the New button in the screen, I want the view (viewmodel) to be reinitialized. Or if the user clicked cancel in the screen to clear all changes.
How can I achieve this? I am using Prism 5.0 and Unity as my container.
If I used IRegionMemberLifetime, I can clear the viewmodel data when I navigate away and navigate again to the view (by setting the KeepAlive as false on clicking New button before navigating away). But I want the form to be cleared without navigating. Can this be done?
You could have a screen/workspaceViewModel, and another ViewModel wrapping your data.
So two classes: CarScreenViewModel and CarViewModel.
The CarScreenViewModel would have a property, say CurrentCar, which reflects what is currently selected in the screen. Then, when clicking the Create button, you simply set:
CurrentCar = new CarViewModel();
Resetting partially loaded data will only lead to behaviour that is hard to reproduce. It is better to start with a fresh instance.
Your standard approach will be something like below
ViewModels
CustomersContainerViewModel which contains
a collection of CustomerViewModel s
and ICommands like
CreateNewCustomer
DeleteExistingCustomer
UpdateExistingCustomer
Your View will contain
the CustomersContainerView which will contain
a collection of Customer Objects in your required UI element
a button to Create new customer (which will launch a new screen which contains the newCustomer fields it can also contain cancel, which will just close the form)
a button to delete (can also be a ContextMenu)
a button to update (can also be a ContextMenu) which will launch a customer form filled with details from DB.
Hopefully this makes some sense... Let me know if you have problem with any of the above
Update - Forgot to add. NewCustomer Command will add a new Customer object to your CustomerCollection and that should open a NewCustomer form (or whatever you chose) for user to input the customer details. Cancel/Delete will just remove that record from the collection. Delete will update the DB as well in addition
In my case
yourViewName.variableName.postValue("")
I have a calendar view where the user can move events around. The calendar view is configured to operate on two fields date_min and date_max. These fields are modified inside the object when user moves the appointment around.
However, these fields are also defined to use a constraint that restricts them to a subset of values. I have managed to get the client to display an error if the user moves an object to a new position, but I was not able to get the calendar view to reset the position of the moved object when a move results in an error.
How do I do this?
Instead, what happens is that the appointment stays on the new errornous position in the calendar view, but the fields in the object are not updated still. So the appointment in the calendar view only returns to the correct position when the user resets the calendar view.
I am building a three-way selector: companies, departments and users.
I am trying to figure out the best way to structure this in my Backbone app. Here's the current problem I'm having.
Say a user has selected a company. Then, the departments and user collections will be populated and the view will update:
The user can then select a department from the list, which will further refine the user select. This I have working well.
Or, the user can go straight to User list and find a user (without first having to specify a department). In this case, the view for both departments and users needs to update:
The department should become selected on the user's department.
The users should refine to all users in the selected user's department, rather than all user's in the selected company.
I am struggling with the best way to do this. So far, my departments and users collections have a selected property, so that's how I'm maintaining state. Currently I'm doing something like
When the user selects a department, the department view
Sets the selected department directly on the departments collection
Triggers an event
The users collection hears the event, clears out any selected user, and triggers another event
The users view hears the event, and re-renders. Since it knows about the departments collection, it knows a department has been selected and that it should refine the users down to the department
I do this because if I had the view only trigger the event (without setting the departments selected property first), I would have a race condition: both the departments and users collections would be responding to the event, and depending on the timing the users may not be properly refined.
The second piece:
When the user selects a User (without specifying a department), the user view
Sets the selected user directly on the users collection
Sets the selected department directly on the departments collection (which it knows about)
Triggers an event
and this is where I'm stuck. The departments collection doesn't really need to do anything, since its selected property is already correct; really, its view just needs to re-render. And so does the users' view.
But this is not all, because there are lots of other things that can happen. I feel like it's getting out of control.
What's the best to structure this?
Am I using events properly?
How do you deal with a view that needs to hear about other views and other collections changing?
Update: Should I just use routes to save application state? This may simplify things...
Update 2: This question has been helpful to me. Having a separate model to manage state definitely seems the way to go.
Update 3: Having a separate model to store state + the use of jQuery deferreds is amazing. Seriously. It completes me.
I find it useful to use a model for keeping track of the state. That way you can pass that model around to different views and don't have views referencing each other directly.
You can use built-in and custom events on the state model to manage state transitions.
In your case collections would not need to store selected. Instead selectedUser and selectedDepartment could be attributes of the state model.
Then you could have logic in your model that triggers custom events ('update:users:view' or 'update:departments:view') depending on what is selected.
I hope that makes sense.