Develop Reference

Kendo Grid set the aggregate based on selected value

By default my grid already had the total price (if none is selected).
What I wanted if the row/checkbox is selected, the "Total Price" only calculate the sum based on selected row. Need help how can I achieve this.
Here is my Kendo Demo

You can add a placeholder element in the footer and update the content based on the selection:
function onChange(arg) {
var grid = $("#grid").data("kendoGrid");
var data =[];
grid.selectedKeyNames().forEach((itm)=>{
data.push(grid.dataSource.get(itm));
});
var totalSelectedAmount = data.map(x=>x.UnitPrice).reduce((a, b) => a + b, 0);
$("#total").html(totalSelectedAmount)
}
Example

Tablesorter sort clicking link outside

I am sorting my tablesorter table successfully from a link outside the table, using var sorting = [[2,"n"]];. Clicking that link does sort the table the opposite way (from ASC to DESC, for example).
How can I sort the table by the 3rd column ascending, without losing the ability to sort in the opposite direction by clicking the link again? var sorting = [[2,"a"]]; does sort the table ascending, but I cannot click that link again to sort in the opposite direction!
Thanks for your help!
These are my lines:
$("#trigger-tg").click(function() {
// set sorting column and direction, this will sort on the first and third column the column index starts at zero
var sorting = [[2,"n"]];
// sort on the first column
$("table").trigger("sorton",[sorting]);
// return false to stop default link action
return false;
});

The tablesorter link in your question is pointing to the original tablesorter, but the code links and example are from my fork of tablesorter which does include the ability to pass an "n" to sort the column in the "next" direction.
The code example you shared does work - see demo.
$(function() {
var $table = $("table");
$table.tablesorter();
$("#trigger-tg").click(function() {
$table.trigger("sorton", [[[2, "n"]]]);
return false;
});
});
Here is the documentation page showing all possible settings - https://mottie.github.io/tablesorter/docs/example-trigger-sort.html
If you must use the original tablesorter, try the code from this demo.
Update: To notify the user that additional clicks will change the sort, try this code (demo)
HTML
<p>Sort Animals column from <a id="trigger-tg" href="#">A-Z</a>.</p>
Script
$(function() {
var $table = $("table"),
targetColumn = 2;
$table
.on("sortEnd", function() {
var c = this.config;
if (c.sortList[0][0] === targetColumn) {
$("#trigger-tg").text(c.sortList[0][1] === 0 ? "Z-A" : "A-Z");
}
})
.tablesorter();
$("#trigger-tg").click(function() {
$table.trigger("sorton", [[[targetColumn, "n"]]]);
return false;
});
});

Angularjs - ng grid what is the group name of the selected row

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

Changing the way table is sorted jquery tablesorter

I'm using jquery tablesorter to sort my table. I've tried to google my question, didn't find what I was looking for.
I've got a table which content changes dynamically so I want to change the way items are sorted.
One case I've got table populated with text which can be sorter with default .tablesorter() and I've got another case where digits are in table so I need to invoke tablesorter like this :
$('table').tablesorter({
headers : {
0 : {sorter:'digit'},
1 : {sorter:'digit'},
2 : {sorter:'digit'},
3 : {sorter:'digit'}
}
});
I have a method that does reload to table switching between numbers/text in table content, how can I change the way table is sorted.
In the example (pseudocode):
function reloadTableData
if table contains numbers user this tablesorter (I have a way to know if table contains numbers)
$('table').tablesorter({
headers : {
0 : {sorter:'digit'},
1 : {sorter:'digit'},
2 : {sorter:'digit'},
3 : {sorter:'digit'}
}
});
if table contains text use ordinary table sorter
$('table').tablesorter();
end
I can reload table data n times with either text/numbers.
I've tried the following :
function initTablesorter(n) {
switch(n)
{
case "number":
digitTableSorter();
break;
case "text":
defaultTableSorter();
break;
default:
}
}
function digitTableSorter(){
$('table').tablesorter({
headers : {
0 : {sorter:'digit'},
1 : {sorter:'digit'},
2 : {sorter:'digit'},
3 : {sorter:'digit'}
}
});
}
function defaultTableSorter(){
$('table').tablesorter();
}
Needless to say it's not working, I hope someone did something like this before, I'm stuck for some time now.

So is it not working because you are reinitialising tablesorter on a table? You may try to unbind tablesorter before rebinding it.
$('table')
.unbind('appendCache applyWidgetId applyWidgets sorton update updateCell')
.removeClass('tablesorter')
.find('thead th')
.unbind('click mousedown')
.removeClass('header headerSortDown headerSortUp');
Have a look at Remove jQuery tablesorter from table.

I think you are looking for this - You will need MetatData plugin to get the th classes to like "{sorter: 'digit'}"
http://tablesorter.com/docs/example-trigger-sort.html
$("#trigger-link").click(function() {
// set sorting column and direction, this will sort on the first and third column the column index starts at zero
var sorting = [[0,0],[2,0]];
// sort on the first column
$("table").trigger("sorton",[sorting]);
// return false to stop default link action
return false;
});

how to undeline sorted column header in jqgrid

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.