I create a table dynamically from json data. I then allow the user to update certain elements in the table. Before the update the table looks as follows:
I inspect the element and it has the following:
Then after I update the table, the styles added to the input boxes and selects in the table are removed:
I would like to know, how would I add back these styles (i.e ui-select, ui-btn-inner etc) so that the tables dont lose their styling when I recreate the tables. I want to know how to add back the styles to the select, input and the colour of the "Update TextBooks".
just to shed some more light on the answer so that people understand everything 100%. I was always calling code that basically kept reconstructing the above table, as seen in the pictures above.
In order to keep adding the jQuery Mobile formatting and css to the table everytime one has to call the .trigger() method on the table. So for example I would dynamically create an a table based in the users values entered previously. For this solution lets say my table has an id of id = 'updatetable'.
Thus to fix the above problem simply use:
$("#updatetable').trigger('create');
after you have dynamically created the table.
Related
I am creating a table dynamically using bootstrap using an ajax call. While displaying the said data, in one particular field, if that field (numeric), does not fulfill a condition, i need it to be highlighted (with say a different color) in the table being displayed. How to do this?
I'm trying to make a row show more information that belong to the same table using antd and react (the data nested still belongs to the table, but it is collapsed) as is shown on image below. Searching on antd table documentation, I found a example to nest another table in the main table. Howerver, the second table also needs to have a Header besides it does not fallow the alignment of the first one. Could someone please explain me how I reach there?
example
antd table example
I have a ui grid that has 20 columns, and I would like to be able to tell what the next column will be as I scroll through the horizontal axis so that I can have some text that will tell the users what the names of all the columns they can't see are.
Anyone know if this is possible? As I watch the the inspector and scroll through the columns, I see html attributes changing.
---UPDATE 1----
This is what is all looks like (where it says "home #" is dynamic and will change to show the next column that is out of site)
Based on the ui-grid configuration that you use to render the grid, you already know the order of the columns. You can use this information together with the visible on each column added by the gird itself.
What you need to do is bind a event handler on scroll to iterate over the columns on each change and check the visibility of them. Then the first one with visible === false is the upcoming.
Here is a working Plunker where is used this flag.
I'm using PagedFilterTable in Vaadin to manage pagination. When loading default page, I have set something like this - and I include sorting by some field:
if(this.sortField != null){
table.setSortContainerPropertyId(this.sortField);
table.setColumnWidth(this.sortField, 80);
table.setSortAscending(true);
table.sort();
}
So that happens when the page is loaded and that is fine. After I submit new entry (entries are being added through new, popup window), table gets new row, but the table loses it's sort order in view after popup closes, so sorting is no longer keeped. Problem is I do not know how to get to that table element from that popup window and set sorting again. Why table is being updated and I see it, and sort doesen't? Problem is bigger because I have both windows in separate files and seems to me I can't grab table element easily without modifiying the logic because I am in another window.
How to reload table so that the sort stays same?
I managed to do this after submit:
getUI().getPage().reload();
With that it works, but I am not satisfied. After that line of code, everything reloads again (meaning all queries execute again). Result is good but I don't want after submit whole reloading of page happens (also because none of my other buttons do reload). So I would like only to reload table in parent window.
How can I grab table object from outside window and for example set it's change to immediate and correct change?
Something like this I suppose needs to be written:
getParent().getUI().setImmediate(true);
?
Or better question, how to manage to table sort remains the same after inserting new entry through new window?
I managed to solve it. On the parent window in the windowCloseListener I just added:
myTable.refreshTable(data);
myTable.sortTable(); // my custom method that was Invoked on the page load too
These are my first steps with java, I took grails and vaadin plugin. I want to make simple app with menu bar navigation, so I have got some Vaadin example:
http://demo.vaadin.com/sampler-for-vaadin6#BasicMenuBar
created some commands:
edit.addItem("Cut1", menuCommand1);
edit.addItem("Cut1", menuCommand1);
Each command just draw table from another example:
http://demo.vaadin.com/sampler-for-vaadin6#TableHeaderIcons
Unfortunately each time I hit menu item it draws one table under another table, but what I was expecting is to draw each table in place of previous one.
How to achieve this?
vaadin's UI is stored as state (in a session) on the server. if you add several items they stay unless removed. so e.g. if you want to replace the table there you two options. either removeAllComponents and then add the new one or if you have hold of the original table then you can replaceComponent in the wrapping layout (most likely a VerticalLayout?).
if the table is just supposed to change content, then you are better off to just change/modifiy the dataSource of the table.