I have setup my table in Tabulator with responsiveLayout:"collapse" and responsiveLayoutCollapseStartOpen:false.
My table display properly with collapsed columns.
I added formatter:"responsiveCollapse" as column and I properly get the column with + and - icons and can manually expand/collapse the columns.
But for usability on a smartphone, the icon renders really a bit small.
I want to add to expand/collapse based on callback rowClick.
I found responsiveCollapse and toggleList in tabulator.js, so I think I know what needs to happen. However I am totally struggling how to return it out of rowClick.
Thank you very much for a hint in advance.
In the tabulator constructor I have:
columns:[
{ formatter:"responsiveCollapse", width:30, minWidth:30,
hozAlign:"center", resizable:false, headerSort:false, responsive:0 },
{ title:"Ren.", field:"Race_Number", sorter:"number",
hozAlign:"center", minWidth:60, widthGrow:1, responsive:0 },
]
And basically I want to achieve the some functionality as formatter:"responsiveCollapse" in rowClick:
rowClick:function(e, id, data, row){
//trigger an alert message when the row is clicked
//what to do here to achieve same as formatter:"responsiveCollapse"
},
You could copy some of the code from the built-in responsiveCollapse formatter to achieve this. It will involve accessing some private variables, which is a bit naughty, but it will do the job:
rowClick:function(e, id, data, row){
var config = cell.getRow()._row.modules.responsiveLayout; //get the responsive config object for the row
var collapseEl = config.element; //get the collapsible element for the row
if(collapseEl){ //check if the row has any collapsed data
config.open = !config.open; toggle the open state
//toggle the collapse element
if(config.open){
el.classList.add("open");
collapseEl.style.display = '';
}else{
el.classList.remove("open");
collapseEl.style.display = 'none';
}
}
}
this was very helpful, remember to comment out "toggle the open state" and also update
el.classList.remove("open");
to
collapseEl.classList.remove("open");
Related
I am stuck in a problem where I want to rename a column header by click on it in a cell, I am using wijmo grid to make it happen,my rows are editing but I also want to edit column headers by clicking on it and change
After searching a lot i am unable to obtain through wijmo, can I implement it through some other method? so can edit both rows and column headers as well.Here below is wijmo grid attempt.
constructor(props){
super(props);
this.state= {
categoryid:0,
saved:false,
data:this.getdata(),
rows:0
}
}
getdata(){
let data = [];
let num=parseInt(this.state.rows);
console.log(typeof(num),num);
for (let i = 0; i < num; i++) {
data.push({
id: i,
country:"Enter Data",
sales: "Enter Data",
expenses: "Enter Data",
});
}
return data;
}
render(){
return(
<wjGrid.FlexGrid itemsSource={this.state.data}>
</wjGrid.FlexGrid>
)
}
But through this approach I can only edit row cells, I also want to edit column headers which in above example are, id,country,sales,expenses.How can I rename them directly on table, if not wijomo grid, how can I obtain this from other method like react-table or any other.Any other source will be also helpful for me as I am stuck in this for a long time.
You could use the wijmo's Popup control to edit the header. Simply create a Popup with an input element and handle the click event of FlexGrid. In the click event, show the popup using the show method. Refer to the sample below:
Sample
I have a Master-Detail ag-grid. One column has checkboxes, (checkboxSelection: true). The details grid have a custom status panel with a button. When the user clicks the button in any specific Detail grid, I don't know how to get the SelectedRows from just that one specific detail grid.
The problem is they might leave multiple details displayed/open, and then looping over each Detail Grid will include results from all open grids. I'm trying to isolate to just the grid where the user clicked the button.
I tried looping through all displayed/open detail grids to get the Detail grid ID. But I don't see any info in this that shows me which one they clicked the button in.
I tried in the button component to see if, in the params, there is anything referencing the detailgrid ID that the button is in, but I did not see anything there either.
This is the button component:
function ClickableStatusBarComponent() {}
ClickableStatusBarComponent.prototype.init = function(params)
{
this.params = params;
this.eGui = document.createElement('div');
this.eGui.className = 'ag-name-value';
this.eButton = document.createElement('button');
this.buttonListener = this.onButtonClicked.bind(this);
this.eButton.addEventListener("click", this.buttonListener);
this.eButton.innerHTML = 'Cancel Selected Records <em class="fas fa-check" aria-hidden="true"></em>';
console.log(this.params);
this.eGui.appendChild(this.eButton);
};
ClickableStatusBarComponent.prototype.getGui = function()
{
return this.eGui;
};
ClickableStatusBarComponent.prototype.destroy = function()
{
this.eButton.removeEventListener("click", this.buttonListener);
};
ClickableStatusBarComponent.prototype.onButtonClicked = function()
{
getSelectedRows();
};
Here is the code to loop through and find all open detail grids:
function getSelectedRows()
{
this.gridOptions.api.forEachDetailGridInfo(function(detailGridApi) {
console.log(detailGridApi.id);
});
I was able to work this out, so thought I'd post my answer in case others have the same issue. I'm not sure I took the best approach, but it's seemingly working as I need.
First, I also tried using a custom detail cell renderer, as per the documentation, but ultimately had the same issue. I was able to retrieve the DetailGridID in the detail onGridReady function--but couldn't figure out how to use that variable elsewhere.
So I went back to the code posted above, and when the button was clicked, I do a jquery .closest to find the nearest div with a row-id attribute (which represents the the DetailgridID), then I use that specific ID to get the rows selected in just that detail grid.
Updated button click code:
ClickableStatusBarComponent.prototype.onButtonClicked = function()
{
getSelectedRows(this);
};
Updated getSelectedRow function:
function getSelectedRows(clickedBtn)
{
var detailGridID = $(clickedBtn.eButton).closest('div[row-id]').attr('row-id');
var detailGridInfo = gridOptions.api.getDetailGridInfo(detailGridID);
const selectedNodes = detailGridInfo.api.getSelectedNodes()
const selectedData = selectedNodes.map( function(node) { return node.data })
const selectedDataStringPresentation = selectedData.map( function(node) {return node.UniqueID}).join(', ')
console.log(selectedDataStringPresentation);
}
It looks like a simple task, but I already spent 4 hours to find a solution. How can I highlight the entire row by cell click?
On register api I have next
$scope.gridOptions.onRegisterApi = function(gridApi){
$scope.gridApi = gridApi;
gridApi.cellNav.on.navigate($scope,function(selected){
if('.ui-grid-cell-focus '){
console.log("fired class")
$(selected.row.entity).addClass('ui-grid-cell-focus')
}
console.log("fired cell")
$(selected.row.entity).addClass('ui-grid-cell-focus')
});
};
I see how click on cell is fired, but I cannot force to color the row and I don't want to select the row, because I use check box selection for this purpose, I just want to highlight the row by click on any cell in this row. Could somebody tell me where my mistake is?
Attached plunker
One way to accomplish what you want is to add a cellClass definition to your columnDefs. That function takes two params: grid and row.
$scope.gridOptions.columnDefs = [{
name: 'id',
width: '150',
cellTemplate: "",
cellClass: getCellClass
}, {
name: 'name',
width: '200',
cellClass: getCellClass
} ...
];
function getCellClass(grid, row) {
return row.uid === selectedRow ? 'highlight' : '';
}
On click you could set a variable to the uid of the row, and inside the cellClass function you can check if the uid of the current row matches the uid of the selected, if so, you can set the class to a class that properly reflects the background color of the selected row.
var selectedRow = null;
gridApi.cellNav.on.navigate($scope, function(selected) {
if ('.ui-grid-cell-focus ') {
selectedRow = selected.row.uid;
gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
}
});
Here's a link to your updated plunker: http://plnkr.co/edit/AgpAI2cmdqgNsSLVNjYA?p=preview
If you don't like the cellClass approach you could define custom cellTemplates and similarly react to a property you set on the row entity.
I'm trying to alter the "items" array attached to a combo box inside an editable field of w2ui's grid after the grid has been initially rendered.
To demonstrate my issue I've set up a jsfiddle taken from the "grid inline editing" demo here:
http://jsfiddle.net/8dkdoc4p/5/
and since some box appeared saying I must include code (why?) here's conceptually what I am trying to do. Note that this won't make too much sense unless you've seen this grid demo: http://w2ui.com/web/demos/#!grid/grid-21
function alterComboBox() {
people.push({ id: myid, text: "ID " + myid});
myid++;
w2ui['grid'].refresh();
}
The idea is to add another item for the combo box at run time and have the grid actually display the new item as another option.
Thanks in advance!
You have to re-assign the global record "people" to the w2ui grid columns after altering the record.
In case of your "select" field, you also have to call the render() method.
http://jsfiddle.net/8dkdoc4p/8/
var myid = 22;
function alterComboBox() {
people.push({ id: myid, text: "ID " + myid});
myid++;
w2ui['grid'].getColumn('list').editable.items = people;
w2ui['grid'].getColumn('combo').editable.items = people;
w2ui['grid'].getColumn('select').editable.items = people;
w2ui['grid'].getColumn('select').render();
//w2ui['grid'].refresh(); // no need!
}
Is it possible to set a row on a fixed position? For example, we have now a total row, and we always want the total on top, after sorting etc.
Is there a plugin for this?
We have tried to do this in the onLoadComplete by redrawing the whole table like so:
var rowIDs = $(this).getDataIDs();
var rowID, columnID;
$(this).clearGridData();
for (rowID in rowIDs) {
for (columnID in data.rows[rowID]) {
$(this).addRowData(rowIDs[rowID], data.rows[rowID], (data.rows[rowID][columnID].first ? 'first' : null));
break; // Only do this for the first column
}
}
but that is bad for performance, we have thousands of rows.
after Oleg's comment:
The total row is just a row from our dataset. The dataset has this format:
Columns: 'Network', 'Clicks', 'Views'
data = [
{
'Network': {value:'Google'}, 'Clicks': {value:38392882}, 'Views':{value:3939922}
},
{
'Network': {value:'Sanoma'}, 'Clicks': {value:177883}, 'Views':{value:39293}
},
...
,
{
'Network': {value:'Total'}, 'Clicks': {value:993832732223}, 'Views':{value:3932293939}, 'first': true
},
...
]
}
So we set in our datarow which row we want to have on top ('first':true).
By processing, we use that to set in on top of the table. Hopefully this is more understandable :)
Thanks in advance,
Eddy
The footer are placed in the div with the class "ui-jqgrid-sdiv" and it is placed typically below the div with the class "ui-jqgrid-bdiv" where the main grid contain are placed. So to move the footer on top of page you need to move the the footer div. Additionally you should place bottom border in the style which you need. The code could be like the following:
$('div.ui-jqgrid-sdiv').css({
"border-bottom-style":"solid",
"border-bottom-color":"#a6c9e2",
"border-bottom-width":"2px"
}).insertBefore($('div.ui-jqgrid-bdiv'));
as the result you will receive
See the demo live here.