how to combine data from two columns in aurelia slickgrid - aurelia

I have a aurelia slickgrid table with start date and end date and it is fine. Backend api response is in odata format. Now i want to make a new column called Status and status is calculated as :
<td class="col-xs-4 col-md-2">
<div>
<div if.bind="doesLicenseActivate(lic)">
Activates on ${lic.DateStart}
</div>
<div if.bind="didLicenseEnd(lic)">
Ended on ${lic.DateEnd}
</div>
<div if.bind="isLicenseCurrentlyActive(lic)">
Current License
</div>
<div if.bind="lic.IsCanceled">
Cancelled on ${lic.DateEnd}
</div>
</div>
Basically, those fucntions above such as doesLicenseActivate are bunch of Moment.js function doing some date caclulations. My column looks like:
/* Define grid Options and Columns */
private defineMembershipGrid() {
return this.columnDefinitionsMembershipHistory = [
{ id: "DateStart", name: "Start Date", field: "DateStart", formatter: Formatters.dateEuro, sortable: true, filterable: true, minWidth: 100, },
{ id: "DateEnd", name: "End Date", field: "DateEnd", formatter: Formatters.dateEuro, sortable: true, filterable: true, minWidth: 100, },
{ id: "Duration", name: "Duration", field: "Duration", formatter: this.DurationFormatter, sortable: true, filterable: true, minWidth: 100, },
// make a status column here
];
}
This is how it looks like:
And this is what i want to do, basically make a new Status column and it uses the values from first two columns (start and end date)

Just use a Custom Formatter, see Custom Formatter - Wiki it has the dataContext which is the item object of the entire row. You can use MomentJS to do your calculation and display "10 months" or "Current License" (I guess that last one would be a calculation and a switch/case). You can do anything you want in a Custom Formatter and it will be recalculated every time the grid re-render, if you change value of another cell it will also be recalculated. You might have problem to filter and sort though and in that case you might want to not show a filter and remove the sort.

Related

DataTable PDF Export orders wrong

My dataTable automatically is ordered by the third column with the setting order: [2, 'asc'] in the config. This works correctly. In the buttons section on the config I added the setting exportOptions: { modifier: {search: 'none', order: 'original'} } with the expectation that this would order the exported table by the third column as well. However when I do export the table, it is ordered by the second column instead.
Is there any way to fix this?
I use this config with the csv button. I assume it will be the same for pdf
{
extend: 'csv',
className: 'btn btn-info btn-sm',
exportOptions: {
filter: 'applied',
order: 'current'
}
}
According to https://datatables.net/forums/discussion/45560/set-order-for-export-to-excel-pdf you can set the order value to index if you want the original order
modifier: { order: 'index' }

Tabulator, vue.js - how to set focus of a cell after table refeshData

