We Keep Coding

Hiding An Img in AngularJS Based on Model

First, I've looked through other questions and not found an answer.
I have a custom directive with a two attributes: multiValue and ngModel. Both of these values are represented in the controller as $scope.multiValue and $scope.ngModel.
The behavior of the directive changes based on the value of $scope.ngModel. In both cases, the directive creates an input and an image:
<input id="{{controlId}}" name="{{controlId}}" placeholder="Select Value(s)"
class="k-textbox" type="text" ng-model="ngModel" />
<img ng-src="/img/X.png" ng-click="clear()"
ng-show="multiValue == false && ngModel === ''" />
The purpose of the image is to show an "X" icon to clear the value represented by $scope.ngModel. However, when $scope.multiValue is true, the X icon does not need to display. When $scope.multiValue is false and a value has been selected, the X icon needs to display.
I have tried multiple means to get the X to disappear when multiValue is false or a value has not yet been selected:
Tried both "src" and "ng-src"
Tried combinations of ng-if and ng-show (including the ones above)
Tried using the condition ability of ng-src to define the image to show based on the same condition shown in the prior example.
Help would be greatly appreciated.

Could you please use <ng-if=""> Instead of <ng-show="">.
I am not sure of is this helpful. But I have faced similar issues that time I used <ng-if="">

You have not mentioned about which version of Angular you are using.
However, in Angular 6 or 7 you can use
*ngIf="multiValue == false && ngModel === ''"
Hope this will help you

Kendo Grid filter menu to check filtered values when applying filter with code

I have a Kendo UI Grid and I'm applying a custom filter on 'adUser' column in certain condition
like this
var filterKeyWord = "m.owen"
grid.dataSource.filter({ field: "adUser", operator: "eq", value: filterKeyWord});
the filter gets applied as expected, but on UI side filter is empty and user can't tell what condition was applied to grid filter. Am I doing something wrong? Is this the way it should work or should I add something to see filter keyword("m.owen") displayed in filter search box and dropdown(as checked)?

ExtJS setting menuDisabled dynamically in grid

Trying to remove column header menu containing sort dynamically.
Set menuDisabled = false on afterrender event in every column.
Ext.each(view.getColumns(), function (item) {
item.menuDisabled = true;
// item.sortable = false; //this works perfectly
});
If instead of menuDisabled I try to put sortable as false, that works perfectly.

That's because on afterrender the menu is already created, and setting the property will not disable it to appear, you should try it on init, or instead like you already did disable the sorting of the column.

Yes, menuDisabled is a config taken into account at column rendering, and changing it after that worthless. But there is a tricky way for toggling the column menu that will only work if the column was rendered with menuDisabled set to false.
So if dive into the column class source code, we will see that in the renderTpl config there is the following piece of code:
'<tpl if="!menuDisabled">',
'<div id="{id}-triggerEl" data-ref="triggerEl" role="presentation" unselectable="on" class="',
Ext.baseCSSPrefix, 'column-header-trigger', '{childElCls}" style="{triggerStyle}"></div>',
'</tpl>',
It will render a div el that will toggle the menu. So by toggling the visibility of this div, you will toggle the menuDisabled "state".
column.triggerEl.show();
column.triggerEl.hide();
In your case, you can disable the menu showing for all columns like so:
Ext.each(view.getColumns(), function(item) {
item.triggerEl.hide();
});
Here is a working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1r2h.

How to hide the DOM element with ngShow/ngHide when condition is not met?

I have a DOM element that looks like
<div data-ng-if="allControllerFieldsAreProvided($index)" class="test-controller-connection">
Test Connection
</div>
the function looks like
$scope.allControllerFieldsAreProvided = function (adSetupIndex) {
return $scope.activeDirectoryConfiguration.activeDirectorySetups[adSetupIndex].name.length > 0 &&
$scope.activeDirectoryConfiguration.activeDirectorySetups[adSetupIndex].activeDirectoryDataSource.host.length > 0 &&
$scope.activeDirectoryConfiguration.activeDirectorySetups[adSetupIndex].activeDirectoryDataSource.port.length > 0 &&
$scope.activeDirectoryConfiguration.activeDirectorySetups[adSetupIndex].activeDirectoryDataSource.userName.length > 0 &&
$scope.activeDirectoryConfiguration.activeDirectorySetups[adSetupIndex].activeDirectoryDataSource.password.length > 0;
};
Initially, when no input is provided, the DOM element is hidden, then when all the inputs are provided, the DOM element appears.
Problem
The issue start when any of the input is deleted again (example, text deleted from input box). In such scenarios, the DOM element should disappear, but it is not
How do I fix this?

You should not be using a function to evaluate in an ng-if. The reason being the ng-if statement is evaluated every time the digest cycle is run. (which is quite often) Try adding a console.log('hello') inside allControllerFieldsAreProvided function and you will see what i mean.
If you are using ng-repeat just check the iterated object for the properties you need.
Its also possible to use form validator that will set the form object to $invalid if all the required inputs are not met. then you could use ng-if="!formName.$invalid"
Personally from a ux perspective showing and hiding buttons is bad. i would use ng-disabled="formName.$invalid" on a button.
From the sounds of it youre model is not bound properly and you are updating the wrong object when data is changed. Starting by dropping a <pre>{{activeDirectoryConfiguration | json }}</pre> on the page and determine if your model is actually being updated properly.

How to create initially hidden field in the form layout?

Is it possible to create field in form layout that's initially hidden (completely, including field label)?
I don't want to call cmp.getEl().up('.x-form-item').setDisplayed[1] for these fields after rendering because it causes flicker and other “effects”.
[1] as I know that's the only way to hide form field including label.

You can setup the form field's xtype to hidden. So, you'll have something like this:
{
id:'my_field_id',
name: 'my_field_name',
xtype: 'hidden'
}
You can add the field like this:
Ext.getCmp("myFormPanel").add({
id:'my_field_id',
name: 'my_field_name',
xtype: 'textfield'
});
Ext.getCmp("myFormPanel").doLayout();
And remove it like this:
Ext.getCmp("myFormPanel").remove(Ext.getCmp("my_field_id"));
Ext.getCmp("myFormPanel").doLayout();
I hope this is what you want.

Sure, create a CSS class in your document with either (depending on your needs) 'display:none' OR 'visibility:hidden'. Call this class, say, 'invisible-class'.
Create another class with either 'display:block', 'display:inline' OR 'visibility:visible' and call this class say, 'visible-class'.
For the form field you wish to be invisible when its rendered you would set its 'cls' property to 'invisible-class', i.e.:
cls:'invisible-class'
And when you want the field to be visible, use the method:
addCls('visible-class')
ALTERNATIVELY- when you want to make the item visible use the method:
removeCls('invisible-class')
i.e. mycomponent.removeClass('invisible-class')
Hope this helps!

A simpler method if you just need to hide this single field and its field label would be to create a separate label object for it. It might be easier to just hide the label instead of deal with the CSS to hide the fieldLabel.
You might be able to add a listener to the render event of the layout managing panel to do something like this...
var cmp = Ext.getCmp(fieldID);
if((cmp.hidden) && cmp.previousSibling() != null)
&& (cmp.previousSibling().xtype =='label'){
cmp.previousSibling().hide();
}