I have the following code which allows the columns in my table to sort by ascending or descending order.
protected void setSortColumn(GridPanelColumn gridPanelColumn, TableColumn column) {
table.setRedraw(false);
// check if already selected
if (sortGridPanelColumn != null && sortGridPanelColumn == gridPanelColumn) {
// toggle sort order
sortAscending = !sortAscending;
} else {
// set new sort column
sortGridPanelColumn = gridPanelColumn;
sortAscending = false;
table.setSortColumn(column);
}
// set sort direction
table.setSortDirection(sortAscending ? SWT.UP : SWT.DOWN);
// refresh table
tableViewer.refresh();
table.setRedraw(true);
}
The only problem is that when the user clicks on the column header to sort, the arrow causes the column name to dot out (ex: Ccy..^ ) instead of (CCy1 Amount). Is there any way to turn off the showing of the arrows? I would rather not have to bother with resizing my grid columns just to accommodate for the arrows so that the dots don't form..
Any ideas on how to do this?
Simple! Just do not do
table.setSortDirection(sortAscending ? SWT.UP : SWT.DOWN);
When you call this method, you're just telling SWT which image to use. Without it, the sorting still works, but the arrows do not show.
Related
I need a help on applying common drop down values to multiple selected rows in a Webix datatable. Let's say I want to select all the rows of my datatable (by Ctrl+click) for which the 'Name' column has value as 'Mark' and then want to apply a common color for them (for example : green) by clicking so that it gets applied on all the rows at one go.
The snippet is here : https://webix.com/snippet/1162ccd1
Any help on how can this be achieved would be appreciated.
Thanks in advance.
Further to this post, I am including a re-phrased and a half-way solution below for the experts to dispel any confusion about the requirement :
It does not necessarily have to be those rows which have 'Name' as 'Mark'. I put it that way to give an example. Basically, it could be any randomly selected row either consecutive or haphazard and selecting a common value for them from the drop down of the 'color' column (it could be any color in that drop down ) so that its value gets assigned to those cells of those selected rows. Note, selecting a color should not change the color of the row, so there is no css effect I want here.
I have so far written the code like below, which is able to fetch the selected rows.
rows = $$("mytable").getSelectedId(true);
for (i in rows) {
id = rows[i];
item = $$("mytable").getItem(id);
/* below effect has to happen from the drop down of data table gui */
item.id2 = "green"; //for example, it could be any value
}
Can anybody please help me in:
i) how can I apply the value selected from the drop down of data table to all the selected rows ?
ii) Secondly, how can I trigger this code ( through which event ?) once they are selected in the data table and the value is chosen from the drop down ?
Thanks.
You can do something like this by adding the onBeforeFilter event, and track only color filter ("id2" in your snippet):
onBeforeFilter: function(id, value, config) {
if (id === "id2") {
const selected = this.getSelectedId(true);
const color = this.getFilter("id2").value;
for (let row in selected) {
const item = this.getItem(selected[row]);
item["id2"] = color;
this.updateItem(item.id, item);
}
}
}
Sample is here https://webix.com/snippet/538e1ca0
But I think this is not the best way.
You can also create a context menu that is displayed by right-clicking on the table and making a choice of values in it.
Am working on slick grid where am trying to get the column information like id,name and the new width of column after resize.
I wrote an event which will be triggered when user resizes the column.
grid.onColumnsResized.subscribe(function (e, args) {
//To Do
});
grid.getColumns() will help but how do i identify which column user has resized. is there a way I can get the column index of the resized column?
some start up code from here will save lot of my time
Thanks
The onColumnsResized event triggered by SlickGrid doesn't include any references to the columns which changed.
It's important to note that the width of multiple columns may have changed when this event triggers. Examples of this are:
Using the grid option forceFitColumns: true to force the columns to fit in the width of the grid
Resizing a column so small it affects the columns to its left
Two possible options for implementing this are:
Check columns after change
SlickGrid stores the previous column widths in the property named previousWidth on each column. You can compare the prevoiusWidth and width values to determine which columns changed.
grid.onColumnsResized.subscribe(function (e, args) {
//Loop through columns
for(var i = 0, totI = grid.getColumns().length; i < totI; i++){
var column = grid.getColumns()[i];
//Check if column width has changed
if (column.width != column.previousWidth){
//Found a changed column - there may be multiple so all columns must be checked
console.log('Changed column index : ' + i);
console.log(column);
}
}
});
SlickGrid resets the previousWidth values for all columns whenever a column starts being resized.
You can view an example of this approach at http://plnkr.co/edit/W42pBa2ktWKGtqNtQzii?p=preview.
Modifying SlickGrid
If you are hosting SlickGrid and are comfortable maintaining your own version then you could modify it to include column information in the args of the onColumnsResized event.
In slick.grid.js at line 860 amend the code where the event is triggered to include an array containing the indexes of changed columns. You can also include the index of the column which the user resized if this is useful. The below adds properties named changedColumnIndexes and triggeredByColumnIndex which are passed in the args of the triggered event. I've wrapped the changes for this in comments prefixed //MODIFICATION.
.bind("dragend", function (e, dd) {
var newWidth;
//MODIFICATION - Add array to capture changed column indexes and variable to capture
// the index of the column which triggered the change
var changedColumnIndexes = [];
var triggeredByColumnIndex = getColumnIndex($(this).parent()[0].id.replace(uid, ""));
//MODIFICATION END
$(this).parent().removeClass("slick-header-column-active");
for (j = 0; j < columnElements.length; j++) {
c = columns[j];
newWidth = $(columnElements[j]).outerWidth();
//MODIFICATION - Add column index to array if changed
if (c.previousWidth !== newWidth) {
changedColumnIndexes.push(j);
}
//MODIFICATION END
if (c.previousWidth !== newWidth && c.rerenderOnResize) {
invalidateAllRows();
}
}
updateCanvasWidth(true);
render();
//MODIFICATION - Amend trigger for event to include array and triggeredBy column
trigger(self.onColumnsResized, {changedColumnIndexes: changedColumnIndexes, triggeredByColumnIndex: triggeredByColumnIndex});
//MODIFICATION END
});
In your own code subscribe to the onColumnsResized event and pickup the changed column index from the args of the event.
grid.onColumnsResized.subscribe(function(e, args) {
//Triggered by column is passed in args.triggeredByColumnIndex
console.log('Change triggered by column in index : ' + args.triggeredByColumnIndex);
console.log(grid.getColumns()[args.triggeredByColumnIndex]);
//Column array is passed in args.changedColumnIndexes
console.log('Changed columns are...');
console.log(args.changedColumnIndexes);
//Loop through changed columns if necessary
for (var i = 0, totI = args.changedColumnIndexes.length; i < totI; i++){
console.log(grid.getColumns()[args.changedColumnIndexes[i]]);
}
});
You can view an example of this approach at http://plnkr.co/edit/4K6wRtTqSo12SE6WdKFk?p=preview.
Determining column changes by column.width != column.previousWidth wasn't working for me because sometimes the original and new width were different by an insignificant size (e.g. 125.001 and 125).
I used Chris C's logic and made a PR on the 6pac/SlickGrid project. Here's the commit:
https://github.com/6pac/SlickGrid/commit/ba525c8c50baf18d90c7db9eaa3f972b040e0a6e
Is there any way i can hide HOT columns from javascript?
The requirement is such that the column to hide will come as a parameter in javascript and based on that the respective column will show hide accordingly.
The HOT has rowHeaders and colHeaders and the data with 20 columns.
Please advise.
OUTDATED SOLUTION
Ok I founnd a possible solution. I tested it out on my own system but it's actually quite simple.
You should be using a customRenderer in your columns option. Read up about this if you aren't already. The idea is that you're giving each cell its own renderer. In this custom function, you can do something like this:
var colsToHide = [3,4,6]; // hide the fourth, fifth, and seventh columns
function getCustomRenderer() {
return function(instance, td, row, col, prop, value, cellProperties) {
if (colsToHide.indexOf(col) > -1) {
td.hidden = true;
} else {
td.hidden = false;
}
}
}
What this renderer does is hide the cells that the var colsToHide specify. All you do now is add a DOM element that lets the user pick which and so every time the table gets rendered (which happens basically after any change, or manually triggered need be), the cells in the columns specified will be hidden, keeping the data array intact like you described. And when not in colsToHide they are re-rendered so make sure you get that working as well.
Here I implemented it with very basic functionality. Just enter the index of a column into the input fields and watch the magic happen.
http://jsfiddle.net/zekedroid/LkLkd405/2/
Better Solution: handsontable: hide some columns without changing data array/object
This question already has answers here:
Flex: Database driven DataGrid: arrows disappearing
(3 answers)
Closed 4 years ago.
I'm using Flex version 3.6 and I have a requirement to sort a data grid by two columns. When I click on a column header, the sort arrow displays over it.
What I'm trying to do now is when I click on 1 particular column, it will sort on two columns. That part's working.
But I've noticed that the sort arrow indicator that usually appears over a sorted column has disappeared. I'm using a subclass of DataGrid, so after I sorted, I tried to use placeSortArrow()but I noticed in DataGridHeader.as that sortArrowis null.
protected function headerReleaseListener(event:DataGridEvent):void
{
if(event.columnIndex == 0)
{
event.preventDefault();
var sort:Sort = new Sort();
sort.fields = [new SortField("#name",true, true), new SortField("#address",true, false)];
ArrayCollection(this.dataProvider).sort = sort;
ArrayCollection(this.dataProvider).refresh();
}
}
What I'd love to have is to specify on which column the sort arrow should appear on, whether a column is sorted by 1 or more columns. Does anyone know if this is possible?
I found the answer to the disappearing sort arrows from another question: Flex: Database driven DataGrid: arrows disappearing in a question answered by ili and adapted it to suit my code.
Because there were two columns sorted, the internal sortIndexwas -1 and consequently the sortArrow was null.
By picking a column to display the sort on (I used the primary sort column) and setting a sortIndex and direction, the sortArrownow appears.
protected function headerReleaseListener(event:DataGridEvent):void
{
if(event.columnIndex == 0)
{
event.preventDefault();
var sort:Sort = new Sort();
sort.fields = [new SortField("#name",true, true), new SortField("#address",true, false)];
ArrayCollection(this.dataProvider).sort = sort;
ArrayCollection(this.dataProvider).refresh();
mx_internal::sortIndex = event.columnIndex;
mx_internal::sortDirection = (mx_internal::sortDirection == null || mx_internal::sortDirection == "ASC") ? "DESC" : "ASC";
placeSortArrow();
}
}
Ok, let me explain my scenario more clearly:
When a cell is edited, it becomes 'dirty' and I style it a certain way by adding a CSS class to the cell via javascript.
Then, if the user Sorts the grid, the styling is lost (I believe because all the rows are recreated) and I need a way to restore the styling to the appropriate cell/row after a Sort.
What I attempted to do is add an entry into data[] called 'status' and onCellChange I loop through data[] and match the args.item.Id to appropriate entry in data[].
grid.onCellChange.subscribe(function (e, args) {
var done = false;
for (var i = 0; i < data.length && !done; i++) {
if (data[i].id == args.item.id) {
data[i].status = "dirty";
done = true;
}
}
}
However, onSort I'm not sure how to match the sorted rows to the data array. (Since I have no args.item) I've attempted to do selector statements:
$(".slick-row")
to restyle the correct cells, but I have no way to associate the rows with their entry in data[].
1) There is no need to search for the item in your onCellChange handler - it is available at "args.item".
2) Sorting the "data" array will not wipe out your change to the item in #1.
3) You mention dynamically styling cells. I see no code for that. If your custom formatter is the piece of code that looks at "item.status" and renders it differently if it is dirty, then you don't have to do anything extra. Sorting the data and telling the grid to re-render will preserve the "dirty" cell styles.