How to change combobox selected values display order - extjs

I would like to change selected records display order in a combobox. The reason is that, as you can see from the screen shot, the combobox list so long therefore employee can't see selected values easily. Are there any method/function to change displayed value sort order based on the selected record index?

You can sort the store with a custom function. That will be reflected in the combo box.
That would be something like:
combo.getStore().sort([{
sorterFn: function(a, b) {
if (a.get('selected')) {
if (b.get('selected')) {
return a.get('name').localeCompare(b.get('name'));
} else {
return -1;
}
} else if (b.get('selected')) {
return 1;
} else {
return a.get('name').localeCompare(b.get('name'));
}
}
}]);

Related

SwiftUI, IF inside ForEach loop to display different text

I am having a hard time displaying certain text in a ForEach loop in SwiftUI.
I have an array that I iterate over with ForEach. The problem is, I need to have certain text displayed for whether or not a specific date is selected in a calendar.
For example:
ForEach(reminders) { reminder in
if(Calendar.current.isDate(reminder.beginDate, equalTo: selectedPassedDate) {
HStack {
Text("The Text for the specific day")
} else {
Text("The text for the unspecific day")
}
}
}
When the array has more than 2 elements, the text for the non-matching day is being displayed multiple times (since it is inside the foreach). This makes sense, but I am trying to figure out a way to only display ONE of the "unspecified day" text instead of many.
I have tried adding a simple bool to display the other text, but I cannot change the state of it without a button or something.. I need to do this totally programmatically. I've also moved the else statement outside of the loop but again the secondary text is being displayed in the current day selection.
What can I do to solve this issue? If I can programmatically set the bool while conforming to SwiftUIs view then I can solve this, but I'm not sure how.
you could try something like this:
class FirstTime: ObservableObject {
var value = true
}
struct MyView: View {
...
#State var firstTime = FirstTime()
var body: some View {
VStack {
ForEach(reminders) { reminder in
HStack {
if (Calendar.current.isDate(reminder.beginDate, equalTo: selectedPassedDate) {
Text("The Text for the specific day")
} else {
if firstTime.value {
showTextOnce()
}
}
}
}
}
}
func showTextOnce() -> some View {
firstTime.value = false
return Text("The text for the unspecific day")
}
}

filtering in angular by select and checkbox

want to filter out values both the select box and in checkbox i achieved in select box but can't able to get from checkbox
MY PLUNKER DEMO
Example Here. Use a single object for the checkboxes, and then you can use a comparator function in the filter, like this:
$scope.checkMake = function(value) {
//Assume no filter is applied so the value will be shown.
var result = true;
for (var i in $scope.selected) {
if ($scope.selected[i] === true) {
//if we get here, we know a filter is applied, so
//check to see if the passed value is one of the selected
//checkboxes
result = $scope.selected[value];
break;
}
}
return result;
}

Excel-like behaviour of Grids in Ext JS

I'm trying to figure out a way to have an Excel-like behavior with the Grids on Ext JS.
Here is the sample grid I am working with. So far we can already naviguate through the cells with the arrows but only in edit mode.
However what I am trying to reach is the naviguation with the arrows, TAB and Enter keys outside of the edit mode, just like excel.
I tried to integrate this piece of code which overrides the Editor class, hoping that it would change the behavior of the cells but it doesn't change a thing.
I believe this is the most important part that overrides the Editor class and tries to include the keys input :
Ext.override(Ext.Editor, {
startEdit: function (el, value) {
var me = this,
field = me.field;
me.completeEdit();
me.boundEl = Ext.get(el);
value = Ext.isDefined(value) ? value : me.boundEl.dom.innerHTML;
if (!me.rendered) {
me.render(me.parentEl || document.body);
}
if (me.fireEvent('beforestartedit', me, me.boundEl, value) !== false) {
me.startValue = value;
me.show();
field.reset();
if (deleteGridCellValue) {
field.setValue('');
me.editing = true;
me.completeEdit();
deleteGridCellValue = false; // reset global variable
}
else {
if (newGridCellValue == '') {
// default behaviour of Ext.Editor (see source if needed)
field.setValue(value);
}
else {
// custom behaviour to handle an alphanumeric key press from non-edit mode
field.setRawValue(newGridCellValue);
newGridCellValue = ''; // reset global variable
if (field instanceof Ext.form.field.ComboBox) {
// force the combo box's filtered dropdown list to be displayed (some browsers need this)
field.doQueryTask.delay(field.queryDelay);
}
}
me.realign(true);
field.focus(false, 10);
if (field.autoSize) {
field.autoSize();
}
me.editing = true;
}
}
}
});
This is the first time that I am working on a project that is outside of Comp-Sci classes so any help would be very much appreciated. Thanks !

AngularJS: searching data client side by custom filter

i am learning angular. so i am not good in angular. i am showing data in tabular format with the help of ng-repeat. i have one dropdown and textbox for filter data showing by ng-repeat. fields name are populated in dropdown. so user will select field name and put corresponding value in textbox and search will perform accordingly and data will be shown.
my code is working partially. basically some kind of problem is there in SearchList function. the problem is when trying to search by id then SearchList is not working properly. so looking for help. what to fix in the code. my js fiddle https://jsfiddle.net/tridip/rnoo3bqc/6/
$scope.SearchList = function(row) {
if ($scope.selectedFieldName && $scope.searchText) {
var propVal = row[$scope.selectedFieldName.toLowerCase()];
if (propVal) {
return propVal.toUpperCase().indexOf($scope.searchText.toUpperCase()) > -1;
} else {
return false;
}
}
return true;
};
working version url
https://jsfiddle.net/tridip/rnoo3bqc/8/
You need to convert the id's from number to string, e.g. by concatenating an empty string:
var propVal = row[$scope.selectedFieldName.toLowerCase()] + '';
the problem was with id that's a numeric field and hence toUpperCase() was failing for it.
if (propVal) {
propVal.toString().toUpperCase().indexOf($scope.searchText.toUpperCase()) > -1;
} else {
return false;
}

How to update sort-indicators in ui-grid programmatically?

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);
});
}
}
});

Resources