Can Tabulator autocomplete be set up per cell? Not column? - javascript

I need to have have two autocompletes in my Tabulator definition. A user will select an employee - first autocomplete - then when he moves to select a contract - second column the autocomplete must be linked to the value selected in the first column.
To my knowledge Tabulator does not have such feature. So I was thinking that upon clicking the "contract" cell that column definition - autocomplete definition - would be updated. I cannot make it work because the function updateDefinition is buggy. It creates new column instead of updating its definition.
Working jsFiddle
table.on("cellEditing", function(cell){
//e - the click event object
//cell - cell component
updateTitle(cell)
})
table.on("cellClick", function(e, cell){
updateTitle(cell)
})
function updateTitle(cell){
var field = cell.getField()
if (field == "contract" || field =="id"){
var column = cell.getColumn()
var name = cell.getRow().getData().name
console.log(field)
console.log(name)
column.updateDefinition({title:"Updated Title"})
}
}
I am using MaterializeCSS and its autocomplete but I do not know how to use it inside Tabulator. And if it is actually a good idea.
Could you please suggest the best solution?

In your example you still want to have a different auto complete per column, you just want to make the values of "contract" autocomplete dependent on the value of the "name" column.
You can pass a function into the editorParams option instead of an object, that function will be triggered every time the editor is opened, and should return the params object for the editor.
Using this you can make a function that will changed the values prop of the editor params based on the value of the name cell. in this example we will asume these values are stored in a simple contracts lookup list for a name of each user, but you can look this up however you like
{title:"contract", field:"contract", editor:"autocomplete", editorParams: function(cell){
var contracts = {
bob:["A", "B", "C"],
jim:["D", "E", "F"],
};
return {
values: contracts[cell.getData().name] //set values list based on name cell value
}
}},

Related

GWT CellTable: Selecting one checkbox selects every checkbox/row in the table

I have a very basic CellTable in GWT right now and use a majority of the code shown here.
However when I toggle a checkbox, every single row gets highlighted.
Preview: gfycat
I did try so far:
Multi-/SingleSelectionMode: (I only want to get one row, so I would prefer SingleSelectionMode)
CheckBoxCell(true, true): -> This is exactly how I want the CellTable to look, however with these parameters I can't get an object with "getSelectedObject()". Other variations of the parameters(false,false/true, false) also didn't seem to work
CellTable<Article> ArticleCt = new CellTable<Article>(KEY_PROVIDER);
ListHandler<Article> sortHandler = new ListHandler<Article>(Articles);
ArticleCt.addColumnSortHandler(sortHandler);
final MultiSelectionModel<Article> selectionModel1 = new MultiSelectionModel<Article>(KEY_PROVIDER);
ArticleCt.setSelectionModel(selectionModel1, DefaultSelectionEventManager.<Article> createCheckboxManager());
Column<Article, Boolean> checkColumn = new Column<Article, Boolean>(
new CheckboxCell(true, false)) {
public Boolean getValue(Article object) {
return selectionModel1.isSelected(object);
}
};
I want to have only the row with the checked checkbox selected so I can fetch the peticular row/object with selectionMode.getSelectedObject() or selectionMode.getSelectedSet().
However every single row gets highlighted.
Your key provider, KEY_PROVIDER in the question above, must provide unique and consistent keys per row. For example, each row might have an "ID" field.
If more than one row shares a key, then selecting one seems to be the same to the selection model as selecting both. If a row's key is not consistent, then when a row is selected, it can't be queried later since its key changed.

tabulator adding "numrow" once data were pulled

I've a table of unknown data (some columns and rows ) ,I'm at the point where i require to use the function table.updateData() which requires column id to be existing within the data construction which i can't guarantee as the data are pulled from an unknown source .
is there's a way around this or is there's any alternative way of updating the data later ?
p.s. i only use vanilla javascript not jquery
There needs to be a unique index set on each row of the data in order for Tabulator to know which row you want to refer to.
You can set this to any column field in the row data using the index option in the table constructor
var table = new Tabulator("#example-table", {
index:"age", //set the index field to the "age" field.
});
By default this is set to the id filed
If you want to set this locally you can use a mutator to create a value in this field for you:
//define variable to count index's to ensure they are unique
var index = 0;
//define custom mutator
var idMutator = function(value, data, type, params, component){
//value - original value of the cell
//data - the data for the row
//type - the type of mutation occurring (data|edit)
//params - the mutatorParams object from the column definition
//component - when the "type" argument is "edit", this contains the cell component for the edited cell, otherwise it is the column component for the column
return index++; //return the index for the row.
}
//column definition
{field:"id", mutator:idMutator, visible:false}
However if you are updating the data from a remote source then there is no wat to tie that back to the data in your table.
It is standard practice to include an index or unique identifier in the data of this sort to allow syncing between client and server side

