how to disable canvas xpress menu - javascript

i use canvaXpress on my webpage, it's a very good graph control, but i don't want to show customer the menu of canvas xpress, like help, show code, filter data on top right corner, how to disable it?

Please RTFM. It is called Toolbar and you can disable it by:
#canvas1-cX-Toolbar {display: none !important;}
Or use the API to disable it:
disableMenu type: boolean
Flag to disable showing the menu on right clicks
Default: false
Used in: all visualizations
disableToolbar type: boolean
Flag to disable showing the toolbar
Default: false
Used in: all visualizations

Related

How to collapse the sidebar by default in ag grid

I try to collapse the sidebar by default in ag grid. i don't want extend it until i click on the columns tap on the right side.
I tryed to do [showToolPanel]="false" but it will hide all the sidebar.
is there easy way to do that ?
https://next.plnkr.co/edit/UJRD2lrOQe6C7Lfs
To do that you have to use the SideBarDef configuration:
<ag-grid-angular
[sideBar]="{ toolPanels: ['columns', 'filters'] }">
</ag-grid-angular>
In that configuration you can set the defaultToolPanel, but if you do not specify this, it will be closed by default:
The panel (identified by id) to open by default. If none specified, the side bar is initially displayed closed.
plnkr

How to make the search icon permanently visible in the column in ag-grid?

I want to make the filter icon visible permanently in the Ag-grid. The current behaviour is such that the filter icons in the columns only become visible when I hover across the column headings .
This is an example of the column definition that I am using.
this.ColumnDefs=[{"headerName":"Interface","field":"interfaceName",sortingOrder: ['asc','desc', 'null'],width:120,cellStyle:{'text-align': "left"},unSortIcon: true},
{"headerName":"Status","field":"status",sortingOrder: ['asc','desc', 'null'],width:120,cellStyle:{'text-align': "left"},unSortIcon: true},
{"headerName":"Runtime","field":"lastDate",sortingOrder: ['asc','desc', 'null'],width:150,cellStyle:{'text-align': "left"},unSortIcon: true}]
How can I achieve this result?
The correct answer is here to set suppressMenuHide in gridOptions or directly on HTML [suppressMenuHide]="true"
suppressMenuHide Set to true to always show the column menu button, rather than only showing when the mouse is over the column header.
You can achieve it with just a small CSS. No need to consider ColDef.
Have a look at the plunk I've created: Built-In Filters Icon - show by default
.ag-header-icon.ag-header-cell-menu-button {
opacity: 1 !important;
}

Bootstrap Tour targets and modals not displaying (Leaflet maps)

Demo
Codepen
PRESS FULL SCREEN ICON ON MAP IN CODEPEN TO START TOUR
Desired Outcome
The bootstrap tour element should appear over the top of everything, along with highlighting the element its targeting.
What I'm getting
Ignore the difference in red button compared to image above, content doesn't matter
Problem
When the user toggles the fullscreen button (using leaflet fullscreen plugin), it starts the tour.
The tour is activating fine, but the elements of the tour are not responding properly, my hunch is that it is struggling to compete against the fullscreen map for attention at the front as it were.
Currently, the popover isn't displaying, even when in the dev tools I put its z-index as high as it will go. The dark overlay also isn't displaying over the top of the fullscreen map.
Lastly the target is not being highlighted properly. When inspecting the target on other pages with the tour working, it is still the original element, but when inspecting element on this page, it's not the element, but a new bootstrap div placed over the top. No idea why it's not working in the same way.
What I've tried
Tour code
//Bootstrap tour
function takeTour() {
console.log("Taking tour");
("use strict");
// Instance the tour
var tour = new Tour({
name: "leafletTour",
storage: false,
steps: [
{
element: "#custom-control",
title: "One Stop Tour",
content: "There is only one stop in this tour",
placement: "right"
}
],
backdrop: true
});
tour.init();
tour.start(true);
}
My understanding is that bootstrap tour assigns the target elements new classes as they are selected, which are then set to z-index: 1101
I have been trying to brute force higher z-index's onto the bootstrap tour elements, but with no luck - no matter how high I set them, they aren't fighting to the top level.
I've also forced the map to be z-index: 100 !important, and still overrides to the top - despite in the dev tools still showing as z-index: 100 !important
Any ideas/advice would be great.
I have reviewed your code, its really strange but i have found one solution :
Just add class
.fade{
opacity:1 !important;
}
Here you can find working example.
https://codepen.io/anon/pen/MveMrL

