asked on September 23, 2024
Hi Team ,
We have a requirement to take input on corresponding data rows in flat view , I am aware that we can make the fields editable and then take the data using the event datachanged.
I was wondering , Is there a way to add a dropdown as a way to take input for the rows in flat view ?
⋅ September 23, 2024
Hello, Pranay!
Thank you for writing to us.
Creating a dropdown input for modifying cell values is possible within Flexmonster. You are welcome to check this example, where first-column values can be selected from a dropdown: https://jsfiddle.net/flexmonster/9dyfvcL7/
The key implementation steps are the following:
<datalist> element to the page to display the list (HTML, line 5)getMembers API call (JS, lines 8-14). Use these members to populate a dropdown and validate the input changes.customizeCell API call, replace the cell content with <input> tags connected to the data list. (JS, lines 30-40).Please let us know if the suggested approach works for you.
Best Regards,
Maksym
⋅ September 23, 2024
Hi Maksym ,
Thanks for the quick response , one follow up question on that
if go with editing option as true for the pivot component
options: {
grid: {
type: "flat",
selection: false,
},
editing: true
}
Is there a way to avoid editing the dropdown values ?
⋅ September 24, 2024
Hello, Pranay!
Thank you for your reply.
Given our understanding of your explanation, you would like to use the editing option to enable a dropdown value selection for a cell without the text input. Please tell us if this is the case and provide a detailed description of the dropdown feature. In particular, should it be linked to an existing editing feature (the option and datachanged event), and should it be configured for all fields or just a part of them?
The example in our previous message showcased the potential to add a custom edit functionality. This solution does not rely on existing editing functionality since the inputs are injected with the customizeCell function and should be configured partially independently from our component.
We are looking forward to hearing from you.
Best Regards,
Maksym
⋅ September 25, 2024
What I am trying to say is that if editing option is true , Flexmonster allows me to edit the data label outside of the provided options , Is there a way I can disable edit option for this particular column in flat view ?
2nd point , I am using this solution with react. I don't think I can map the handleChnage function in react script to the input html tag passed as a string in cell.text , Is there any other work around for that ?
⋅ September 26, 2024
Hello, Pranay!
Thank you for the reply.
The current editing implementation can only enable text input on all cells and has no additional configurations or ways of partially restricting it. Referring to your second point, adjusting it to work in React should be possible by adding the function directly to the window object.
However, if we have a correct understanding, you would like to use dropdowns and make them compatible with Flexmonster's built-in editing functionality. In that case, note that our example (https://jsfiddle.net/flexmonster/9dyfvcL7/) is incompatible with the editing option, as it separately handles inputs injected with a customizeCell. Hence, the approach used in this JSfiddle would not work for you.
Before proceeding further on this matter, could you tell us how crucial the dropdown feature is for your workflow?
Looking forward to hearing your reply.
Best Regards,
Maksym
⋅ September 26, 2024
Hi Maksym ,
To explain the workflow , we have 2 separate views of the dashboard
one for the users , where one column 'comment' is editable for feedback and 2-3 columns require boolean ('True'/'False') values from the users as input.
The other view is with admins , where they can filter the same data based on the standardized options ('True' / 'False' ) . so we wanted to limit the options for the users to give inputs in such columns to improve the user experience of filtering the data for admin view
⋅ September 27, 2024
Hello, Pranay!
Thank you for explaining your use case.
We understand your request to limit user options in the editable columns with booleans. This feature could potentially help improve the user experience. However, achieving this is not currently possible within Flexmonster.
The only possible solution for validating the inputs would be to handle the updates in the datachanged event and not save them in the database. Additionally, you could inform users about incorrect input through the pop-up window created by the alert method.
If you have any further questions, please let us know.
Best Regards,
Maksym