I would like to display field value as character, but underlying data as number, so when i do search query, i am able to utilize numeric data, instead of displayed data.
example
{ title: 'Plant' , field: 'plant.name'},
But required
{ title: 'Plant' , field [ex: search-column]: 'plant.id' , field [ex: display]:'plant.name' },
Ahhh. coming back to tabulator after long time, it totally skipped my mind 🧠.
here is the solution
{ title: 'Plant' , field: 'plant.id',
formatter:function(cell){
// This is eager loaded data in Laravel
return cell.getRow().getData().plant.title;
}
},
Now , in you query, you can search relationship with
->orWhereHas('plant', function($q) use($request){
$q->where('title','LIKE',"%$request->search%");
})
I hope this helps out others as well 🙂
Related
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.
I am using Tagify with a custom AngularJS directive that I built, Tagify mixed input returns the JSON objects of selected tags and text in one single string, for example:
var tagify = new Tagify(myElement, {
mode: 'mix',
pattern: /#/,
whitelist: [{ value: "User Name", code: '$name' }, { value: "Phone Number", code: '$phone' }],
enforceWhitelist: true,
dropdown: {
maxItems: 20,
classname: "tags-look",
enabled: 0,
closeOnSelect: true
}
});
tagify.on('change', () => console.log(tagify.DOM.input.value))
The user input would be:
Hello User Name ×, the SMS has been sent to your phone Phone Number ×.
This simple example returns:
Hello [[{ value: "User Name", code: '$name' }]], the SMS has been
sent to your phone [[{ value: "Phone Number", code: '$phone' }]].
(and the JSON returned is escaped)
What I am doing later is replacing the tags that the user selected (by typing the # character and selecting them from the dropdown) with my own dynamic variables.
I was able to get a nice result with tagify.DOM.input.textContent as it rendered the following result:
Hello User Name, the SMS has been sent to your phone Phone Number.
However, since the whitelist is translatable and can be in other languages that I can't find and replace easily later, what I need is the code attribute from the JSON whitelist and not the value. The expected result that I couldn't find a way to reach yet is:
Hello $name, the SMS has been sent to your phone $phone.
Thanks.
You can create your custom transform function, to transform it the way you like, you can do something like this.
function transformer(value) {
return value.replace(/\[\[(.*?)\]\]/g, (arr => {
let json = JSON.parse(arr);
return json[0].map(e => e.code).join(', ');
}))
}
And then you can call it on change (or rather on/or before submit), like this:
tagify.on('change', (e) => transformer(e.detail.value));
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.
I am trying to insert a href into one of my columns in DataTables but Im having some issues since I need the actual href to show my slug and then the full company name.
Example how it should be formatted: "company"
Real data: Toyota Cars.
I am using columns.render which seems to be the correct function but I can't wrap my head around how I can get 'company' between the a tags. The function does not even make use of the "data" specifier, instead it takes the data first in my ajax file which in this case is slug.
My DataTable.js file
ajax: '/api/datatable',
columns: [
{ data: 'slug' },
{ data: 'company' },
],
"columnDefs": [
{ targets: [0, 1], visible: true},
{ "targets": 0,
"data": "This doesnt even seem needed?",
"render": function ( data, type, row, meta ) {
return 'full company name';
}
}
],
I will go ahead and give an answer, based on the assumption that you are trying to merge values of 2 columns. If my assumption is not correct, please, update the question to clarify "expected vs actual" results.
You are using data parameter in render function. That parameter is based on the value you specified in columns.data. In your case (with target === 0), data will contain the value that DataTable got for { data: 'slug' } column.
If you want to merge values from different columns into one, then render function is the correct way to do it. However, instead of data, you should use row parameter, which contains all key-value fields for a row.
For example:
// ...
"targets": 0,
"data": null,
"render": function ( data, type, row, meta ) {
return ''+row.company+'';
// or whatever your row object key-value structure is
}
// ...
I am working on a site employing ajgularjs that will display data returning from a web api call in an ng-grid display. Earlier problems with the data not displaying after the $http.get were remedied through a service call such as:
services.factory('Filing', ['$resource',
function($resource) {
return $resource('/api/bills');
}]);
I have a need on the ng-grid to concatenate the values of three data columns to display in a single ng-grid column, and this is not working.
On Google's angular site I found a similar question to call a function to resolve the concatenation, so in trying this I came up with the following in my controller .js file:
$scope.billData= Filing.query(); // from services.js
$scope.gridData = $scope.billData;
$scope.gridDefs = [
{ field: 'billNumberColumnDisplay()', displayName: 'Bill' },
{ field: 'AuthorLastName', displayName: 'Author'},
{ field: 'Status', displayName: 'Status'},
{ field: 'Committee', displayName: 'Committee'}
];
$scope.gridOptions = {
data: 'gridData',
columnDefs: 'gridDefs',
enableColumnResize: true,
multiSelect: false
};
//function to concatenate the bill number fields
angular.forEach($scope.gridData, function(row) {
row.billNumberColumnDisplay = function() {
return this.BillId.Chamber + this.BillId.Type.trim() + ' ' + this.BillId.Suffix.replace(/^0+(?!\.|$)/, '');
};
});
The second, third, and fourth columns display just fine, so it's not that the data isn't being returned to the grid. If I just display a single column from my return /api call it also displays in the first column.
So, is there anyone out there who can point me in the right direction here? I wouldn't think concatenating fields would pose such a difficult task, but I am obviously doing something wrong.
Thank you in advance for any assistance,
Dan