Using Tablulator (great product!), I am trying to keep the cursor from resetting to the first editable cell in the table after editing a cell. The replaceData function is updating the data element, and while the scroll position does not change, the cursor is reset. I'm not sure how to do this correctly. The documentation, while great, is silent about cursor position beyond the next(), etc methods, which I cannot quite get to work.
In my vue.js table definition component, I have a watch like this:
watch: {
tableData: {
handler: function (newData) {
this.tabulator.replaceData(newData);
},
deep: true,
}
},
and a cellEdited method inside mounted like this:
mounted() {
let self = this;
//todo Possibly validate that cater tips is less than total tips since cater tips is a portion of total tips
self.tabulator = new Tabulator(self.$refs.myTable, {
height: 380, // set height of table (in CSS or here)
placeholder: 'Click "Load Store Tips" to edit data',
data: self.tableData, //link data to table
reactiveData: true, //enable data reactivity
downloadConfig: {columnCalcs: false},
addRowPos:"bottom",
history:true,
layout: "fitDataFill",
initialSort:[
{column:"storeID", dir:"asc"},
],
//Define Table Columns
columns: [
{title: "Store ID", field: "storeID", sorter:"number"},
{title: "Store Tips", field: "inStore_tips", align: "right", formatter: "money", editor: "number", bottomCalc: "sum"},
{title: "Cater Tips", field: "cater_tips", align: "right", formatter: "money", editor: "number", bottomCalc: "sum"},
{title: "Client ID", field: "clientID"},
],
////////////////////////////////////////////////////////////////////////////
// When a cell is edited, write the data out to the server to ensure it is
// always in a saved state.
////////////////////////////////////////////////////////////////////////////
cellEdited: function (e, cell) {
//self.colPos = cell.getColumn(); //trying to save the cursor pos, but generating error
//self.rowPos = cell.getRow(); // generating error
self.PostTipsEventMethod();
}
});
Here is what I have tried:
Tried capturing the row and column position, and then setting that after the replaceData table render, and after the cellEdited method
Tried using the next() method to move the cursor to the next cell inside the cellEdited method, before and after the replaceData function.
Can someone guide me a bit further on this? I've searched through the tabulator element in the debugger trying to find the row and column numbers of the cell I'm editing, but so far, no joy. I guess I don't understand the lifecycle of the table rendering well enough.
Thank you!

How to display custom validation for date picker in ngx-formly/bootstrap

I am creating dynamic UI/form using ngx-formly/bootstrap(not using material). I want to display datepicker control so I have displyed custom bsdatepicker control using ngx-bootstrap/datepicker. Now I want to do validations on this datepicker e.g IfI have from and to date then From date should not be less than current date or To Date should not be grater than from date. Any help will be appriciated.
//datepicker.html
<pre><input type="text"
id="dob-id"
class="form-control calendar"
placement="bottom"
bsDatepicker
[formlyAttributes]="field"
#dobDate="bsDatepicker"
[bsConfig]="bsConfig"
placeholder="YYYY-MM-DD"
[class.is-invalid]="showError" class="" style="width: 350px;">
took separate component for this and registered in app.modeul
//in scheema
{
key: 'date1',
type: 'bsdatepicker',
templateOptions: {
label :'From Date',
required: true,
},
},
{
key: 'date2',
type: 'bsdatepicker',
templateOptions: {
label :'To Date',
required: true,
},
},
The validation is handled by Formly so all you need is to just define validation along with its messages you may check our examples in the docs:
https://formly.dev/examples/validation/built-in-validations
https://formly.dev/examples/validation/custom-validation
https://formly.dev/examples/validation/validation-message
ngx-bootstrap is a wrong tag here, I think

Vue Tables 2 - perPageValues option not working correctly

I am using Vue Js v.2.4.4 and trying to configurate vue-tables-2 plugin.
I have a list of rows and I am trying to limit them with the perPageValues option, here is my options:
options: {
filterByColumn: false,
filterable:['nickname','email','reg_date','year'],
perPage:100,
perPageValues: [10,25,50,100,500,1000],
texts: {
filter: "Search:",
filterBy: 'Search by {column}',
count: ''
},
dateColumns: ['reg_date'],
dateFormat: 'DD-MM-YYYY',
datepickerOptions: {
showDropdowns: true,
autoUpdateInput: true,
},
pagination: { chunk:10, dropdown: false },
headings: {
id: 'ID',
reg_date: 'Registered',
nickname: 'Nickname',
email: 'Email',
year: 'Registration date',
number: 'Number'
}
}
Everything is working fine, but the list of limitation-values showing only the first two elements:
No errors were provided in the console and the table filtering through this combobox is working without any possible issues.
The only thing is, when I am using a small values in the perPageValues option like this:
perPageValues: [1,3,6,7,9,11,13],
The full list of values is shown and everything is working correctly:
I conducted an observation and found that every number after 20 are not showing at all (from time to time).
Can you please give some advice to know which thing could provoke this issue?
Is it possible to fix this without fixing a plugin sources e.t.c.?
p.s. I am using this vue component without any other settings or components, in the test mode so there is no plugins incompatibility of versions e.t.c.
Thanks!
it's possible that that happens because you do not have that amount of records
you can try this
in your css:
.VueTables__limit {
display: none;
}
this will make the default selector disappear
in your vue template adds a new select:
<select #change="$refs.table.setLimit($event.target.value)">
<option value="10">5</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
add the reference in the table you are generating
<v-client-table ref="table" :options="yourOptions" :data="yourData" :columns="yourColumns" ></v-client-table>
JSfiddle:
https://jsfiddle.net/jfa5t4sm/1868/
This isn't an answer to the question but if anyone ends up here wondering how to turn off the "Records:" dropdown completely via the options, you can do it like this...
options: {
perPage: 5,
perPageValues: [],
}

Make DGrid selector shown or hidden based on row content

I'm using the Dgrid Selection grid for a grid that uses check boxes for selecting the content. However, only child node of the tree should show the checkbox as the parents are just categories and can't be selected. Previously I used the editor plugin for this, but it created difficulty with clearing selections (specifically, the "clearSelection" method of the grid did nothing). I switched to the selector plugin, so now selecting and deselecting rows works fine, but now I can't seem to figure out a way to hide the check box on some rows and not others.
Original code
var columns = [
editor({
label: " ",
field: "itemSelected",
sortable: false,
width: 33,
canEdit: function(object) {
// only add checkboxes for child objects
return object.type === "child";
}
}, "checkbox"),
tree({
label: "Item",
field: "shortItemId",
width: 150,
shouldExpand: function() {
return 1;
}
}),
{
label: "Grouping Name",
field: "groupingName"
}
];
var itemGrid = new SelectionGrid({
store: itemStore,
style: {
width: '99%',
height: '99%'
},
columns: columns,
sort: [{attribute: "shortItemId", descending: false}]
});
I used the "editOn" parameter of the editor to hide the check box, but the selector plugin only has the "disabled" parameter, which doesn't hide the field at all.
Is there a way I can get the check box hidden using the selector like I did with the editor?
Looking at the dgrid/selector source, it seems that the input is always created and added to the DOM, regardless of whether it has been disabled. Presumably this is to allow it to be flexible enough to enable and disable checkboxes on the fly without the need to constantly re-create DOM nodes. While it is not possible to prevent these nodes from being rendered, it is possible to hide them with CSS, since the cell node is given a class with the format field-{fieldName} (or in this particular case, field-itemSelected):
// JavaScript
var columns = [
selector({
label: " ",
field: "itemSelected",
sortable: false,
width: 33,
// Disable any checkbox that is not of type "child"
disabled: function (item) {
return item.type !== 'child';
}
}),
...
];
/* CSS */
.field-itemSelected input[disabled] {
display: none;
}