This is the table i am trying to make. First two columns are filled from get api. The last column, i fetch from another api get call. How do i fill the last column with data.
defineGrid() {
this.columnDefinitions = [
{ id: "SerialNumber", name: "Serial Number", field: "SerialNumber", sortable: true, filterable: true, minWidth: 100 },
.......
.......
.......
{ id: "Owner", name: "Owner", field: "Owner", sortable: true, filterable: true, minWidth: 100 },
];
Is there a way in aurelia-slickgrid to update an individual column with values (from a promise let’s say)?
I want to update the Owner column from a separate function that gets the data from backend system. I mean not the way how rest of the data is updated using dataset.bind=“dataset”.
Related
I'm making use of bootstrap-vue. Within the table component, I want my users to be able to sort values.
I set all the options for that but for some reason, the sorting isn't going as I espected.
I've checked the docs about sorting and set things up. My problem is, is that the following numbers (when sorted descending) are sorted like this:
856.780
832.912
827.873.000
Obviously, the last one is greater than the first two, but for some reason this doesn't work.
Now, the sorting does go right when I loose the punctuation, but that makes an ugly table for numbers.
Again, following the docs (see above) I'm making use of the sort-compare-options prop:
sortOptions: {
ignorePunctuation: true,
numeric: true
}
EDIT
My fields looke like this:
fields: [
{ key: 'name', sortable: true, tdClass: 'table-cell-align' },
{ key: 'revenue', sortable: true },
{ key: 'costs', sortable: true },
{ key: 'result', sortable: true },
{ key: 'margin', sortable: true },
{ key: 'fte', sortable: true },
{ key: 'personell_costs_/_revenue', sortable: true},
{ key: 'other_costs_/_revenue', sortable: true},
{ key: 'revenue_/_fte', sortable: true},
{ key: 'details', sortable: false }
]
[
{
"name": "Medical Tattoo Innovations",
"revenue": "34.254",
"costs": "38.010",
"result": "-4.414",
"fte": "0",
"margin": "0",
"personell_costs_\/_revenue": "0",
"other_costs_\/_revenue": "1",
"revenue_\/_fte": "171.270",
"details": "0"
}
]
But this doesn't do the trick for me.
Any thoughts on this?
827.873.000 is a string in your items data, not a Number (and since it has more than one decimal, the browser String.localCompare(...) method (used internally by b-table) does not see that as a valid number, so sorts it as a String.
You can either convert it to a number beforehand (but loose the extra decimal values), or set up a custom sort compare routine for those field columns.
https://bootstrap-vue.js.org/docs/components/table#sort-compare-routine
Your custom sort compare routine (which compares two rows), would need to deal with splitting the string into numerical parts and sort by those values.
I'm using a plugin to create a data table with single row select capability such that when I click anywhere in the row, it links to another page in my web app. I need help figuring out how to disable the select capability on the first column of every row. I've tried using css rules but either they do not work or they are applied to columns other than the first.
Table declaration:
var locationTable = $('#locationTable').DataTable({
dom: 'Brtip',
buttons: [
'excel'
],
select: {
style: 'single'
//selector: ':not(:first-child)'
//selector: ':not(td:nth-of-type(1))'
},
processing: true,
serverSide: true,
ajax: "/locationData",
length: 10,
ordering: false,
"lengthChange": false,
//sDom : '<"top">lrtip',
columns: [
{data: 'locationname'},
{data: 'address1'},
{data: 'address2'},
{data: 'city'},
{data: 'state'},
{data: 'zipcode'},
{data: 'phone'},
{data: 'fax'}
]
});
My attempt to configure selection on every column (of every row) except the first:
//locationTable.select.selector(':not(tr>td:nth-child(1))');
locationTable.select.selector('tr>td:nth-child(2)');
demo
Solution: Add a CSS rule for each column you wish to enable select capability. In the example below, I wish to have select capability on all columns except the first.
select: {
style: 'single',
selector: 'tr>td:nth-child(2), tr>td:nth-child(3), tr>td:nth-child(4), tr>td:nth-child(5), tr>td:nth-child(6), tr>td:nth-child(7), tr>td:nth-child(8), tr>td:nth-child(9)'
}
While setting data into List grid. Some extra space is coming after last record.
isc.CustomListGrid.create({
dataSource: "DeviceDiscoveryDataSource",
ID:"deviceDiscoveryListGrid",
autoDraw: false,
//showAllRecords: true,
paddingAsLayoutMargin:false,
autoFitMaxRecords:2000,
showFilterEditor:true,
filterOnKeypress:true,
filterLocalData: true,
alternateRecordStyles:true,
autoFetchData:true,
showRecordComponents: true,
showRecordComponentsByCell: true,
cellHeight:35,
emptyCellValue:"-",
canSort:false,
canGroupBy:false,
canPickFields:true,
bodyProperties: { canSelectText:true },
fields: [{
name: "deviceName",
type: "text",
title: "Device Name",
align: "center",
width:200
}]
});
Where I am wrong I am not getting. Please Help me.
Try to set virtualScrolling property to false in the ListGrid. When rendering components in each row, SmartClient does not exactly know how much space it will need, hence the blank space after the last record.
More about this: http://www.smartclient.com/docs/10.0/a/b/c/go.html#attr..ListGrid.virtualScrolling
I have a problem with the result of my summary :
I have mutliple page of result and I want the sum of the ENTIRE column but in my case it give the sum for the columns of each page...
Since my english is very poor , I suppose you didn't understand anything at all lol . So I'm going to give you an example:
I have this:
page 1
total : 2
page 2
total : 5
But I want the total of the ENTIRE column in each page like this:
page 1
total : 7 (5+2)
page 2
total : 7 (5+2)
Here's my code :
Ext.applyIf(me, {
forceFit: true,
loadMask: false,
features: [{
ftype: 'summary',
dock: 'bottom'
}],
columns: [
{
header: ressources.HeaderTypeStockText,
dataIndex: 'libelleTypeStock',
summaryRenderer: function(){
return '<b> Total <b>';
},
flex: 0.1
},
{
header: ressources.HeaderQuantiteText,
dataIndex: 'quantite',
summaryType: 'sum',
flex: 0.1
},
{
header: ressources.HeaderPoidsText,
dataIndex: 'poids',
summaryType: 'sum',
flex: 0.1
}
],
store: storeGrid,
// paging bottom bar
bbar: Ext.create('Ext.PagingToolbar', {
store: storeGrid,
displayInfo: true,
displayMsg: ressources.GridDisplayMsg,
emptyMsg: ressources.GridEmptyMsg
})
});
Can anyone help me please?
Thanks
summaryType could also be a function, the parameter are undocumented but the source code give me this:
summaryType: function(store, [records, field]) {
store.each( **makesum** )
return sum;
}
simply ignore records cause in it are only the records of a page, but with the store you can get them all.
To do this from the client side is finally impossible because the total can only sum what is available, So I had to send this info from the server as another field.
I've got datatables set up with about 10 columns, two of which do customized filtering when clicking the column headers.
I'd like to change the column header to reflect which filter is currently active.
To do it, I think I'll need to set up fnDrawCallback and look at the values returned by table.fnSettings()
My current code, trimmed to its essentials for this question:
var table = $('#units').dataTable({
"aaSorting": (popSearch) ? [[8,"asc"]] : [],
"aoColumns":[{ "bSortable": false },
{ "bSortable": false },
{ "asSorting": [ "", "on", "off", "occ", "none" ] },
null,
null,
{ "asSorting": [ "", "revised", "new" ] },
null,
null,
{ "bSortable": false },
{ "bSortable": false }
],
"oSearch": {"sSearch": searchString},
"sAjaxSource": "/system/units/data.php?1.4.3"
},
"fnDrawCallback": function() {
/* tweak column headers according to the asSorting value */
}
});
The asSorting arrays in the aoColumns array show the list of different filters that may be applied to the data being fed to datatables. If the third column header (Status) is clicked, I'd like its text to match what data was sent, (falling back to "status" if the empty string was sent). The filtering works, fine; I just want the header to reflect the applied filter.
In Datatables fnDrawCallback function, how do I know what values were sent for column sorting?
To enable which Column is being Sorted, and visually see it, all you should have to do is add the
"bSortClasses": true,
To your Data Tables Script. Such as:
"aaSorting": (popSearch) ? [[8,"asc"]] : [],
"bSortClasses": true,
...
You should see which column, is being used as the sorter. :)