Answer in
how to make sort icons visible in all column headers in jqgrid regardless on sort status
describes how to add sortable indication to columns.
It is difficult to distinguish sorted and unsorted column by default sort indicator.
How to underline sorted column header text in addidion to sort indicator ?
I modified the demo from the previous answer to the following which display now
I used for the demo the CSS class where I additionally to underlining changed the color of the text
.sortedColumnHeader > div { text-decoration: underline; color: blue; }
If we play forward we can use just the 'ui-state-highlight' for the highlighting (see another demo). The column header will be probably even too much distinguish from the standard column:
The corresponding code is
var $grid = $("#list"), colModel, sortName;
// create the grid
$grid.jqGrid({
// all typical jqGrid parameters
onSortCol: function (index, idxcol, sortorder) {
if (this.p.lastsort >= 0 && this.p.lastsort !== idxcol
&& this.p.colModel[this.p.lastsort].sortable !== false) {
// show the icons of last sorted column
$(this.grid.headers[this.p.lastsort].el)
.find(">div.ui-jqgrid-sortable>span.s-ico").show();
$(this.grid.headers[this.p.lastsort].el).removeClass('sortedColumnHeader');
}
$(this.grid.headers[idxcol].el).addClass('sortedColumnHeader');
}
});
// show sort icons of all sortable columns
colModel = $grid.jqGrid('getGridParam', 'colModel');
sortName = $grid.jqGrid('getGridParam', 'sortname');
$('#gbox_' + $.jgrid.jqID($grid[0].id) +
' tr.ui-jqgrid-labels th.ui-th-column').each(function (i) {
var cmi = colModel[i], colName = cmi.name;
if (cmi.sortable !== false) {
// show the sorting icons
$(this).find('>div.ui-jqgrid-sortable>span.s-ico').show();
} else if (!cmi.sortable && colName !== 'rn' && colName !== 'cb' && colName !== 'subgrid') {
// change the mouse cursor on the columns which are non-sortable
$(this).find('>div.ui-jqgrid-sortable').css({cursor: 'default'});
}
if (cmi.name === sortName) {
$(this).addClass('sortedColumnHeader');
}
});
At the end I want to reference one more old answer where it's shown another sophisticated method to highlight the sorted column.
Related
I have datasets from my chart and I want to reorganize to make it look better.
This would be my chart
OriginalChart
and this would be my chart when I remove 2 elements labels from it and the idea would be to reorganize everything and delete the elements with the red boxes that have 0 as value or in other words, to only display data with values different than 0 ...
ChartWithDataToOrganize
the idea would be simple, just filtering all data value that is equal to 0, but I don't really if there is a tool for it but also to reverse it as well when you display all data again.
labels
I achieved to see how to hide elements when clicking on the legends but how can I achieve to hide the data inside which is == 0 and then get it reversed when I unhide it and see it like the first time..
legend: {
display: true,
onClick: function(e, legendItem) {
var index = legendItem.datasetIndex;
var actualChart = this.chart;
//If the actual label is not hidden, I set it up as false, otherwise is null
var alreadyHidden = (actualChart.getDatasetMeta(index).hidden === null) ? false : actualChart.getDatasetMeta(index).hidden;
actualChart.data.datasets.forEach(function(e, i) {
var meta = actualChart.getDatasetMeta(i);
if (i === index) {//I check if the selected label is already hidden otherwise I hide it
if(!alreadyHidden){
meta.hidden = true;
}else{
meta.hidden = null;
}
}
});
actualChart.update();
},
},
I'm using ChartJs 2.8.0
on Chrome
I did not put any data entry as labels are just names and the others returnData() are just %
I managed to do it by creating a copy of the actual copy of my datasetsLabels and set up the new configuration and in case I show again the selected label I just replace the new dataSetLabel for the previous dataset that I had before.
That code basically hides articles that won't match the category I choose from my select menu.
But then this happens.. Basically if I have only 3 images with matching category I will be left with a huge "blank" space on the bottom of the page.
$(".filter").change(function() {
var filterValue = $(this).val();
var row = $('.portfolio-item');
row.hide()
row.each(function(i, el) {
if($(el).data('type').split(' ').indexOf(filterValue) !== -1) {
$(el).show();
}
})
// In Addition to Wlin's Answer (For "All" value)
if ("all" == filterValue) {
row.show();
}
});
Is there anyway I can automatically resize the height of the section or div?
I already tried ( overflow:hidden, resize:both ) and some other CSS stuff but its not working...
I have a tooltip in Kendo UI which I'm trying to filter cells based on their column name, because the standard td:nthchild won't work (users can move columns around). I want to engage the tooltip based on if someone hovers over MY COLUMN NAME'S CELLS. How do I accomplish that in the filter field? Or should I do it in the show function?
this.$el.kendoTooltip({
filter: "th:contains('MY COLUMN NAME')",
show: function (e) {
if (this.content.text().length > 0) {
this.content.parent().css("visibility", "visible");
}
},
hide: function(e) {
this.content.parent().css("visibility", "hidden");
},
content: function (e) {
var target = e.target;
return $(target).siblings().first().text();
}
});
Like this ?
this.$el.kendoTooltip({
filter: "thead th:contains('ColumnA')"
});
Demo
UPDATE
As you want to show the tooltip on the row cell based on the column's title, you can't use filter parameter for that, it is meant to be used to filter only the target element, which is not your case. You will need some programming there, e.g:
show: function(e) {
let index = this.target().index(), // Get hovered element's column index
columns = grid.getOptions().columns, // Get grid's columns
column = columns[index]; // Get current column
// If target TD is not under 'ColumnA', prevent tooltip from being showed
if (column.title != "ColumnA") {
this.hide();
}
}
Demo
Thanks to kendo, you can't prevent their own events, so using hide() works but the tooltips still opens blinking before it is hidden again, it's possible to catch it opening. Tried using e.preventDefault() and return false that would a reasonable way to say "cancel the widget showing" but with no luck. This was the best I could do.
Using ng-grid I've build grid with grouping.
When I select a row I want to know what is the group name he is belong to.
afterSelectionChange: function(row, event) {
if (row && row.entity && row.selected) {
// what is the group name?
}
}
The reason I need this info, is because I've changes the column value
dynamically after the grid is initialized, so The value written in the group title is different from the value in the row.
I've made a plunker demonstrate my problem:
http://plnkr.co/edit/aAWVToxvGSudQUHcUgaz?p=preview
Please select one of the rows to see the problem.
P.S.
I can't find it under row.entity..
You can save original name into another property for later use. For example in updateColumnName plugin code:
angular.forEach(self.scope.renderedRows, function(row) {
if (row.entity.name) {
row.entity.origName = row.entity.name;
row.entity.name = '****';
}
});
Then you can read origName property when you need:
afterSelectionChange: function(row, event) {
if (row && row.entity && row.selected) {
alert('group name: ' + row.entity.origName);
}
}
Demo: http://plnkr.co/edit/pdbN6O7m57rMD0khSN16?p=info
I want filter and sort option in html table. I tried 'tablesorter.js',
I can sort the table fields by using this module. But I can't add drop down list and filter box with table fields.
Anybody can help me??
Try Using This.
This is HTML table shorter.
OR
(DEMO) for short using drop-down list
$('table').tablesorter();
$('select').change(function(){
var column = parseInt($(this).val(), 10),
direction = 1, // 0 = descending, 1 = ascending
sort = [[ column, direction ]];
if (column >= 0) {
$('table').trigger("sorton", [sort]);
}
});
You can add a drop down list filter to the table column by adding a class="filter-select" to the for that column in the .
<thead><th>Col 1></th><th class="filter-select">Col2</th></thead>
Or you can add a filter function for that column:
filter_functions : {
// Add select menu to 3rd column (column numbers are zero-based).
// Set the column value to true, and/or add "filter-select" class name to header
2 : true,
}