Develop Reference

remove selectedRow in handsontable using jQuery

I have an handsontable like the below image. After selecting any one of the rows (for example LastName) it should remove that particular row permanently. How can I achieve this using jQuery?
This is my code which I have written using the afterSelection function but I don't know how to delete that row.
this.tab.handsontable({
data: self.data,
dataSchema: {
columnsexpo: null,
placeholder: null
},
colHeaders: ['Columns Export'],
rowHeaders: true,
fixedColumns: true,
fillHandle: {
autoInsertRow: false,
},
columnSorting: true,
columns: [{
data: 'columnsexpo',
readOnly: true
}, ],
stretchH: 'all',
className: "htCenter",
height: 420,
afterChange: function() {},
beforeRemoveRow: function(row, col) {
var m = this.getDataAtCell(row, 0);
var mandatory = true;
self.MandatoryFields.forEach(function(item) {
if (!_.isEmpty(m)) {
var found = m.toLowerCase().includes(item.toLowerCase());
if (found) {
mandatory = false;
}
}
});
if (!mandatory) {
return false
} else
return true;
},
afterSelection: function(r, c) {
var da = this.getDataAtRow(r);
selectedRow = "";
selectedRow = da[0];
console.log(selectedRow);
},
afterRender: function() {
if (init) {
Events.trigger("DEW:ValidRequest", 1, self.checkValid());
}
init = true;
$('#tablesortable thead th div').filter(function() {
return $(this).text() == "Columns Export";
}).popup({
title: 'Columns Export',
position: 'top center'
});
}
});
EDIT
afterSelection: function(r,c,e){
var dat = this.getDataAtRow(r)
this.alter('remove_row', r, 1);
console.log(r);
},
Now after applying above function it is removing selected Row but if i select last row it is removing all previously selected row

use hot.alter('remove_row', 10, 2); inside after selection method of handsontable.
No need for jquery.
Or if you want to use jquery, store the handsontable instance in some varitable and call the same on row selection.
Update -- added deselectCell before removing the row. after removing the row, previous row is getting selected which is causing the problem.
afterSelection: function(r, c, e) {
this.deselectCell()
this.alter('remove_row', r, 1);
}

Subgrid in jsgrid

I am trying to show the data history in jsgrid as asked here.
$("#jsGrid").jsGrid({
...
rowRenderer: function(item) {
var row = $("<tr>");
var historyGrid = $('<tr>').addClass('nested-grid').hide();
historyGrid.jsGrid({
width: "100%",
height: "auto",
editing: false,
data: [{"a":"d1","b": "d2"},{"a":"d3","b":"d4"},{"a":"d5","b":"d6"}],
heading: false,
fields: [{ name: "a", type: "text"}, {name: "b",type: "text"}]
})
var items= Object.keys(item);
items.forEach(function(key){
if(key!=items[items.length-1]) {
var cell = $("<td>").addClass("jsgrid-cell").append(item[key]);//line 1
row.append(cell);
}
});
row.click(function () {
historyGrid.toggle();
})
row.append(historyGrid);
return row.add(historyGrid);
}
});
The history appears as below. I want to display in such a way that, it spans the entire blank(row) area.
if I change it tr to td at line 1, it appears as below
Any help?

How do you replace/remove rows during a dataTable update?

