I want to create dynamic table with vue.
I have button and table with 3 columns.
I want that if i click on the button only the first and second colume will show and on addition click only the first and the third.
So my question is what better is to do:
A. to hide one colume on click
B.to create customized table in the vue.js code by click
without knowing any specifics, I'd go with easiest way, which for me would be to do two things. Use button to toggle value ie. #click="showCol=!showCol" and the for the columns I'd do <td v-if="showCol">{{col2data}}</td><td v-else>{{col3data}}</td> you can also do <td>{{showCol?col2data:col3data}}</td> And I'm sure there are some other ways too, but I'd try one of those. The former should use a shadow dom to replace the data, whereas the second option would not, so I'd imagine that if you have enough rows where that would matter, the second version may be faster. As always, test & measure if you want to know what's better.
Related
I have a search form that fills a table with the results of an API query. Each item on the table have an edit button. When the user click on that button, a view is showed, with the detail of the item. The problem is when I want to go back to the list, I lost the last search result. What is the best way to solve this problem?
I see two approaches: In first one, I save the results of the query through Vuex, but I dont know if Vuex is used to save large amount of data. On the second approach, I show/hide the components instead of change the route: when I want to edit an item, I hide the table and show the edit view. When I want to go back to the list, I hide the edit view and show the table. Is there another way to solve this problem?
Thanks in advance.
I want a user to be able to click a row in the MUI-Datatable, so they can see additional content. The current renderExpandableRow function has the right styling, but I don't want a new row. I want the cell in the first column to show additional data. Is there a way to do this?
Note: I'm also going to need buttons that will expand all/collapse all, so I need a solution flexible enough to do that.
I found a solution to my question.
I made the first column's content a Button using customBodyRender. The column with expandable content became the second column. This column has a customBodyRender with a Collapse component. I store in my component's state all ids of my data objects and whether or not they are expanded. When the Button is clicked, my component's state is updated, which in turn changes whether or not the Collapse component is open.
I also used customToolbar in the table options to generate an expand all/collapse all button, which just sets the state of all rows to expanded/collapsed.
My scenario: I have a datagridview and it contains some data. User can select a row, or multiple rows in that datagridview, and they need to know a summary about those rows they selected.
Handling multiple rows in datagridview is easy enough, and I have no problem getting what the user need: Two numbers indicate how many item is selected, and their total weight in those rows. I passed that data to a small summary form to display, and I put the code to show that form under dgv.SelectionChange().
But then disaster follow: each time user select a row, that form will appear. Which is, if user select 20 rows, they will see 20 summary forms.... and any more than that, well.. you can imagine. I thought about putting something inside SelectionChange() to check if user has stopped their selection.. but can't think of any.
This seems like a very simple matter, but somehow I can't figure it out..
My question, how to know if a user has stopped their selection in a datagridview ?
I still don't have enough points to just comment, so my answer would be I don't think you can reliably without adding another control (ie, button). You can't read the users mind and since the number of rows can be variable, how would you ever know? You could try something like if the cursor leaves the DGV but that would be frought with issues as well. While it would be an extra click for those just selecting 1 row, I still think having a "Get Summary" button would be the way to go. Sort of like when selecting items to compare - you can click any number of items and while they may show which items you've picked so far in another area, the comparison table doesn't appear until you click the Compare button.
From what I understand, you actually have two options.
Add a button
Since you can't figure out when the selection is done, just add a button that will call the Form you want to display, that way you are sure that it will display only when user asks for it.
Use a timer
Another option is to use a Timer, every time the selection changed, you reset the timer to one second (to keep the example simple).
And whenever the timer does a tick, you call the Form and stop the timer. That way it will trigger one second (or less) after the user made the selection and gives him one second to change it...
Honnestly, I think the button option is the best, as you give the power to your user. Maybe they will want to select some rows but don't want to see your form, as they will only copy it to paste it somewhere else...
Consider the heading (ABAP) pseudo code on a SALV-Grid.
I need something like this, or, some way to remove the visual vertical bloating of rows in the grid when the columns that differentiate them are hidden.
After a lot of reasearch, I doubt that such a thing exists, so I need to work around it.
I want to change just the view, I don't want to modify the underlying internal table.
Any ideas on how to best accomplish this? Events maybe?
Make a copy of the data from your table and remove duplicates from the copy. Pass the copy to your grid. The hurdle here would be ensuring you update the original table if edit, delete, and create functionality is enabled in your grid.
How many times have we seen this type of selector:
List Box Selector http://geekswithblogs.net/images/geekswithblogs_net/dotNETvinz/MoveItemsListBox.jpg
I was just about to start creating this in a WinForms app, when I thought that others may have some ideas for doing this better. We need it to sort - so the right hand list will need up/down buttons. But this seems so old school. I love devexpress components, and was thinking of asking them if they would consider adding a component that handles this functionality with a slick UI.
I am thinking that a graphical representation of the objects, and a graphical representation of the listboxes - that would be a more intuitive way to move items around.
Has anyone seen an open source project like this?
If a CheckListBox won't suffice (and it usually will), then the "modern" approach would be to use a ListView or similar component with a "Transfer" column. Render the button inline in that column, one for each row, so that it only takes one click to move an item from one to the other.
You see this everywhere in Vista, usually with hyperlinks as opposed to buttons. Instead of clicking on an item and then choosing an action, you click the action at the item level.
I wouldn't go overboard with slickness as it can impair functionality, but the dual-listbox screen is definitely old-school.
Also, if there's a very large amount of data to manage, it helps to provide a progressive search at the bottom of one or both lists.
I have done this type of selection using (essentially) a single CheckListBox that displays each item as an image. Part of the image looks like a LED, which is on (bright) if the item is selected or off (dark) if it is not selected.
This works well if you have a reasonable amount of data to select from, and also works well in a multi-column format if you can predict that the options will have reasonably similar lengths.
Allow users to drag items in/out of list 2, and also drag to reorder in list2.
(All items dragged out of list2, and dropped anywhere outside the list, get put back into list 1, in their correct place in the list by alphabetical or natural order.)
You can merge the two list boxes into one with the help of groups (LVGF_GROUPID flag): one group for selected and one for not selected.
You can also implement group membership changes with drag-drop between them. This way single drag-drop can move an item into the other group at the appropriate position, saving most/all of the other buttons.
Additionaly the bottom of each group can have one pseudo item with help text (i.e. "Drag items here to...") that is visible only when relevant.