We Keep Coding

Save column header filter in ag-grid in angular

I am working on an existing application in which they have used ag-grid library for angular for most of the grids that they have in their application. Now the ag-grid gives the functionality to filter the grid based on a column value by using the filter option in the column header. I am giving a link to that https://www.ag-grid.com/angular-data-grid/filtering-overview/. I wanted to implement a feature in which we can save the filter keyword that the user is searching for and when he comes back to the same grid the previous filter is already applied. for example https://plnkr.co/edit/?p=preview&preview here we can pick athlete and filter that by going to the column and searching a value so what I want is that if I search 'abc' I should be able to preserve that. is there a way to do that ? I am giving the colDef for the link above
this.columnDefs = [
{ field: 'athlete' },
{
field: 'age',
filter: 'agNumberColumnFilter',
maxWidth: 100,
},
{
field: 'date',
filter: 'agDateColumnFilter',
filterParams: filterParams,
},
{
field: 'total',
filter: false,
},
];
this.defaultColDef = {
flex: 1,
minWidth: 150,
filter: true,
};
}
Any kind of help is appreciated, thanks :)

You can save the filter applied by using the Grid Event onFilterChanged. Inside here you can get the filterModel by calling api.getFilterModel(). In the plunkr below we are showcasing this by saving the filter model to local storage and restoring it by applying it inside the Grid Event onFirstDataRendered
onFilterChanged(params) {
const filterModel = params.api.getFilterModel();
localStorage.setItem('filterModel', JSON.stringify(filterModel));
}
onFirstDataRendered(params) {
const filterModel = JSON.parse(localStorage.getItem('filterModel'));
if (filterModel) {
params.api.setFilterModel(filterModel);
}
}
See this implemented in the following plunkr
You may also find the following documentation pages relevant:
Saving and Restoring Filter Models
Grid Events

To apply existing filters to ag-grid, it can be done using by setting up filterModel on gridApi.
gridApi.getFilterInstance("fieldName").setModel({
"filterType":"equals", //type of filter condition
"type":"text", //Type of column [text/number/date]
"filter":"value" //Value need to be applied as filter.
})
Similarly onFilterChanged event you can capture changes and apply filter dynamically.

How to prevent alpaca from generating radio field when the search select has 3 or less options

I have a div and a following javascript:
let usersNotContributingIds = [ 19, 20, 21 ];
let usersNotContributingNames = [ "Flavius K.", "Pogchamp", "Lazy Gopnik" ];
let contributorToBeAddedId; // the value that will be used for further actions
$("#alpaca-search-contributing-users").alpaca({
data: null,
schema: {
type: "object",
enum: usersNotContributingIds,
},
options: {
name: "pls",
label: 'Contributor Fullname',
optionLabels: usersNotContributingNames,
helper: "Select user sou want to add as a contributor",
id: "select2-search",
focus: false,
events: {
change: function() {
console.log(this.getValue().value);
contributorToBeAddedId = this.getValue().value
},
focus: function() {
console.log(this.name);
},
blur: function() {
console.log(this.name + ": blur");
},
ready: function() {
console.log(this.name);
}
},
},
postRender: function(control) {
$('#select2-search').select2();
}
});
Obviously, I want to get the newly set value, or anyhow access the selected value and use it. For example with AJAX and a button.
The problem is, that when I have 3 or less options, Alpaca render the field not as a search, but as a radio-something and the this.getValue() is null.
Is there a way to force Alpaca to NOT USE THE RADIO BUTTONS? I dont want to use them, even if I had only 1 option. Documentation just promtly states, that if there are 3 or less options, it will generate radio buttons instead of select, but it says nothing about the fact, that it breaks everything and that I would not be able to retrieve the value the same way as with select field.
If I am doing something inefficiently or wrong, please tell me, I am new with Alpaca and I just want a neat select dropdown with search, that I can use to pick users from a list with any length. Also, I would like the "null" or "none" option to not be there.

To have your select component rendered you should use the option type and set it to "select".
The issue with the value is because you're using it wrong, to get the value in alpaca you only do this.getValue() and there's no need to add .value.
FYI: If you see the error "This field should have one of the values in Flavius K., Lazy Gopnik, Pogchamp. Current value is: 19" you should update your enum array to have strings instead of ints let usersNotContributingIds = [ "19", "20", "21" ];.
Here's a working fiddle for this.

Dynamically passing JSON value to another template

I have one template, let's call it Template A that prints JSON data into a table, one column includes a button which is conditionally rendered when has_violations equals true.
An example of the table:
Table
What I want to accomplish is to take the driver_id that is associated with that particular row into the router link and have it passed onto a different template file let's call it Template B.
But how can I accomplish this using Vuex Store?
Sample JSON data:
{"driver_id":1,"driver_name":"{driver_first_name}, {driver_last_name}","driver_truck":"13","driver_trailer":"83","driver_status":"driving","has_violations":false},
{"driver_id":2,"driver_name":"{driver_first_name}, {driver_last_name}","driver_truck":"58","driver_trailer":"37","driver_status":"sleeping","has_violations":true},
{"driver_id":3,"driver_name":"{driver_first_name}, {driver_last_name}","driver_truck":"80","driver_trailer":"27","driver_status":"driving","has_violations":true},

