We Keep Coding

Making a custom function for a mapped array in VueJS for a table

I am working on displaying and properly sorting data in a bootstrap table in VueJS.
I am trying to replace the date format in an array from January 21, 2010 format to MM/DD/YYYY format so it can be properly sorted by a bootstrap table. The array that is coming from the API has multiple values that are joined to fill one cell in the table. In order to do this, I have been using the join function on the mapped array. For the date field, since there is only ever one value, instead of joining I wanted to create a custom function that would change the date format as stated from ex. January 21, 2010 to 01/21/2010. I was planning on just hard coding this in methods.
When I attempted to declare a function in methods I keep getting the following error:
[Vue warn]: Error in render: "TypeError: item.LastUpdatePostDate.newFunction is not a function"
How would I go about fixing this? Is this a very inefficient way to change the date?
computed: {
mappedItems() {
return this.items.map((item) => {
return {
Ids: item.Ids.join(""),
Acronyms: item.Acronyms.join(", "),
LastUpdatePostDate: item.LastUpdatePostDate.newFunction(),
};
});
},
},
methods: {
newFunction: function () {
return arguments
},}

The value item.LastUpdatePostDate is a string... it has no newFunction method. The newFunction method is available via this.newFunction, and you should pass the date string as argument:
LastUpdatePostDate: this.newFunction(item.LastUpdatePostDate),
newFunction itself could look like this:
newFunction: function (dateString) {
let [monthName, day, year] = dateString.match(/\w+/g);
let month = "JanFebMarAprMayJunJulAugSepOctNovDec".indexOf(monthName.slice(0, 3)) / 3 + 1;
return `${day}/${month}/${year}`.replace(/\b\d\b/g, "0$&");
}
But maybe give it a more telling name ;-)

You cannot call a vue method on a value.
Call the method with the value as argument:
...
LastUpdatePostDate: this.newFunction(item.LastUpdatePostDate),
...
newFunction(date) {
// do stuff with date
return newvalue
}
....

AG-Grid agNumberColumnFilter is not working with calculated values in valueFormatter

I have an ag-grid in angular project. I have set the column def as:
this.columnDef.push(
headerName: col,
field: col,
valueFormatter: setMyValue,
filter: 'agNumberColumnFilter',
filterParams: { valueFormatter: setMyValue }
)
function setMyValue (params) {
return params.value.toFixed(2); // OPTION #1 WORKS
//let temp = params.value * 100;
//return temp.toFixed(2); // OPTION #2 DOES NOT WORKS
}
OPTION #1: this logic works in the ag-grid and i am able to correcly filter using equal, great then etc.
OPTION #2: this logic does not work, when i enter any number in filter, it returns empty rows.
What I have tried:
I have tried to bind the function to component:
valueFormatter: setMyValue.bind(this)
and I also tried to force the return value to number as :
return parsInt(temp.toFixed(2));

Vue-Form-Generator schema is not reactive to computed properties

I have computed property in my data this.coinPairingOptions that needs to render its radio buttons based on some of the other fields in this schema. I have reduced the amount of code in the file to save space.
data: function () {
return {
schema: {
{model: "symbolPair", type: "radios", label: "Pair with", values:
this.coinPairingOptions, required: true}
},
computed: {
coinPairingOptions() {
console.log("computing coinPairingOptions")
let coin = this.model.symbol.toUpperCase();
let options = [];
if (this.model.exchange === 'Coinbase') {
options = this.getCoinbasePairs
} else if (this.model.exchange === 'Binance') {
options = this.getBinancePairs
} else {
}
console.log(options.get(coin));
return options.get(coin);
},
}
In the dev tools I can see the computed property changing to the correct values however it is not changing in the data. Apparently, this is appropriate behavior, but what is a way around this? I have tried putting {{this.coinPairingOptions}} in the html and it errors because it's a computed property with not value initially.
Any help would be appreciated!

You can't use computed property in data, because data evaluates before the computed properties did.
You can use a watcher to achieve the intended result. Have a look at the documentation, you can add the argument immediate to trigger the callback immediately with the current value of the expression.
Computed properties are already accessible in the template by using {{}}. You don't need to put a this in front of the computed.

W2UI grids : how to get the concerned cell value in render function?

I need to use cell renderers with a W2UI grid; I do like that :
Renderer function :
// Renderer function
let dateRenderer = function(record, index, columnIndex) {
return `${record.date_start}`;
};
Columns definition :
// ...
// Renderer function call in columns definition
{ field: 'date_start', caption: 'Start date', render: dateRenderer },
// ...
It works well, but the problem is that I have a lot of different date columns in my grid and I need to create a different renderer function for each (for exemple whith record.date_start, record.date_end, record.date_shipping, etc...) when all dates in the grid are formated the same way.
Is it possible to get the value of concerned cell in renderer function and no entire record object ?

You can use following function to get the value of the related cell.
this.getCellValue(index, col_index);
// index - index of the record
// col_index - index of the column from the columns list
Have a look at this fiddle to understand it clearly.

Kendo UI Grid - Add/Remove filters dynamically

I need to Create a Kendo ui grid. Since this has many filters, I need to have 4 regular filters and rest should be able to add dynamically according to users choice. Can someone provide assistance on this?

In order to filter by text box you can hook up a keyUp event in order to retrieve the value. You can then add this as a filter to the existing filter object.
$('#NameOfInput').keyup(function () {
var val = $('#NameOfInput').val();
var grid = $("#yourGrid").data("kendoGrid");
var filter = grid.dataSource.filter();
filter.filters.push({
field: "NameOfFieldYouWishToFilter",
operator: "eq",
value: val,
FilterName: "UniqueIdentifierForFilter"
});
grid.dataSource.filter(filter);
});
Using a drop down box, you can achieve the desired functionality by using the onChange event, get the value using $('#yourDropDown').val();.
The FilterName is optional incase you require additional logic to add/remove filters. i.e. you can use this to determine whether the filter already exists in the array and if so you can use splice to remove it.
EDIT
Using FilterName you can search to see if a filter already exists and remove it:
var filterIndex = filter.filters.map((e: any) => { return e.FilterName }).indexOf("UniqueIdentifierForFilter");
if (filterIndex > -1)
{
filter.filters.splice(filterIndex, 1);
}

For #lakshan, while this is largely correct, you will get an error if there are no filters at first. I found this answer when I encountered the undefined filter error. My full solution for adding a filter, either to an undefined filter set, or along with an existing one:
var grid = $("#ActivityGrid").data("kendoGrid");
var dataSource = grid.dataSource;
var gridFilter = dataSource.filter();
var upcomingFilter = {
field: "ActivityDate",
operator: "gte",
value: new Date(),
FilterName: "UpcomingOnly"
};
if ($("#UpcomingOnlyCheckbox")[0].checked) {
if (gridFilter == undefined) {
dataSource.filter(upcomingFilter);
}
else {
gridFilter.filters.push(upcomingFilter);
dataSource.filter(gridFilter);
}
}