I am using bootstrap grid framework i have 6 column in my table and based on condition those column will appear or disappear. Suppose I hide 3 columns from the database. Now I can see only 3 column in my table , but they are not arranged properly. I want these 3 column should be adjustable automatically in my table. Using angular JS to get the column labels and data for my application.
I am new in bootstrap, any help would be commendable.
If you have columns that are generated in the run time then you can set the width accordingly or set the bootstrap grid class.
Suppose you have 3 columns then you will add class col-md-4 to those columns, each adding up to 4 (width of the column) * 3 (columns) = 12 (the max col-size as specified in the bootstrap grid documentation). If you have generated 2 columns only then you can set class col-md-6.
You can do this calculcation in your javascript code.
Related
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've got an spreadsheet with hundreds of problems listed out that map to a smaller number of solutions. I want to use this data to generate a drop down that selects the problem from a data range, and then next to it, another cell that populates the solution from one row over.
Example:
Column A Column B
Issue 1 Solution 1
Issue 2 Solution 4
Issue 3 Solution 5
Issue 4 Solution 1
Issue 5 Solution 1
Issue 6 Solution 3
Issue 7 Solution 2
If I want to create two cells where the first one is a drop down list (A1:A7), how can I make the second cell populate using a static column (B), but with a dynamic row number based off the first cell. So if someone chooses Issue 6 from the dropdown (A6) the second cell will know to populate Solution 3 (B6)?
Thnaks
To do this, you need two steps:
1) For the first cell where you'll have the dropdown option, click on Data Validation command (under the Data ) In the Settings menu in the dialogue box, click on "list" and set the Source to the Column A cells (without the header). This will make these the options in the drop down menu
2) For the second cell where you'll have the solution automatically change depending on the first cell, you'll need to use the vlookup function. The syntax looks like this: VLOOKUP(lookup_value,table_array,col_index_num,range_lookup)
In this case, the lookup_value will be the first cell, the table array will be your original table (without the headers), the col_index_num will be 2 (which means it will take the answer from the second column), and range_lookup will be FALSE (which means it will look for an exact match)
If you want more information about either one of these steps, here's the official help sections for Excel 2010: Create a drop down link , Vlookup
I am facing problem with the caching fetcher of f:fecet inside datatable . Here i have the situation where the no of column are varying based on the filter check so what happening on 1st time after render the page suppose it showing 7 column with their headings now if i make any filter check and press a button for re rendered the screen there here i am seeing the column heading remain same as before ( 7 ) even values of column has changed and it's 5 . Here the expected result would be to 5 column heading . Please anyone can suggest me how to control the caching of column header thanks .
I need to know how to add a row to a grid. I declared ui-grid-b with 3 columns. I need 8 buttons in this grid in my footer. How to do this?
You should read about it in jQueryMobile docs. Basically "grids are designed to wrap to multiple rows of items. For example, if you specify a 3-column grid (ui-grid-b) on a container that has nine child blocks, it will wrap to 3 rows of 3 items each." You should also read about toolbars. It may be usefull for a good start.
There is a full explaination:
http://jquerymobile.com/demos/1.1.1/docs/content/content-grids.html
We're developing a web application using the Vaadin framework.
In this app I have an existing table with a range a columns. On a user action I want to remove some of the existing columns and add some other additional columns.
This proved quite easy, however, I want the added column to be placed as the first column in the table, on the out most left edge of the table, and I can't seem to find any support for this action. Every column that's added is by default placed as the last column, in the out most right of the table.
What you should do is to set your
table.setVisibleColumns(your sorted order of columns)
and also
table.setColumnReorderingAllowed(false)
it might be good to throw in a force of relaoding the datasource so
table.setContainerDataSource(table.getContainerDataSource());