I need a bit of direction. I'm working on an application with React, Typescript, and Material UI. I've created a simple modal. The first page contains an MUI DataGrid with checkSelection enabled. The User can select as many options as appear on the table.
Now, for each selection, the User will then have a new form step to complete. So, if the User selects 5 items from the table, they will then see 5 corresponding steps. The form steps are tied to the selection. So, if the first selection is a menu item, for example, then the next step in the form will be about that menu item, with fields to add to that item.
I've been searching for a similar solution and haven't found one. I'm hoping that someone can point me in the right direction or has some sources they can recommend.
Much appreciated.
Related
So, my problem is, I want to have a DetailList component with multi select. Easy enough in documentation it's just what I need.
My code is almost identical except of content, so I pasted example from documentation.
But in the given example bellow, multi select only works if you click ok radio buttons on the left. If you click on the row, only one gets selected, which is not user friendly.
My question is how to make it behave same, regardless if you click on row or on radio button ? In both cases I want multi select.
Link to example and documentation: https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/basic
I've looked over the web for solution quite a lot, but haven't found one.
I have a list of time pickers in my application to let the user chose the opening times for his store, so he can chose from_time,to_time and the day as shown in the picture.
the problem is i want to control this list so i can add a new time, delete, modify
I am using Antd V3.
I'm not sure if I got your question, but here is what I have got
https://codesandbox.io/s/nice-curran-kkx10
by the way, that snippet could help you to understand the use case of keys with list in React.
I have an inherited React app that i need to fix but after a few days, im stuck and need help.
I have a filtering panel on the left side which contains a 5 categories and items within their categories below it, each item has a checkbox next to it and when you click it, it updates the results on the right side, this works fine.
However i have a task to update the numbers next to the links in the filter panel, based on what was clicked and would like to know if there is a way to create the filters links first and then only update the number next to the link upon click.
All the code resides in the render method, any help would be great.
I am trying to create a content type (say Meter). Each Meter consists of a "Meter Reading". This meter reading content contains three fields, say title, date range and usage. I have a Panel page where I display all the Meter Readings related to a parent Meter. I have displayed the Meter Readings in a tabular format.
I want the user to be able to add new Meter Readings without going to the default Meter Readings creation page. Rather than the default form kind of page, the user should be able to enter the data in the table view provided and it should be automatically saved into the project itself.
So, I want the functionality to be like:-
Display all the meter readings with two links, i.e., Edit and Delete,
When the user clicks on Edit link, the meter reading row should become editable and the user should be able to make the changes inline in the same table,
In the footer there should be a link for adding a new meter reading and when the user clicks on it, a new blank row should be added dynamically to the table and the user should be able to make a new entry into it.
Is there a module in Drupal 7 for doing so?? I have already tried out several modules for this such as SlickGrid, jQGrid and jEditable
Any help would be great. Thanks in advance.
Am afraid am not aware about a module that does all that out of the box. But in case you carry on with custom coding you can have a look at the following:
Edit and Delete options per row in views
Use Views Megarow. For working example you can have a look at how its used in commerce backoffice. Please note that you need to write the form structure ( FORM api ) for the quick edit form in a custom module. The Views Megarow takes care of ajax populating the edit form, its submission in client side, and refreshing the original row after the response from server.
When the user clicks on Edit link, the meter reading row should become editable and the user should be able to make the changes inline
in the same table.
Views Megarow doesn't support inline editing. But another module as suggested by #nmc does it. Its editablefields. But it doesn't have any edit/delete button. You click on the text directly ( provided user has appropriate permission to edit the field data ) in view.
In case you are going to use editablefields, then you would have to add another delete button in view, which one confirmation would redirect to the page that triggered delete action.
Since delete button would redirect to a default confirmation page, you may want to code a custom delete action which may override this.
In the footer there should be a link for adding a new meter reading and when the user clicks on it, a new blank row should be
added dynamically to the table and the user should be able to make a
new entry into it.
I suggest creating a small ajax form. Create a "Add Meter Reading" button in it, which on submission would create a meter reading node in the server. The ajax form should have parent information in a hidden field ( i.e. the Meter id). The ajax response for this form could be another script to load/refresh the view on client side.
Client side code to refresh the view can be found in Views Autorefresh submodule in Views Hacks.
If using views megarow you would have to add another jquery function on ajax response after view is refreshed - Trigger edit button.
Otherwise you may have to add some classes or theme to newly created rows in view to bring them to focus.
It is important that the entire views refreshes, so that drupal behaviours are attached to the newly created entry in table.
I don't know if there is one module which will meet all your needs but you may be able to use some in combination.
Views Bulk Operations (VBO) - has Drupal 7 support
This module augments Views by allowing bulk operations to be executed
on the displayed rows. It does so by showing a checkbox in front of
each node, and adding a select box containing operations that can be
applied. Drupal Core or Rules actions can be used.
editablefields - Drupal 7 version in dev
This module allows CCK fields to be edited on a node's display (e.g.
at node/123), not just on the node edit pages (e.g. node/123/edit). It
also works within views etc. Anywhere a 'formatter' can be selected,
you can select editable (or click to edit).
editview - no Drupal 7 support yet but I thought I would mention it in case you're able to adapt the code yourself
Editview is a plugin for the Views module. It allows you to create a
view in which the nodes are editable, and new nodes can be created.
Another question for you Filemaker Pro experts. The database I am developing starts with a Main layout with a number of buttons (e.g. insert new item, show all items, etc.). Each button is associated to a script, which takes the user to the relevant layout. In each of these layouts I show the buttons in a row, and highlight the current layout with inverse colour.
My problem is that some of the buttons lead to the same layout, viewed in different modes, and I don't know how to conditionally highlight the right button.
For instance, Insert new item and Show all items take to the same layout, however in the first case the script views the layout as a form and inserts a new record, while in the second I view as a list and show all records. The layout is the same, though, so I'd need to enact a conditional formatting based on something. How do I do that, and what should I check against?
Thanks in advance for any help.
Regards.
Presumably you are currently using the formula: Get (LayoutName) to decide on your conditional formula, why not try additionally using formulas: Get(WindowMode) and Get(LayoutViewState)?
You could conditionally format the button if (which sends user to MyLayout in browse mode):
Get(WindowMode)=0 and Get(LayoutName)="MyLayout"
Or (which sends user to MyLayout in form view):
Get(LayoutViewState)=0 and Get(LayoutName)="MyLayout"
.
Other functions which may help could be Get(FoundCount) and Get(TotalRecordCount). You can see the entire list of Get functions here.