In extjs I have a GridPanel.
I want to hide some of the columns of this gridpanel, I am using Hidden="true" for this and it is working fine.
The problem is, when I click on the Grid menu, there is an option called 'Columns'. When you mouseover 'Columns' you can check/uncheck the columns you want to show/hide.
I want to display the hidden columns in this list(unchecked) so that user can check them and manually display it on the grid.
I tried setting Hideable="true" but still these columns are not displying in the 'Columns' list.
Please suggest a solution
The configuration option is hidden:true (lowercase), for example:
,columns:[{
text:'Company'
,dataIndex:'company'
,flex:10
},{
text:'Price'
,xtype:'numbercolumn'
,dataIndex:'price'
,align:'right'
,width:80
},{
text:'Last Updated'
,xtype:'datecolumn'
,dataIndex:'lastChange'
,align:'right'
,width:135
,hidden:true
},{
text:'Industry'
,dataIndex:'industry'
,flex:4
}] // eo columns
In this case, column Last Updated is initially hidden, but still appears in the column menu. If you still have troubles, make a showcase at https://fiddle.sencha.com
Related
I'm using the full-calendar component for Angular and I want to customize the content of each date cell according to different conditions. For example if the date is invalid (I have a function that validates the date), I want to change the date's cell background color. Otherwise, if its valid I want to add a plus button inside to add events. Besides that I want to add custom animations and hover effects.
How can I take control of the date is being render ?
I manage to change the background color with dayCellDidMount hook:
dayCellDidMount: (arg) => {
if(!this.dateIsValid(arg.date, arg.isPast)){
arg.el.style.backgroundColor = "#eeeeee";
}
},
I don't think that's the best way to do it and I still can't manage to add the plus button inside the cell.
Can someone achieve this or something similar? Your help would be appreciated, thanks.
If you know another calendar to integrate with Angular that has this features I'm open to suggestions.
I am using wenzhixin bootstrap table with server side pagination. My table has two special column(First column for row Guid row id, Second column include two button for each cell)
My problem is, I should hide first column content because I don't want to see all Guid id by Users. Moreover, My table data coming with server side pagination. I couldn't button with html code for second column.
How can I add custom column for server side pagination or how can I add attribute to all cells in the first or second column?
To hide a column, you can use either JavaScript command after the bootstrapTable('load',..) if you used that, or in a document ready block:
$table.bootstrapTable('hideColumn', 'name')
shown on Bootstrap-Table site: bootstrap-table.com: showColumn-hideCoulumn
or if defining within the table, add data-visible="false" to the column you wish to hide.
bootstrap-table.com: column-options visible
i.e.
<table id="table"
data-toggle="table"... >
<thead>
<tr>
<th data-field="id" data-visible="false" >ID</th>
For the buttons - I am not sure what type of project this is for - but I solved this by adding link buttons to the table rows via data-formatter - read up on this on the API documentation bootstrap-table.com/docs/api/column-options/#formatter
I used the examples found on github.com/wenzhixin/bootstrap-table/issues/1765 - under Format -> 'Basic Format' - which shows how to add a link (button via Bootstrap CSS). To make the link specific to a row, use row[] to get a field value, or you can even use the id column instead of hiding it, if that is your field (use 'value' instead of row[] then - see examples).
I did mine something like:
<th data-formatter="buttonFormatter">View Links</th>
then in the javascript <script> block:
function buttonFormatter(value, row, index) {
var id= row["id"];
var url = "https:/...&id=" + id;
return 'View';
}
These are based roughly on stuff I've been doing recently - haven't tested these examples, but should give you a good start if you haven't already figured it out...
I want to save the list of hidden columns so that next time when the table is loaded I show the table with the same set of column which the user chose to see in the past. Is there a way to get a list of all hidden columns in bootstrap-table library.
You can use the cookie extension to solve your problem, here is an example: http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/cookie.html.
The plugin saves:
Sort order
Page number
Page number from the list
Visible columns
Search text
Docs here: http://bootstrap-table.wenzhixin.net.cn/extensions/#table-cookie
you can use the jquery datatables plugin to easily handle this problem, this plugin auto generate the table columns and show that.
you will get more information from link below,
https://www.datatables.net/
hope it helps.
try this below
var tab = $('#table').bootstrapTable('getHiddenColumns');
$.each(tab, function(index, value) {
alert(value.title);
})
I am refreshing dojox.grid.EnhancedGrid using dojo.data.ItemFileWriteStore per second. I have a dijit.layout.TabContainer where EnhancedGrid is present in one of the tab. When I switched the tab and come back to grid tab, the whole grid disappears.
What can be the solution?
var store = new dojo.data.ItemFileWriteStore({
url: '',
data: result,
urlPreventCache: false
});
grid.setStore(store);
I'm not sure about using EnhancedGrid but I had the same error when I used DataGrid to create a dynamic and changing matrix and this is how I was able to fix it.
Your problem arises because:
Your old structure property in the grid doesn't support the new store (different fieldnames etc.). If you don't get the structure right, Dojo complains and you don't see a grid.
I'm pretty sure it's this one. grid.setStore(newStore) doesn't work the second time probably because grid adapts itself to the first declaration of the store. I had tried the grid.setStore() and grid.setStructure() methods and it didn't show up after the first "refresh".
My solution:
Empty your container with dojo.empty() and create a new grid in that container every time you refresh with your new store
I have searched in many places in internet, but so far I cant able to find a right way to do "cell" selection on dojo datagrid.
If anybody know how to do cell selection instead of row selection than it will be helpful for me.
It is a one of the basic requirement in dojo datagrid, but so far, I can't able to find out.
Please help me.
although DataGrid does not support this, you can try dojox.grid.EnhancedGrid. There's a Selector plugin available in dojo1.6, which supports cell selection.
Here's how to use it:
dojo.require('dojox.grid.EnhancedGrid');
dojo.require('dojox.grid.enhanced.plugins.Selector');
//......prepare the store, structure, etc.
dojo.ready(function(){
var grid = new dojox.grid.EnhancedGrid({
store: myStore,
structure: myLayout,
rowSelector: "20px",//This is used to select row.
plugins: {
selector: {
//row: false //If you'd like to disable row selection, just add this.
}
}
});
grid.placeAt('aDomNode');
grid.startup();
});
There's a dojo campus document covering this plugin.