Basic steps:
Get index of row on button click.
Get index of JSON data using value from Step 1.
Store the JSON data from Step 2 into Vuex.
Send user to Template B using router.
Retrieve data from Store when in Template B
Because you did not show your exact structure, the code below is just a basic structure.
Here's the code:
/* VUEX demo */
new Vuex.Store({
state: {
driver_data: undefined
},
mutations: {
recordDriver({ state }, payload){
state.driver_data = payload;
}
}
});
/* TEMPLATE A demo */
new Vue.component('template-a', {
data: function(){
return {
// Assume this is the JSON
driverJSON: [
{ driver_id: 1, driver_name: 'John Smith' },
{ driver_id: 2, driver_name: 'Bob John' }
]
};
},
methods: {
onButtonClicked: function(e){
const button = e.target;
const td = button.parentElement;
const tr = td.parentElement;
const indexOfTr = [...tr.parentElement.children].findIndex(row => row === tr);
const dataToStore = this.driverJSON[indexOfTr];
// Store data into $store
this.$store.commit('recordDriver', dataToStore);
// After storing, direct page using $router
this.$router.go({ ... });
}
}
});
/* TEMPLATE B demo */
new Vue.component('template-b', {
data: function(){
return {
// Get driver data using $store
driver: this.$store.state.driver_data
}
}
});

I like Yong's answer, but I would rather suggest you to pass the driverID as a prop to your route and then use a VueX getter to get the violations for the particular ID.

UI5 ListItem change DetailAndActive Icon

I would like to change the "pen" icon of the ListItem of type DetailAndActive
I found already following solution for it: UI5 StandardListItem DetailAndActive change Icon
But this once dosn't work with binding items from a model.
I tried therefore to also create a custom list control.
sap.m.List.extend('my.List', {
metadata: {
properties: {},
aggregations: {
items: {
type: "my.StandardListItem",
multiple: true,
singularName: "item"
}
}
},
renderer: {}
});
The binding itself is working. But the detailIcon dosn't change.
See sample at http://jsbin.com/kijisanepa/edit?js,output

In your excample you overwrite the "setDetailIcon" Method which was generated from SAP-Framework.
setDetailIcon: function(icon) {
console.log(icon)
this.DetailIconURI = sap.ui.core.IconPool.getIconURI(icon);
},
so in the method you need to call
this.setProperty("detailIcon", icon);
This set the value of your property and trigger a rerender.
If you dont want to rerender your listItem, use
this.setProperty("detailIcon", icon, true);

how to stop Bootstrap-3-Typeahead dropdown displaying the elements in the sorted order

I'm using Bootstrap-3-Typeahead
Is there a way to avoid the dropdown data getting sorted in natural order ?
This will show all the data in the source in the drop down list in the onFocus event. So the problem is it will only show limited number of elements with the natural sorted order though I don't want them to be.
How can I avoid them getting sorted.
$('#device').tagsinput({
typeahead: {
source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo','Amstedrdam', 'Washidngton', 'Syddney', 'Bedijing', 'Caidro','Amzstderdam', 'Washidnzgton', 'Sydzdney', 'Beijzding', 'Caidzro'],
autoSelect: false,
showHintOnFocus : true,
minLength : 0
}
});

The problem is not in the Typeahead plug-in , but in the second bootstrap-tagsinput plug-in. Unfortunately you can not solve it without editing the source.
Take a look to this JSFiddle
How you can read from source of the bootstrap-tagsinput.js at line 310:
sorter: function (texts) {
return texts.sort();
},
The sorter option is provided by the bootstrap-tagsinput plug-in to the Typeahead plug-in and since the plug-in is executed in a immediately invoked function expression you can't overwrite the sorter method.
You should fork the plug-in and change the sorter option:
sorter: function (texts) {
var sorter = typeahead.sorter || function (items) { return items.sort(); }
return sorter(texts);
},
So your plugin initialization will be:
$('#ppp').tagsinput({
typeahead: {
source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo', 'Amstedrdam', 'Washidngton', 'Syddney', 'Bedijing', 'Caidro', 'Amzstderdam', 'Washidnzgton', 'Sydzdney', 'Beijzding', 'Caidzro'],
sorter: function (texts) {
return texts;
}
}
});
...once you have done this then it will work

The library provides a way to override the sorter. You could simply use that to override the default sorter and return the list as-is:
sorter: function (items) {
return items;
},
Also, here is the default sorter implementation.