So, I am working on code that uses the DataTables API. It appears that it is using an older version of it though. So, my table updates every 5 seconds and all I need is for it to completely update when new new data comes in. However, while it input new update, data that is no longer referenced in that table stay there even though it should disappear, and my table just gets bigger and bigger over time. I've tried to use:
Table.fnClearTable(); // throws error below
TypeError: Cannot set property '_aData' of undefined
And this doesn't work. It removes everything, but won't let me rebuild a new table. I've also tried to use:
Table.fnDestroy(); // doesn't seem to work either
"bDestroy":true // didn't seem to work, but I couldn't tell
So, this is the particular function that I am working on. I'd like to to periodically either delete and recreate the table, or to do a better job at refreshing the data going into it.
my.updating.graph = function(obj, listAll) {
try {
if (obj == null || obj.updates == null || obj.updates.length == 0) {
$("#sectionUpdates").hide();
return;
}
$("#sectionUpdates").show();
var table = null;
if ($.fn.dataTable.isDataTable("updateTable")) { // may remove this statement...
table = $("#updateTable").dataTable();
} else {
table = $("#updateTable").dataTable({ // is there a reset option?
"paging": !listAll,
"pagingType": !listAll ? "X" : "Y",
"searching": true,
"order": [
[0, "desc"]
],
"ordering": true,
"oLanguage": {
"sEmptyTable": "No updates at this time"
},
"iDisplayLength": 15,
"info": false,
"formatNumber": function(format) {
return friendlyFormat(format, 1000, 0);
},
"aoColumns": [{
"bVisible": false
},
{
"className": "dt-center",
"width": "10%",
"iDataSort": 0,
"render": function(data, type, row) {
return extractData(data, type, row[0]);
}
}, {
"sType": "mixed-string",
"className": "dt-left",
"width": "30%",
"render": function(data, type, row) {
return getZData(data, type, row[1]);
}
}, {
"className": "dt-left",
"width": "30%",
"render": function(data, type, row) {
return getYData(data, type, row[2]);
}
}, {
"sType": "mixed-string",
"className": "dt-left",
"width": "30%",
"render": function(data, type, row) {
return getZData(data, type, row[3]);
}
}
]
});
$("#updateTable").resize(function() {});
}
var updates = obj.updates;
for (var i = 0; i < updates.length; i++) {
var update = updates[i];
var id = makeId(update.id);
var triggered = getCurrentUTC();
if (update) {
if (getID("updateTable", id) == null) {
var row = table.fnAddData([
update.field1,
update.field2,
update.field3,
update.field4
]);
var node = $("#updateTable").dataTable().fnSettings().aoData[row[0]].nTr;
node.setAttribute("id", "updateTable-item-" + id);
node.setAttribute("rowIdx", row[0]);
setID("updateTable", id, row[0]);
}
table.fnUpdate([
update.field1,
update.field2,
update.field3,
update.field4
], getID("updateTable", id),
null, false, false);
for (var q = 0; q < tblStatusClasses.length; q++) {
$("updateTable-item-" + id + " td:eq(0)").removeClass(tblStatusClasses[q]);
}
$("#updateTable-item-" + id + " td:eq(0)").addClass("table-state" + update.field1);
}
table.fnStandingRedraw();
}
} catch (e) {
console.log(e);
}
}

x-editable - automatically initiate multiple select elements

My page contains multiple x-editable elements with data-type="select":
True
False
I'm trying to initiate them with x-editable with the following javascript code:
var services = ['services_0', 'services_1'];
$.each(services, function(index, value) {
$('#' + value).editable({
prepend: 'Select one',
source: [
{
value: 1,
text: 'True'
},
{
value: 0,
text: 'False'
}
],
display: function(value, sourceData) {
var colors = {
1: "green",
0: "blue"
},
elem = $.grep(sourceData, function(o) {
return o.value == value;
});
if (elem.length) {
$(this).text(elem[0].text).css("color", colors[value]);
} else {
$(this).empty();
}
}
});
});
The problem is that it only binds the first element.

Inspecting the page source I found out that query $.grep was giving me a TypeError on e.length(). It triggered on 'value' on this line:
display: function(value, sourceData) {
Once i added data-value="" to the elements, everything was working as expected:
True
False

In jqxGrid, how do I add a new calculated column from JSON data?

In jqxGrid, how do I add a new calculated column from JSON data?
My JSON data has fields baseQuantity and unitCost. I want to add a new field called totalCost which would be baseQuantity * unitCost.
I'm trying to add the data using loadComplete, but it doesn't seem to work.
ANOTHER alternative I could do is to loop through objData and inject a new field with the calculated value. But aside from that, is there any way I could do it via jqxGrid's API?
var jsonString = [{ "baseQuantity":"1", "unitCost":"2"}, { "baseQuantity":"3", "unitCost":"4"}];
var objData = $.parseJSON(jsonString);
var srcData = {
datatype: "json",
datafields: [
{ name : 'baseQuantity', type : 'number' },
{ name : 'unitCost', type : 'number' }
],
localdata : objData
};
var adapterData = new $.jqx.dataAdapter(srcData, {
loadComplete: function (records) {
var modifiedDataArray = new Array();
for (var i = 0; i < records.length; i++) {
var modifiedData = records[i];
modifiedData.totalPayment = modifiedData.baseQuantity * modifiedData.unitCost;
modifiedDataArray.push(programme);
}
return modifiedDataArray;
}
});
$('div#jqxGrid').jqxGrid({
width: '100%',
source: adapterData,
theme: getTheme(),
pageable: true,
autoheight: true,
sortable: true,
altrows: true,
columns: [
{ datafield: 'baseQuantity', text: 'Base Qty.', width: 120 }
{ datafield: 'unitCost', text: 'Unit Payment' , width: 120 }
]
});

Use the cellrenderer function:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm
{ text: 'totalCost', datafield: 'totalCost', width: 70, cellsalign: 'right', columntype: 'number',
cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
var rowData = $("#jqxGrid").jqxGrid('getrowdata', row);
return rowData.baseQuantity * rowData.unitCost;
}
}

Don't use the event "loadComplete" but "beforeLoadComplete" instead. Here is an example :
var dataAdapter = new $.jqx.dataAdapter(source,
{
beforeLoadComplete: function (records) {
records[0]['firstname'] = "Michael";
return records;
}
}
);
Than you can loop through all records, and generate you computed column. This is the official solution they seems to give here : http://www.jqwidgets.com/community/topic/computed-column/