We Keep Coding

svelte-table row select/de-select from Javascript

I am trying to implement row selection functionalty to svelte component I am developing. I am creating component using svelte-table component where I list items from database and the component should allow selection of only two items and remove first row when third is added. Row id's are then recorded in svelte store and passed to an other component. This all works in program level, that is not a problem. The problem is to highlight correct rows in the table so that user is on map which rows are selected. I can get the highlighting working using classNameRowSelected property on svelte-table but the problem is removing the highlighting from the first selected row when that third row is selected. I seem to fail find any example or reference how to do this from Javasctipt...
Here is my SvelteTable element:
<SvelteTable
columns="{COLUMNS}"
rows="{rows}"
rowKey="key"
selectOnClick="{true}"
on:clickRow="{rowSelected}"
classNameTable={['table table-striped']}
classNameThead={['table-primary']}
classNameRowSelected="row-selected"
/>
<style>
:global(.row-selected) {
background-color: #f8c;
}
</style>
and the rowSelected function then row is clicked:
function rowSelected(event)
{
let found = false;
compare_tests.forEach((test,index, compare_tests) => {
console.log(test);
if (test == event.detail.row.key)
{
found = true;
event.detail.row.selected = false;
compare_tests[index] = "";
}
});
if (!found)
{
compare_tests.shift();
compare_tests.push(event.detail.row.key);
event.detail.row.selected = true;
found = false;
}
$testids = compare_tests;
}
Ideally there is some function/property on "row" parameter that I can use to de-select the row based on row.key before I shift it away from the array.
I am relatively new to JavaScript and Svelte so any help where to find information on how to accomplish this would be appreciated.

By using selected (‡ optional array of key values of selected rows) instead of selectOnClick this would be a way >> REPL
<script>
import SvelteTable from "svelte-table";
import {rows, columns} from './data'
let selectedRowIds = []
function handleRowClick(event) {
const rowId = event.detail.row.id
if(selectedRowIds.includes(rowId)) {
selectedRowIds = selectedRowIds.filter(id => id !== rowId)
} else {
selectedRowIds = [rowId, ...selectedRowIds].slice(0,2)
}
}
</script>
<SvelteTable columns="{columns}"
rows="{rows}"
rowKey="id"
on:clickRow={handleRowClick}
selected={selectedRowIds}
classNameRowSelected="row-selected"
>
</SvelteTable>
<style>
:global(.row-selected) {
background-color: #f8c;
}
</style>

Vue-Table add class to selected row

I'm using vue-table-component to display a table on my view, which can be filtered and sorted easily. But I came up with a problem here.
I need to identify a row which has been clicked. I tried the implementation from Issue #100 but this as not changed anything and has not added a class to the clicked <tr> element.
My component looks like:
<table-component
:data="this.runs.results"
sort-by="id"
sort-order="asc"
:show-caption=false
v-on:rowClick="rowClicked"
:row-class="highlight"
>
And the added methods are doing defined as:
highlight(row) {
if (row.data) return this.highlightedRow === row.data.vueTableComponentInternalRowId ? 'highlight' : '';
return '';
},
rowClicked(row) {
this.expand = false;
this.log = eval('`' + this.runs.results[row.data.id].logFile + '`');
},
Does there is a way to add a class to a selected row? Or does I'm doing something wrong here?

How to hide row after changing status in angularjs

I'm now trying to hide clicked row after changing status in angularjs. Here is my coding and please let me know how to do it?
table.table
tr(data-ng-repeat="application in job.applications", ng-hide="application.hideApplication")
td.status
div.bold #{getMessage('Change Status:')}
div.normal
a(ng-class="app_status === 'shortlist' ? 'admin_edit_bold' : 'admin_edit_normal'", ng-click="changeApplicationStatus(application.id, 'shortlist', application)") #{getMessage('Shortlist')}
td.rating
div(ng-init='rating = application.app_rating')
.star-rating(star-rating='', rating-value='rating', data-max='5', on-rating-selected='rateFunction(application.id, rating)')
Here is controllerjs.
$scope.changeApplicationStatus = function (appId, app_status, application) {
return jobsService.changeApplicationStatus(appId, app_status).then(
function () {
application.hideApplication = false;
}
);
};

Put this attribute on whichever element you're wanting to show/hide
ng-hide="application.hideApplication"
Edit subsequent to comment:
That attribute wouldn't work on the same element as the ng-repeat, I don't think the application variable would be in scope...
Instead, you could change your repeat to:
application in job.applications | filter: { hideApplication : false }

SlickGrid set row back color on event onCellChange

I use following code to set background color for the row, based on the value changed but it didn't work, the row color didn't change:
MyGrid.onCellChange.subscribe(function (e, args)
{
var data = Grid.getData();
if(data[args.row].IsDeleted == true)
{
args.row.cssClasses += 'MyBlueColor'; //Set Css Class
}
}
<style type="text/css">
.MyBlueColor
{
background-color: blue;
}
</style>

args.row is the row index, not the row itself
check out what is passed as the event args when onCellChange is triggered
To change the cssClass of a row based on the data item, you will need to implement a custom getItemMetadata function to return custom metadata for that row. Check out how this is implemented in slick.groupitemmetadataprovider.js
So as a hack just to make sure it works, you could replace the getItemMetadata function in slick.dataview.js with your own custom function that would look something like:
function getItemMetadata(i) {
var item = rows[i];
if (item === undefined) {
return null;
}
if (item.IsDeleted) {
return {
cssClasses: 'MyBlueColor'
};
}
return null;
}
This will obviously break the original column definitions, but once you figure out how the getRowMetadata function works, you should be able to create your own metadata provider similar to slick.groupitemmetadataprovider.js and even return custom metadata for each column!

slickgrid validate row that is going to be added

As in examples a new row is added when you type something into one of the cells of last row. How is it possible to add new row only after all cells in this new row are valid to the validator rules of columns ?

Here's a working snippet. It doesn't stop row from being added but it runs all validations on a new row and forces user to enter all missing values.
First define validateRow function (ideally it should be put in SlickGrid namespace):
function validateRow(grid, rowIdx) {
$.each(grid.getColumns(), function(colIdx, column) {
// iterate through editable cells
var item = grid.getDataItem(rowIdx);
if (column.editor && column.validator) {
var validationResults = column.validator(item[column.field]);
if (!validationResults.valid) {
// show editor
grid.gotoCell(rowIdx, colIdx, true);
// validate (it will fail)
grid.getEditorLock().commitCurrentEdit();
// stop iteration
return false;
}
}
});
}
Then invoke it in onAddNewRow binding func (or after adding a item to Array if you're not using DataView):
grid.onAddNewRow.subscribe(function (e, args) {
dataView.addItem($.extend({
id: dataView.getLength()
}, args.item));
validateRow(args.grid, args.grid.getActiveCell().row);
});

SlickGrid doesn't support that.