How can I provide a list of columns I want hidden on table load through the ColVis extension?
Also, is there a way to retrieve the list of columns currently visible/hidden?
Specify visible columns
You can set visibility with columnDefs or columns options to target specific columns along with columns.visible option to set column visibility.
For example, to hide a second column initially, use the following options:
var table = $('#example').DataTable({
'columnDefs': [
{ targets: 1, visible: false }
]
});
See this jsFiddle for demonstration.
Get a list of visible columns
You can get a list of visible columns bu using columns().visible() method.
var colVisible = table.columns().visible();
See this jsFiddle for demonstration.
The ColVis extension gives no method to hide columns on load. That is .Datatable() job to do.
To get the list of columns which are visible/hidden you can do something like this
var length = myTable.columns().nodes().length,
result = [];
for(var i=0;i<length;i++){
result.push(myTable.column(i).visible());
}
console.log(result);
Here is a demo http://jsfiddle.net/dhirajbodicherla/189Lp6u6/25/
Related
I implemented a dynamic column visibility to hide/show columns, e.g. DT.columns(5).visible(true) and DT.columns(5).visible(false) to show/hide column 5. I also have a callback for createdRow which let's say makes a html button out of the text in column 5.
Currently in createdRow I check this.api().columns(5).visible() and if true then I proceed to do $('td:eq(5)',row).html('<button>'+data[5]+'</button>') cell content, and if false then I return because otherwise I'd overwrite the current 5th <td> which is not the intended one. But then when I unhide column 5, it comes up as text since I did not run the previous code.
I'd like to be able to run the code and cache the html of the cell in column 5 so that when it's unhidden, it comes up with the intended <button>. What's the best way to do that? The column-visibility event?
Note that I know I can use the render: function (...) {} option for the column, but I do not want to use that because it affects the raw data of the table and affects filtering and searching - I want the raw data to remain unaffected, which is why I was using the createdRow or rawCallback callbacks.
Assume column 5 has visibile: false in the DataTable initialization object which looks like this:
var DT = $('#dt').DataTable({
...
createdRow: function (row, data) {
if (this.api().column(5).visible()) {
$('<button>' + data[5] + </button>')
.appendTo($('td:eq(5)',row).text(''));
}
);
Cheers
Look into using columnDefs and the 'render' function instead...
var DT = $('#dt').DataTable({
...
"columnDefs":[
{
'targets':[0],
'visible':false,
'render':function(data, type, row, meta){
...
}
]
});
https://datatables.net/reference/option/columns.render
https://datatables.net/reference/option/columns.data
I just started using dgrid, and going through the dTunes sample, I'm unable to find the id associated with each row in the list. This is pretty remedial on my part, but how would I also get the id I sent from the datasource?
define([
'require',
'dgrid/List',
'dgrid/OnDemandGrid',
'dgrid/Selection',
'dgrid/Keyboard',
'dgrid/extensions/ColumnHider',
'dojo/_base/declare',
'dojo/_base/array',
'dojo/Stateful',
'dojo/when',
'dstore/RequestMemory',
'put-selector/put',
'dojo/domReady!'
], function (require, List, Grid, Selection,
Keyboard, Hider, declare, arrayUtil, Stateful,
when, RequestMemory, put) {
var cstsNode = put(listNode, 'div#cstsCars');
...
var cstsList = new TunesList({}, cstsNode);
var dataCSTS = new RequestMemory({ target: require.toUrl('./dataCSTS.json') });
...
dataCSTS.fetch().then(function (cars) {
cstsCars = arrayUtil.map(cars, pickField('Description'));
cstsCars.unshift('All (' + cstsCars.length + ' CSTS Cars' + (cstsCars.length !== 1 ? 's' : '') + ')');
cstsList.renderArray(cstsCars);
});
...
cstsList.on('dgrid-select', function (event) {
var row = event.rows[0];
console.log(row.id); // shows row number. How do I get the real id or other fields?
console.log(row.data); // shows row text that is displayed ("sample text 1")
console.log(row.data.id); // undefined
});
Here is a snippet of sample data like I'm supplying:
[{"id":"221","Description":"sample text 1"},
{"id":"222","Description":"sample text 2"},
{"id":"223","Description":"sample text 3"}]
I'd like to see the id. Instead, row.id returns 1,2 and 3, ie the row numbers (or id dgrid created?).
You haven't really shown a complete example, but given that you're using a store anyway, you'd have a much easier time if you let dgrid manage querying the store for you. If you use dgrid/OnDemandList (or dgrid/List plus dgrid/extensions/Pagination), you can pass your dataCSTS store to the collection property, it will render it all for you, and it will properly pick up your IDs (since Memory, and RequestMemory by extension, default to using id as their identity property).
The most appropriate place to do what you're currently doing prior to renderArray would probably be in the renderRow method if you're just using List, not Grid. (The default in List just returns a div with a text node containing whatever is passed to it; you'll be passing an object, so you'd want to dig out whatever property you actually want to display, first.)
If you want a header row, consider setting showHeader: true and implementing renderHeader. (This is false in List by default, but Grid sets it to true and implements it.)
You might want to check out the Grids and Stores tutorial.
I think the problem might be that I was modeling my code based on the dTunes sample code, which has 3 lists that behave a little differently than a regular grid.
For now, I'm using the cachingStore that is available in the lists. So the way I get the id:
cstsList.on('dgrid-select', function (event) {
var row = event.rows[0];
var id = storeCSTS.cachingStore.data[row.id - 1].id; // -1 because a header was added
console.log(id);
});
I'm not sure whether this will work if I ever try to do sorting.
I am using slick grid to show JSON data.
On external button click i want highlight specific row based on column values.
Such as highlight row which have cost=75 and venue_id =87 and Impression=268
Got solution :
dataView.getItemMetadata = function (row) {
var item = dataView.getItem(row);
if (item["" + columnName+ ""] == colValue)
{
return { cssClasses: 'highlight' };
}
return null;
}
grid = new Slick.Grid("#myGrid", dataView, myColList, options);
The other suggested option seems to be have heavy load on my system, as my system have thousand of records and a particular row have to highlighted and suggested solution kind of refreshes the whole table. For some reasons it is not working for me.
I got around this by using Slickgrid's flashCell. Even no need of getItemMetadata()
var rowId=dataView.getRowById(idvalue);//id of the row to be highlighted, as slickgrid enforced an id field
grid.scrollRowToTop(rowId);//makes the row visible
grid.getColumns().forEach(function(col){//get all the columns
grid.flashCell(rowId, grid.getColumnIndex(col.id));//flash it
})
Hope this helps to coming to this page for the answer.
how to select data of single column from a grid data.
The grid data is passed as following:
var url = "/Main/Grid?tbname="+parameter;
var jsonp = new $.ig.JSONPDataSource({
dataSource: url, paging: {
enabled: true, pageSize: 10,
type: "remote"
}
});
$("#listingGrid").igGrid("dataSourceObject", jsonp).igGrid("dataBind");
I have to retrieve data in another page from this grid and select one column from this data.
and i have retrieved data like this
var ds = window.parent.$("#listingGrid").igGrid("option", "dataSource");
but not able to access one column data.
I'm assuming that since you are using the DataSource directly that you don't want the actual columns in the grid, which might differ from the columns in the data source depending on how you have the grid set up.
The easiest way to go about this would probably be to call the data function off of the data source once you retrieve it from your other page. This function returns an array of objects that are the items in each row. Once you have that you can iterate over each of the items and query the individual property.
var ds = window.parent.$('#listingGrid').igGrid('option', 'dataSource');
$.each(ds.data(), function (i, item) {
var itemProperty = item.Property;
// ...
});
You'll need to make sure that the data is all loaded from the service first though or data will possibly return an empty array.
I have a custom built tableview, where I am building the text in the table row by row. I have a big loop that goes through a set of XML data and builds the row based on an RSS XML feed.
Then I added an event listener to see when somone clicks on one of the rows:
tableview.addEventListener('click',function(e)
{
showrow(theid);
});
My question is, during the building of the row, how do i define theid as a variable associated with that row?
I tried a simple
var theid = item.getElementsByTagName("id").item(0).text;
in my loop, but that does work as its always set to the last item in my loop of XML entries.
Thanks!
As you are creating the TableViewRows in your loop, just add the 'theid' property to it with dot notation
var row = Ti.UI.createTableViewRow();
row.theid = item.getElementsByTagName("id").item(0).text;
row.addEventListener('click', function(e){
alert( e.source.theid );
});
Note: If you are adding additional objects on your TableViewRow (like images, labels, etc) make sure you look at the event propagation in the KitchenSink to make sure that 'e.source' is the tableViewRow and not the UI objects added to the tableViewRow
If you want to add the eventListener to the table (not the row) just check the 'rowData' of the click:
table.addEventListener('click', function(e){
alert( e.rowData.theid );
});
you should add custom variables to your row like
var newRow = Ti.UI.createTableViewRow({
title: 'my new row',
customID: item.getElementsByTagName('id').item(0).text
});
tableViewRow.add(newRow);
if that doesn't work, try this:
var newRow = Ti.UI.createTableViewRow({
title: 'my new row',
'customID': item.getElementsByTagName('id').item(0).text
});
tableViewRow.add(newRow);