Overlapping tooltip in Extjs Grid

I have an issue that I’ve been trying to resolve. I’m very new to Sencha ExtJS. I’ve included image links to assist my explanation.
I have a Tooltip that displays “Double-click to Configure” when you move your MouseOver the header of a table which works fine.
Shown here: http://img227.imagevenue.com/img.php?image=952843717_Header_122_41lo.jpg
Also
I have a Tooltip that displays “Show Available Options” when you move your MouseOver the gear icon.
The problem is that the gear icon is within the header so when you mouseover the gear icon, the header tooltip also displays displays. Shown here
http://img157.imagevenue.com/img.php?image=952937141_Config_122_421lo.jpg
I really don’t know how EXTJS renders it’s grid but is there a way for me to place the gear icon outside of the header or not display the “Double-click to Configure” Tooltip when a user mouseovers the gear icon?
I’m Not sure where to look in the code I have a file uiconstant.js that creates all the UI constants in a Static class
UIElements:
{
SIMULATION_GRID: 'simulationgrid',
REPORT_SCHEDULER: 'reportscheduler',
BLENDED_BENCHMARK: 'blendedBenchmark',
BLENDED_BENCHMARK_GROUPINGS: 'blendedBenchmark_groupings',
DEFAULT_CONTAINER_LABEL: 'Click to configure container',
EDIT_CONFIGURE_CONTAINER_LABEL: 'Click to edit configuration',
DO_NOT_REQUEST_CONTENT_LABEL: 'Automatic calculation off for this dashboard.',
NO_RECORDS_FOUND: '<div class="no-records-found">No records found</div>',
CONTAINER_PANEL: 'containerPanel',
DoubleClickToConfigure: 'Double-click to Configure'
}
I also have a ContainerPanel.js File that Represents the custom panel for the container.
Not sure if I am looking in the correct files to make this change or update the grid
Ext.create('Ext.tip.ToolTip', {
target: header,
html: UiConstant.UIElements.DoubleClickToConfigure
});
Tooltip is supported for tools so you can configure the gear with a tooltip text. Now, header does not directly support tooltips - you handle it above by creating one and setting its header.
Let's try a bit different approach: tooltip on gear tool is de facto quicktip - only one instance of quicktip exists at a time.
To create quicktip for the header do this:
panel.getHeader().getEl().set({'data-qtip':'Your text here'});
Note: There shall always be an area around the gear tool where the tooltip changes - not sure if it is acceptable for your use case. Nevertheless, two tips shall not appear.

positioning of date picker in extjs

I'm using the date picker but I am a little confused about where it decides to place the date picker on the screen. On one screen it's fine but on another it gets stuck hiding behind a flash object. Can I force it to attach to the bottom right corner of the place where the datebutton is clicked? I was looking in firebug and it seems to just have random left and bottom variables in CSS which I'm not sure where they're pulled from. Thanks
Before attempting to reposition the date field's menu try setting the Flash object's 'wmode' property to 'opaque'. Depending on how the Flash object is embedded this should allow the menu to appear above it.
If you are still wanting to force a new alignment position of the menu then try overriding the DateField instance's onTriggerClick method:
new Ext.form.DateField({
fieldLabel: 'Choose a date',
onTriggerClick: function() {
Ext.form.DateField.prototype.onTriggerClick.call(this);
this.menu.show(this.el, 'tl-br?');
}
});
This align's the top-left corner of the menu with the bottom-right corner of the field. See the documentation of Ext.Element.alignTo for other possible values to pass to the second parameter of the show method.
This is a bit of a hack as it results in the menu's show method being called twice, but the alternative is rewriting onTriggerClick to pass your chosen position on the first call.
In version >= 4.0.0 use the pickerAlign property.
Ex:
{
xtype: 'datefield',
fieldLabel: 'Date',
pickerAlign: 't-br?'
}
Advice from owlness about seeing the docs on Ext.Element.alignTo for an explanation of how pickerAlign works is still valid.

Categories