SignPost Content Popup Cross Button Issue - vmware-clarity

I am using signpost logic in my code. on cross button of this signpost popup(given on top-right corner). i need to set a variable value to false. but this cross button is provided by clarity. so it is not in my control.
So how can i set a variable value to false on click of cross button?

By using the de-sugarized syntax for the *clrIfOpen directive (see the angular documentation on two-way binding), you can use our (clrIfOpenChange) output to react to the signpost closing.
Here is an example of it in action: https://stackblitz.com/edit/if-open-change?file=src/app/app.component.html
Also, as a general rule, please post a direct link to your StackBlitz reproductions when asking a question. Posting a screenshot makes no sense when you went through the trouble of writing a minimal reproduction, it just prevents us from trying it out ourselves.

Related

Hover popup display for angularJS multiselect options

I've got a UI page in HTML5/AngularJS/Bootstrap. The page has a handful of dropdowns that are populated by the controller.js from a service call. I've got no problems parsing that information and getting it into the multiselect dropdowns. However, the brain trust that is our management and end-users have decided that in addition to the dropdowns displaying an abreviation for each selectable option, they want a popup description to appear next to each option when the user hovers over it. My personal opinions aside, I can't tell them no until i can at least show them what it would look like.
If this was just pure css, with panels dropping down, I could see how this would be easy that add some mouseover-style panel/popouts. But I'm using this angularjs-dropdown-multiselect.js plugin... which works great so far, but I'm not sure how to add to it. There's some code in that js that causes the option to slide slightly right, and change color when the user hovers over it, but not knowing enough about how that event would work, I'm not sure where even in the code to look for what changes on the mouseover.
For reference, the plugin came from here:
http://dotansimha.github.io/angularjs-dropdown-multiselect/#/
I can post the js code if anyone wants to take a look at that, but I'm not sure if that's even a necessary part of this question... My first thought is just to try and capture that event and maybe change the text of the display?
I've been researching this one for a good day now, and I can't find answers that apply to all parts of this puzzle... Has anyone got any experience or ideas on how to add that kind of functionality to a dropdown? or is this bordering on territory where I'm better off rigging a situation where I've got a textbox which, onFocus might display a dropdown - imitating panel, which could then have sub panels displayed on items?
Since I couldn't find a way to programmatically add tooltips on the angularjs-dropdown-multiselect directive, I assumed that you are willing to extend it and then I created a quick fiddle (based on examples available) to add the angular-ui tooltip on the creation of the items.
This is the link to the tooltip that will explain how to position it
https://angular-ui.github.io/bootstrap/#/tooltip
This fiddle will give you an idea of where to start: https://jsfiddle.net/silvioamaral/ghcma6z3/1/
on ln 232 that creates the <a> in the <li>:
template += '<a role="menuitem" tabindex="-1" ng-click="setSelectedItem(getPropertyForObject(option,settings.idProp))" >';
Just add the angular-ui directive :
uib-tooltip="{{option}}"
like
template += '<a role="menuitem" tabindex="-1" ng-click="setSelectedItem(getPropertyForObject(option,settings.idProp))" uib-tooltip="{{option}}">';
I added to the anchor since the other elements (<li> <div>) seem to be bound to options such as existence of groups / checkboxes, etc.
Hope it helps
Edit: grammar and jsfiddle link

Link jQuery-UI/Kendo-UI to make live changes to elements in page designer

I apologize if the title was not clear enough. I am working on a project where a user can design a page (something like Wix). I am continuing on a project left in-complete by some developer. The sequence of action is.
The user clicks on a link which adds an element on the page (e.g. textElement, picture, slider...)
There is an edit button for each element. Clicking which opens a dialog box.
On the dialog box there are sliders and color picker drawn using Kendo-UI. Using them the user can change the style settings for the element (e.g Font-Color, BG-Color, Font Size...)
What I want now is to apply/show the changes live on that element. I have the id available for each element. I can bind each of the style selectors and apply the changes live to the text element. But that does not seem the right choice as in future we might add another style selector in the dialog box, and that would mean adding the code for binding this new selector.
What I wanted to know was that is there an alternate or preferably easy way to do this?
Regards
Share some code with the basic idea that you follow, cause it's not getting clear what you did. It sounds like you can use the MVVM framework feature to help you for that.

How to put cross check image instead of right check in CheckBox Selection in ASP.Net

I am using ASP:Checkbox. When I check the checkbox I want a cross sign instead of the usual right check sign in the checkbox.
Does anyone have any ideas about how I can do this?
Thanks,
Vaibhav.
You can't do this natively in ASP.net as ultimately the check boxes are handled by the browser. You can use css and javascript to achieve this. The following 2 article should get you down the right path:
http://webhole.net/2010/02/06/how-to-style-checkboxes/
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
Basically you are hiding the "normal" check boxes and replacing them with images.

How to make an entire jqGrid disabled/readonly

How can I make an entire jqGrid disabled/readonly?
I have a page with a logical "edit section" which I show when the user selects something to edit, and hide when the user is done editing (save or cancel). While the edit section is shown, I disable several other elements on the page. I would like to disable their ability to click in the jqGrid, so they can't change selected rows, re-sort, etc. But I cannot find a way to disable/enable the grid as a whole.
Apologies if this has been answered already - other questions seemed to focus on disabling only certain behaviors within the jqGrid.
Edit: Preferably, I'd like an approach that isn't dependent on yet another 3rd-party addon. Nothing wrong with them, of course! But my client has a degree of reluctance with them, so my life would be a little easier with a purely jQuery/jQueryUI/jqGrid solution. :)
You could use blockUI to block the grid.
Try using $("#lui_" + myGridId).show().
The grid has created this overlay internally an uses it as one part of the loader message.
You can just show it or hide it and it will disable/enable the grid for you.

Disable Ribbon Button

I want to disable and NOT hide a ribbon button (specifically Ribbon.ListItem.New.NewListItem) on a particular List type. On web I could find a lot many posts showing me ways to remove/hide buttons but none really worthwhile which could tell me how can I just disable an alrteady existing sharepoint button in my custom List type.
e.g. Following code does remove the button instead of hiding.
Id="RemoveRibbonButton"
RegistrationType="List"
RegistrationId="213908"
Location="CommandUI.Ribbon">
This can be done through Javascript on the client side. Check out this article for an example.
http://makarandrkulkarni.blogspot.com/2010/01/sharepoint-2010-ribbon-customization_23.html

Resources