I am trying to load data dynamically in a fieldset.
So I have a fieldset in which I dynamically add items, in my example I have two comboboxes. I want to fill those comboboxes with data coming from a store, knowing that each combobox will have different data according to its ID.
Here's what I've tried to do :
var targetFieldset = targetView.down('fieldset[id=myfieldset]');
targetFieldset .items.each(function (item) {
myStore.getProxy().url ='combo_items.php?id_combo=' + item.id;
myStore.autoSync = true;
myStore.load({
params : {
id_combo: item.id
}
})
});
How can I do this please ? Any help would be appreciated.
EDIT :
I have tried this as well, but it always binds the values corresponding to the last item id to all the comboboxes.
targetFieldset.items.each(function (item) {
myStore.clearFilter(true);
myStore.filter('id_combo', item.id);
alert(item.id);
item.bindStore(myStore);
myStore.loadData([], false);
});
Okay I managed to do it by cloning the filtered store to an array and then binding that array to the fieldset items.
Related
We have an Ag-Grid table with row selection via the built in checkbox functionality. The check boxes are conditionally displaying via the isRowSelectable options:
isRowSelectable: function (rowNode) {
return rowNode.data ? rowNode.data.published === false : true;
}
The published column is being updated as part of a modal called from another column. A redrawRows is being called when the modal is closed:
modal.result.then(() => {
const row = params.api.getDisplayedRowAtIndex(params.rowIndex as number);
//this.gridApi?.redrawRows([row] as any);
this.gridApi?.redrawRows();
});
The display values in the row are being updated when the modal is closed, however, the checkbox is not appearing when the published value is set to false. If I hang a breakpoint in Dev Tools the isRowSelectable code does not appear to be hit.
Any suggestions would be much appreciated.
Cheers,
-John
Can you try this and see if it works?
let itemsToUpdate = [];
let data = rowNode.data;
// modify data fields
// Ex: data.field1 = "new value";
itemsToUpdate.push(data);
this.gridApi.applyTransaction({update: itemsToUpdate});
https://www.ag-grid.com/javascript-data-grid/data-update-transactions/
Use refreshCells
this.gridApi?.refreshCells({force:true});
https://www.ag-grid.com/react-data-grid/view-refresh/#redraw-rows
I have a use case wherein I need to filter a list on the basis of selections from various drop down (one at a time). I am aiming at making a common function to be called on ng-change from dropdown as follows:
$scope.filterTasks = function(selection, filterOn) {
if (filterOn === "trade") {
$scope.tasks.forEach(function(t) {
if ((t.team.code === selection.team.code) && (t.deal.code === selection.deal.code)) {
t.filtered = "trade";
}
$scope.filterBy = "trade";
});
}
else if (filterOn === "cluster") {
//similar approach in this case
}
}
and in html I am doing something like:
<li ng-repeat="t in tasks | filter : {filtered: '{{filterBy}}'} : true track by t.tid" class="li_row" ng-if="!t.hide">
By default I am keeping filtered property as 'show' and $scope.filterBy = 'show', so that all the objects in array get displayed.
This do not seem to be working.
Is there some invalid approach up here. What can be a suitable way to achieve this. (i.e display all elements by default, and on selection from dropdown, display only those element where some deep properties of selection matches those properties in array objects).
I have found few post demonstrating above, but could not grasp much out of them
I am using ui-grid - v3.0.0-rc.22 - 2015-06-15.
It is configured to use external sorting, which works fine.
Now i have the requirement to change the sorted column from outside with a select box. On every change of the select box it fires external sorting and the data in the grid is updated correctly. It also updates the gridOptions.columnDefs: It sets the sort object of all columns except the correct one to undefined and updates the sorted column.
But there is one problem, the current sorted column indicator (in the column header) is not updated as it should be.
I tried using gridApi.core.notifyDataChange() with "options" or"column" as parameter value but it didn't work also.
How to update the sort-indicators in ui-grid programmatically?
Here is a part of the code triggered by the select box:
function updateSortColumn() {
if ($rootScope.QuickSearch.sortBy !== undefined) {
$scope.gridOptions.columnDefs.forEach(function (col) {
if (col.field === $rootScope.QuickSearch.sortBy) {
col.sort = {
direction: $rootScope.QuickSearch.sortOrder,
priority: 0
};
}
else
{
col.sort = undefined;
}
});
}
if($scope.gridApi !== undefined)
{
$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.OPTIONS );
$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
}
}
You could use the function "sortColumn" of the ui-grid, like this:
$scope.gridApi.grid.sortColumn(column, directionOrAdd, add)
here is the source code of this function : ui-grid source code
in your example it will give somthing like this :
function updateSortColumn() {
if ($rootScope.QuickSearch.sortBy !== undefined) {
$scope.gridOptions.columnDefs.forEach(function (col) {
if (col.field === $rootScope.QuickSearch.sortBy) {
$scope.gridApi.grid.sortColumn(col,$rootScope.QuickSearch.sortOrder);
}
});
}
}
$rootScope.QuickSearch.sortOrder must be in (uiGridConstants.ASC|uiGridConstants.DESC). You do not have to provide it.
I had the same problem -- the solution in my case was what Gho5t helpfully mentioned in a comment on another answer on this question.
I'm adding this response so the solution can have more visibility (alongside a more complete code example).
I needed a way to hook into the sort event on a grid and sort other grids on the page by the same column (they all have the same column definitions).
I was incorrectly passing the gridOptions.colDefinition object to the sortColumn() method and the column header sort indicator was not updating.
The grid.column object was what the sortColumn() method was looking for and caused things to work as expected.
// sortColumns is an array of column objects that gets passed in when a grid column is sorted (this code only considers the first sorted column)
// secondGridObj is an object defined elsewhere that has a reference to another grid's gridApi object
gridApi.core.on.sortChanged(null, function (grid, sortColumns) {
if (sortColumns.length) {
var sortDirection = (sortColumns[0].sort) ? sortColumns[0].sort.direction || uiGridConstants.ASC : uiGridConstants.ASC;
var matchingColumn = _.find(secondGridObj.gridApi.grid.columns, function (v2) { return v2.field === sortColumns[0].field; });
if (matchingColumn) {
secondGridObj.gridApi.grid.sortColumn(matchingColumn, sortDirection, false)
.then(function() {
secondGridObj.gridApi.grid.notifyDataChange(uiGridConstants.dataChange.COLUMN);
});
}
}
});
How do I reset my ExtJS filters in my grids. More specifically, how do I get the header to honour the changes to the filtering.
ie. This works fine :
grid.store.clearFilter();
But the header rendering is all wrong. I need to get into all the menu objects and unselect the checkboxes.
I am getting pretty lost. I am pretty sure this gives me the filterItems :
var filterItems = grid.filters.filters.items;
And from each of these filter items, i can get to menu items like so :
var menuItems = filter.menu.items;
But that's as far as I can get. I am expecting some kind of checkbox object inside menu items, and then I can uncheck that checkbox, and hopefully the header rendering will then change.
UPDATE :
I now have this code. The grid store has its filter cleared. Next I get the filterItems from grid.filters.filters.items and iterate over them. Then I call a function on each of the menu items.
grid.store.clearFilter();
var filterItems = grid.filters.filters.items;
for (var i = 0; i<filterItems.length; i++){
var filter = filterItems[i];
filter.menu.items.each(function(checkbox) {
if (checkbox.setChecked)
checkbox.setChecked(false, true);
});
}
The checkboxes do get called, but still nothing is happening :(
Try this code:
grid.filters.clearFilters();
This should take care of both the grid and its underlying store.
When you do
grid.store.clearFilter();
it can only clear the filters on the store but the grid's view doesn't get updated with that call. Hence to handle it automatically for both the grid's view as well as the grid's store, just use
grid.filters.clearFilters();
Hope it helps!
Cheers!
Your update help me but you forget the case where you have input text instead of checkbox.
So this is my addition of your solution:
grid.filters.clearFilters();
var filterItems = grid.filters.filters.items;
for (var i = 0; i<filterItems.length; i++){
var filter = filterItems[i];
filter.menu.items.each(function(element) {
if (element.setChecked) {
element.setChecked(false, true);
}
if(typeof element.getValue !== "undefined" && element.getValue() !== "") {
element.setValue("");
}
});
}
When you use grid wiht gridfilters plugin
and inovoke
grid.filters.clearFilters();
it reset applyed filters, but it don't clean value in textfield inside menu.
For clean textfield text you can try this:
grid.filters.clearFilters();
const plugin = grid.getPlugin('gridfilters');
let activeFilter;
if('activeFilterMenuItem' in plugin) {
activeFilter = plugin.activeFilterMenuItem.activeFilter
}
if (activeFilter && activeFilter.type === "string") {
activeFilter.setValue("");
}
I'm trying to add some dynamic data into a "livesearch" combo box.
I've a set of 2 combos.
The first one allow you to select some data.
The second combo is a "livesearch" combo that should have a dynamic parameter from the first combo.
So the 2nd combo is linked to a model, which is linked to a datastore that queries the server and outputs the data. But that data has to be filtered according to the first combo parameter...
Anyone knows how to do that ?
I did that before. The key is to pass the value of the first combo with the request for the values of the second combo, and then filter the results on the server. Other approach would be to load both combos with all possible values and then set a filter on the second combo's store after a value is selected in the first combo.
EDIT: Here's the I used.
Ext.define('Ext.ux.FilteredCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.filteredcombo',
queryCaching: false,
getParams: function (queryString) {
var params = this.callParent(arguments);
if (Ext.isArray(this.formParams)) {
var form = this.up('form');
if (form) {
var bf = form.getForm();
for (var i = 0; i < this.formParams.length; i++) {
var field = bf.findField(this.formParams[i]);
if (field)
params[this.formParams[i]] = field.getValue();
}
}
}
return params;
}
});