I'm trying to set up freeze pane (sticky header and fixed columns) using the scroller widget. When I add it to my table the sorting "breaks" in the following way: clicking on one of the fixed columns headers (first or last name in my table), sorts by one of the non fixed columns.
Any ideas?
Thanks
jsfiddle
$('#spreadsheet_table').tablesorter({
widgets: [ 'scroller' ],
widgetOptions : {
scroller_fixedColumns : 2,
scroller_addFixedOverlay : true,
scroller_rowHighlight : 'hover',
scroller_barWidth : null
}
});
$('#spreadsheet_table').tablesorter();
$('#spreadsheet_table').trigger('update');
var sorting = [[1, 0]];
setTimeout(function () {
$('#spreadsheet_table').trigger('sorton', [sorting]);
}, 100);
Use the sortList option as an initialization option instead of trying to trigger a sort after tablesorter has initialized - demo
$('#spreadsheet_table').tablesorter({
theme: 'blue',
sortList: [[1, 0]],
widgets: ['scroller'],
widgetOptions: {
scroller_fixedColumns: 2,
scroller_addFixedOverlay: true,
scroller_rowHighlight: 'hover',
scroller_barWidth: null
}
});
Related
I have a really simple Datatable. Every columns are sorting correctly except one. This columns contain only text (string).
Here's the order I get when I sort the column:
À publier,
Retiré temporairement,
Retiré - Rejet
Nouveau.
Here's the code for the Datatable, as you can see, it's quite simple.
var peutModifier = $('#hdnPeutModifier').val();
if (peutModifier !== 'undefined' && peutModifier === 'True') {
colonneAvecTriDesactive = [0, -1]; // Tri désactivé sur première et dernière colonne.
} else {
colonneAvecTriDesactive = [-1]; // Tri désactivé sur dernière colonne.
}
$('#DataTablePublication').DataTable({
search: false,
bFilter: false,
pageLength: 100,
lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
columnDefs: [
{ orderable: false, targets: colonneAvecTriDesactive }
],
order: [],
language: {
paginate: {
first: "Premier",
last: "Dernier",
next: "Suivant",
previous: "Précédent"
}
}
});
I checked and the column contains only strings, also, I have not set any trigger on the column sorting and I don't have any errors in my browser.
Does someone have an idea about this problem?
This looks like you have sorted your column in reverse alphabetical order - which is why À appears first (since À follows z, using default codepoint sorting).
To use language-sensitive sorting, i.e. the sort order that you would expect to find in a dictionary (where église follows eagle, not zebra), you can use the DataTables internationalization plug-in.
Steps to use:
Add the library to the <head> section of your page. You can use a CDN for this:
<script src="https://cdn.datatables.net/plug-ins/1.11.0/sorting/intl.js"></script>
Initialize the plug-in in your script, before you create your DataTable:
$.fn.dataTable.ext.order.intl();
You can also provide an explicit locale if you want to:
$.fn.dataTable.ext.order.intl('fr');
There are various additional configuration options described here.
How to disable a particular column using handsontable in handsontable.I want first column only editable other three columns get disable.I'm using readonly true for three columns but it's not work how to disable....
columns: [
{
type:'handsontable',
handsontable: {
colHeaders: ['EmployeeNo','EmployeeName','Department','Designation'],
data: manufacturerData,
columns:[{},{readOnly: true},
{
readOnly: true
},
{
readOnly: true
}]
}
},
{}]
In Project i do it with this line of codes.
cells : function(row, col, prop) {
var cellProperties = {};
if (col > 0) {
cellProperties.readOnly = true;
}
else
{
cellProperties.readOnly = false;
}
return cellProperties;
}
You can find working example of it on given link. but give example is for set a row to readonly. http://handsontable.com/demo/conditional.html
Your code is working properly. Please see JSFiddle with approach similar to you.
$("#test").handsontable({
startRows: 1,
startCols: 1,
rowHeaders: true,
colHeaders: true,
minSpareCols: 0,
minSpareRows: 0,
contextMenu: false,
fillHandle: false,
outsideClickDeselects: false,
removeRowPlugin: false,
currentRowClassName: 'currentRow',
currentColClassName: 'currentCol',
columnSorting: true,
colHeaders: ['Col1','Col2','Col3','Col4'],
columns: [{},
{readOnly: true},
{readOnly: true},
{readOnly: true}]
});
Working link : http://jsfiddle.net/rvd61fuy/
Let me know, if you are facing anyother issue.
To disable you could make the cell/column readonly and maybe even set the background color to a grey(to give a special effect).Both the methods i.e the one where you use readonly:true in the column declaration when initializing the handsontable and also the one where you use cell properties and use conditions to determine if you need to set a cell to read only when the table is being rendered,both methods seem to be working for me.You need to instantiate your HOT correctly, that may be the problem. Also when using cell properties you needn't use cellProperties.readOnly = false as by default the cells are not read only unless you have coded for that seperately. If you need further assistance let me know.
Also check that you have the latest version of handsontable. I ran into problems trying to implement readonly on cells which had checkbox columns with erratic results.
Using the version below solved my issues (below is what I used in my HTML page)
<script src="http://docs.handsontable.com/pro/1.9.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/pro/1.9.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">
When I use the filter-formatter uiRange function and set valueToHeader to true, no values show initially. If I move one of the sliders then the range of values show. If I set valueToHeader to false, everything displays fine initially and afterwards.
This issue seems to appear sometime after tablesorter version 2.7.8.
Below is a snippet of how my code looks:
1 : function($cell, indx)
{
return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
values: [0, 300],
min: 0,
max: 300,
delayed: false,
valueToHeader: true,
exactMatch: true
});
},
Thanks for any help.
Regards,
lindon
I have a jqGrid that I set up like this
gridAltMpn.jqGrid({
autowidth: true,
shrinkToFit: true,
datatype : 'local',
data : input,
height : '100',
scrollrows: true,
scrollOffset : '0',
hidegrid : false,
colNames : [ 'P', 'MPN' ],
colModel : [
{ name : 'Col1', width : 30, align:'center' },
{ name : 'Col2', width : 250, sorttype: 'integer'}
],
pager : '#altmpn_pager',
pagerpos : 'left',
scroll: 50,
gridview : true,
caption : 'A useful table title',
emptyRecordText : '<div id="no_data_msg" style="text-align:center"> No Results Found</div>',
hoverrows : true,
onSelectRow: function(id) {
var gsr = gridAltMpn.jqGrid('getGridParam', 'selrow');
if (gsr) {
var rowData = gridAltMpn.jqGrid('getRowData', gsr);
if ($("input[name='optInvInqType']:checked").val() == 'MPN') {
getInvInq("MPN", rowData.MPN);
}
}
},
loadComplete: function() {
gridAltMpn.setSelection(gridAltMpn.getDataIDs()[0], true);
}
});
The data in this grid looks like this
XX 774860A6
774860A8
774860A4
774860A3
774860A10
STARTER, PNEUM,PW4000
When the grid is first loaded that it fine but if the user wants to sort by the second column it ends up like this
774860A10
774860A3
774860A4
XX 774860A6
774860A8
STARTER, PNEUM,PW4000
The 774860A10 should go after the 774860A8 just like in an integer sort. I cannot use an integer sort because these are not integers as there is some alpha characters in there. In other words I want a text entry to sort like an integer. Do I need to use a custom sort routine and then have my Javascript to do a integer like sort? I also don't need this sorted on the first time because my server sorts it by the first column. The user might want it sorted by the second column
You should use a custom function for this type of sorting.
For this, set sort type property of jqgrid as your custom function. As stated in this link, sort type can have the following values.
sorttype:
int/integer - for sorting integer
float/number/currency - for sorting decimal numbers
date - for sorting date
text - for text sorting
function - defines a custom function for sorting. To this function we pass the value to be sorted and it should return a value too.
And the custom function can be something like this: (From this link found in the answer by Oleg for this question.)
colModel: [
{name:'Posn', index:'Posn', width:100, sorttype:
function(cell)
{
//Here you have to apply your own logic
if (cell=='GK') return '0';//returns the sort order
if (cell=='DEF') return '1';
if (cell=='MID') return '2';
if (cell=='STR') return '3';
}
},
By the way, you can set the sortname property of jqgrid to set a column for initial loadtime sorting.
Using the Kendo UI Grid and MVC 4, I haven't been able to find a way to put summary totals (financial) at the bottom of the grid for select columns.
Is this possible?
Yes indeed! check DataSource Aggregate.
Example:
var stocksDataSource = new kendo.data.DataSource({
transport:{
read:function (options) {
}
},
schema :{
model:{
fields:{
name :{ type:"string" },
price:{ type:"number" }
}
}
},
aggregate:[
{ field:"price", aggregate:"sum" }
],
pageSize :10
});
I have defined a DataSource with two fields: the items name and price. I want to totalize the price so I defined an aggregate for price and what I'm going to do is sum (you can also min, max, average and count).
Then in the Grid when I define the columns I write:
columns :[
{ field:"name", title:"Product" },
{ field:"price", title:"Price", footerTemplate:"Sum: #= sum # " }
],
And that's it!