How to pre-select AG-Grid filter dropdown checkbox values

Is there a way to pre-select a value or values for the filter checkbox?
I am currently saving the last filter so if a user filters, leaves the page, and then comes back the grid is still filtered. The issue I'm having is the filter drop down checkboxes does not reflect the filtered rows.
Here is the code I am using to set the saved filter:
if ($scope.onFilterChanged) {
this.gridOptions.onFilterModified = function () {
$scope.onFilterChanged({filter: ctrl.gridOptions.api.getFilterModel()});
}
}
if ($scope.currentFilter && $scope.onFilterChanged) {
this.gridOptions.api.setFilterModel($scope.currentFilter);
} else {
this.gridOptions.api.setFilterModel(null);
}
setFilterModel works great if I'm not leaving the page and coming back. But I'm not sure why it updates the rows and not the drop down options on page load..Is there a way to get the filtered rows and the check boxes to match on page load?
Yes its possible via filter API
You need to get filter instance first
let filterInstance = this.gridOptions.api.getFilterInstance('columnNameHere');
Then you can decide what should be in the filter
filterInstance.selectNothing();
filterInstance.selectValue("value one");
filterInstance.selectValue("value two");
...or...
let model = ["value one", "value two"];
filterInstance.setModel(model);
And on the last step - just inform the grid about changes
this.gridOptions.api.onFilterChanged();

Can internal and external sorting/filtering be applied to ui-grid?

I have requirement where there is two ui-grids in one page as shown in the below screenshot
In UI-Grid One: Batch Charges should have its own sorting/filtering i.e. through
col.enableFiltering = true;
col.enableSorting = true; // (Typescript code)
In Grid two - for Samples and Test name column it should have its own filtering/sorting enabled.
But apart from this from List Price column to Net Interco column the filtering/Sorting should work based on the first grid. i.e.
If I sort the List Price then the corresponding column in the second grid should also get sorted. similarly, when I use the filter on NBS Price the corresponding column in the second grid should also get filtered based on the entered text in the filter text box in the first UI-Grid.
Let me know if this is possible ??.
I tried sortChanged method of the UI-Grid API registering it through onRegisterApi but it didn't work.
So my final Grid config for both these grids will look like
grid.enableFiltering = true;
grid.enableSorting = true;
grid.useExternalFiltering = true;
grid.useExternalSorting = true;
So my other question is will both enableFiltering and useExternalFiltering work for same UI-Grid.
For the filter change you can use the filterChanged event (I use it and it works fine). Put it in your onRegisterApi function:
onRegisterApi: function(gridApi) {
gridApi.core.on.filterChanged($scope, function(....) {
// Set some scope variable that both lists use for filtering
$scope.someFilterValueBothListsLookAt = ......
});
}
I have not tried sortChanged but I would guess it works in a similar manner.

Filter Parse Query based on pointer field value

I have two tables A & B, in table B I have a column of type pointer, each field points to a class in table A.
I need to know how to query table B based on the value of a particular field in the pointer column.
So for example, I have 4 objects (records) in table B, and in the pointer column I have pointer1, pointer2, pointer3 and pointer4. So if I want to carry out a query on table B and I want to extract the record with the field value of pointer3 how do I do this in javascript?
Based on your comment I would suggest storing both object IDs for each row. You could use Parse.when(recordA.save(), recordB.save()).then(...) to wait until both finished if you needed to provide feedback in the UI.
An alternative is to just store the object ID for the table B record and in the success handler you'll get back the updated record that'll include the pointer where you can then execute another save. This is slow as it will do two saves in sequence instead of kicking both off at once.
So after a long time searching and looking around and asking questions I figured it out myself in the end. I needed to pass in an object in the query.equalTo method like so:
query.find({
success: function(results) {
var detailsObject = results[0];
detailsObject.set("uuid", uuid);
detailsObject.set("proximity", prox);
detailsObject.set("campaignId", campaignId);
detailsObject.set("location", location);
detailsObject.set("sub_location", subLoc);
detailsObject.save(null, {
success: function(detailsObject) {
var content = Parse.Object.extend("Content");
var contentQuery = new Parse.Query(content);
var id = detailsObject.id;
contentQuery.equalTo("descId", detailsObject);
So "descId" is the pointer column in my content table and rather than trying to query the value in the field (object id of details object), I needed to pass the details object into the query.equalTo
I hope this is of benefit to someone else.

Categories