Develop Reference

Angular-Slickgrid header menu is not visible even setting enableHeaderMenu option to true

I am using Angular-Slickgrid in my angular application.
Grid is working fine but I am facing issue with Headermenu.
When I run the application unable to see Headermenu icon on mousehover in any header.
I am using below gridoptions :
this.gridOptions = {
enableAutoResize: true,
enableCellNavigation: true,
autoEdit: false,
enableRowSelection: true,
rowHeight: 30,
editable: true,
enableGrouping: true,
forceFitColumns: true,
enableHeaderButton: true,
enableHeaderMenu: true,
gridMenu: {
hideExportCsvCommand: true,
hideExportTextDelimitedCommand: true,
hideExportExcelCommand: true,
hideClearAllSortingCommand: true,
hideForceFitButton: true,
onBeforeMenuShow: (a, b) => {
}
}
};
As you can see I have set enableHeaderMenu: true, even after this unable to see the header menu.
Below is the image my grid look like:
When I mousehover on any header unable to see header menu icon(on which I need to click to open the header menu)
I have added the reference of required css files also and I think css is working.
Below is code of angular.json file:
"styles": [
"src/styles.scss",
"./node_modules/font-awesome/css/font-awesome.css",
"./node_modules/bootstrap/dist/css/bootstrap.css",
"./node_modules/flatpickr/dist/flatpickr.css",
"./node_modules/#fortawesome/fontawesome-free-webfonts/css/fontawesome.css",
"./node_modules/#fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
"./node_modules/#fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
"./node_modules/#fortawesome/fontawesome-free-webfonts/css/fa-solid.css",
"src/slickgrid-styles.scss",
"./node_modules/angular-slickgrid/lib/multiple-select/multiple-select.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/jquery-ui-dist/jquery-ui.min.js",
"./node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js",
"./node_modules/bootstrap/dist/js/bootstrap.js",
"./node_modules/angular-slickgrid/lib/multiple-select/multiple-select.js"
]
code of slickgrid-styles.scss file :
#import './node_modules/angular-slickgrid/styles/sass/slickgrid-theme-bootstrap.scss';
After investigatng my code finally I found the route cause for the issue.
I am using 12 columns in my grid out of which I want to display only some columns on page load say 9 columns(user can the check the column from grid menu to make visible).For this purpose I am using below code:
setGridDefaultVisibleColumns() {
const visibleColumns = this.columnDefs.filter((c) => {
return c['visible'] !== false;
});
this.angularSilkGrid.slickGrid.setColumns(visibleColumns); }
I am calling this method in angularGridReady
angularGridReady(angularGrid: AngularGridInstance) {
this.dataGrid = angularGrid.slickGrid;
this.angularSilkGrid = angularGrid;
this.setGridDefaultVisibleColumns();
}
After commenting the setGridDefaultVisibleColumns function call my issue is resolved

Below is the workaround for the issue.setColumns method of slick gird is also affecting the headermenu.
I can hide the column like below without affecting the headermenu.See the below code
setGridDefaultVisibleColumns() {
this.columnDefs.forEach(c => {
if (c['visible'] === false) {
this.angularSilkGrid.extensionService.hideColumn(c);
}
}); this.angularSilkGrid.slickGrid.setColumns(visibleColumns);
}

Passing API Key via Confluence HTML for Standard Reports

I have been able to get the Java API code to work for Iteration TreeGrid and Iteration Burndown / Release Burnup charts. We have been trying to get this to work on Confluence and there are issues trying to pass just iframes and IT has issues with some of the bypass options. We have been able to get some semblance of this to work via the script below. In fact the Iteration TreeGrid works successfully everytime but most times the Standard Reports just present the Rally login screen. This is not consistent and sometimes this works for me in Chrome, but not in Firefox/IE etc. We have attache the API to the path of the confluence page if entered via link as well as what's in the script. Is there another method for key to passed for Standard Report to be able to generate?
Thanks!
Mark
enter code here {html}
<script type="text/javascript">
var field = 'apiKey';
var url = window.location.href;
if(
(url.indexOf('?' + field + '=') != -1) ||
(url.indexOf('&' + field + '=') != -1)
){
//alert("**** 001");
} else {
var myURL = document.location;
if(window.location.href.indexOf('?') > 0){
document.location = myURL + "&apiKey=_1OS4fhAQBi101VTZ4PytkQXb9jYEt0qYx79WXJacc";
} else {
document.location = myURL + "?apiKey=_1OS4fhAQBi101VTZ4PytkQXb9jYEt0qYx79WXJacc";
}
}
</script>
<div id="div-iterationburndown"></div>
<script type="text/javascript">
Rally.onReady(function() {
Ext.create("Ext.Container", {
context: {},
items: [{
xtype: "rallystandardreport",
width: 750,
height: 500,
reportConfig: {
report: "IterationBurndown",
iteration: "April",
subchart: "hide",
title: "Iteration Burndown"
},
project: "https://rally1.rallydev.com/slm/webservice/v2.0/project/51186094804",
projectScopeUp: !1,
projectScopeDown: !0
}],
renderTo: Ext.get("div-iterationburndown")
});
Rally.launchApp('CustomApp', {
name: "iterationburndown",
parentRepos: ""
});
});
</script>
<div id="div-releaseburnup"></div>
<script type="text/javascript">
Rally.onReady(function() {
Ext.create("Ext.Container", {
context: {},
items: [{
xtype: "rallystandardreport",
width: 750,
height: 500,
reportConfig: {
report: "ReleaseBurnup",
subchart: "hide",
title: "Release Burnup"
},
project: "https://rally1.rallydev.com/slm/webservice/v2.0/project/51186094804",
projectScopeUp: !1,
projectScopeDown: !0
}],
renderTo: Ext.get("div-releaseburnup")
});
Rally.launchApp('CustomApp', {
name: "releaseburnup",
parentRepos: ""
});
});
</script>
<div id="div-RallyGrid" style="border-width:5px 5px 5px 5px;width:300px;height:150px;"></div>
<script type="text/javascript">
Rally.onReady(function() {
Ext.create("Rally.data.wsapi.TreeStoreBuilder").build({
models: ["userstory"],
autoLoad: !0,
context: {
workspace: "https://rally1.rallydev.com/slm/webservice/v2.0/workspace/50876644101",
project: "https://rally1.rallydev.com/slm/webservice/v2.0/project/50891172431"
},
enableHierarchy: !0,
filters: [{
property: "Iteration.Name",
operator: "=",
value: "April"
}, {
property: "Project.Name",
operator: "=",
value: "Harrier"
}]
}).then({
success: function(store) {
Ext.create("Ext.Container", {
width: 1e3,
height: 1e3,
border: 5,
items: [{
xtype: "rallytreegrid",
columnCfgs: ["DisplayColor", "Name", "ScheduleState", "Blocked", "TaskEstimateTotal", "TaskRemainingTotal", "Owner", "Notes"],
store: store
}],
renderTo: Ext.get("div-RallyGrid")
})
}
});
Rally.launchApp('CustomApp', {
name: "RallyGrid",
parentRepos: ""
});
});
</script>
{html}

StandardReport component in AppSDK2 is a wrapper over the first generation analytics service that predates ApiKey. This is the same analytics service that brings you reports on Reports>Reports page. Those reports were also available via StandardReport component in AppSDK1.
ApiKey is not supported in the first generation charts.
AppSDK2 supports ApiKey as described in Embedding Apps guide. AppSDK2 apps can be authenticated with ApiKey. But if an AppSDK2 app is using a StandardReport component, the analytics service behind the report will prompt you to login - it does not work with ApiKey. In your scenario it unfortunately defeats the purpose of embedding the report within other web content to be viewed by stakeholders who may not necessarily have Rally credentials.
I suspect that if it seems that it works occasionally, it is probably because you are already logged in to Rally in another tab of the same browser window. If you open a new window in the incognito mode you will be prompted to login.

Good news! The StandardReport component in AppSDK 2.1 and the backing A1 Analytics service now fully support Api Keys so you should be able to do this fairly easily.
Some useful links:
StandardReport component: https://help.rallydev.com/apps/2.1/doc/#!/api/Rally.ui.report.StandardReport
Embedding Apps externally:
https://help.rallydev.com/apps/2.1/doc/#!/guide/embedding_apps

Kendo UI custom grid popup editor window only opens once

I would like to use a custom window as popup editor of a Kendo UI Grid. Its content will be complex with search fields and a grid to display search results. To do that, I don't want to use the Kendo template mechanism but a real popup window.
While doing tests with custom editor I faced an issue. Even with a very basic and simple scenario (just the create command), I'm only able to open the editor once. The second time I get an error, the editor doesn't show up anymore and the grid becomes empty.
Here is my HTML code :
<div id="main-content">
<div id="custom-window">
</div>
<table id="my-table-grid">
</table>
</div>
The JavaScript part :
function openCustomWindow(e) {
e.preventDefault();
myWindow.center().open();
}
function editorWindowClosed(e) {
myGrid.cancelRow();
}
var myWindow = $("#custom-window").kendoWindow({
modal: true,
resizable: false,
title: "Test",
visible: false,
close: editorWindowClosed
}).data("kendoWindow");
var dummyDataSource = new kendo.data.DataSource(
{
schema : {
model : {
id: "id",
fields: {
postion: { type: "number"},
name: { type: "string"},
}
}
}
});
dummyDataSource.add({postion: 1, name: "gswin"});
var myGrid = $("#my-table-grid").kendoGrid({
dataSource: dummyDataSource,
toolbar: [ {
name: "create",
text: "Create"
} ],
editable: {
mode: "popup",
window: {
animation: false,
open: openCustomWindow,
}
},
columns: [
{
field: "postion",
title: "Postion"
},
{
field: "name",
title: "Name"
}
]
}).data("kendoGrid");
The error message in the JavaScript console :
Uncaught TypeError: Cannot read property 'uid' of
undefinedut.ui.DataBoundWidget.extend.cancelRow #
kendo.all.min.js:29ut.ui.DataBoundWidget.extend.addRow #
kendo.all.min.js:29(anonymous function) #
kendo.all.min.js:29jQuery.event.dispatch #
jquery-2.1.3.js:4430jQuery.event.add.elemData.handle #
jquery-2.1.3.js:4116
And finally a jsfiddle link to show what I'm doing. (The popup is empty because I just want to fix the open / close mechanism before going any further)
I don't understand why I get this error, I expected to be able to open / close the popup as many time as I wanted. The default editor popup is working fine.

One of my colleague found the solution (thanks to him).
Actually this piece of code
editable: {
mode: "popup",
window: {
animation: false,
open: openCustomWindow,
}
}
is designed to configure the default popup...
The right way to use a custom popup is the following :
editable :true,
edit: openCustomWindow,
With this approach it's also better to use
function editorWindowClosed(e) {
myGrid.cancelChanges();
}
Instead of
function editorWindowClosed(e) {
myGrid.cancelRow();
}
Working jsfiddle link

Actually the approach in my previous answer solved my issue but is causing another issue. The grid becomes editable but in the default mode (which is "inline").
Doing this
editable: "popup",
edit: openCustomWindow
has fixed this other issue but is now displaying 2 popups.
I finally succeeded to hide the default popup and only show my custom popup but it ended with the orginal issue described in initial question...
Considering all those informations I arrived to the conclusion that working with a custom popup window is definitely not an option. I'll start working with teamplates instead.
Another solution would have been to use a template to override the toolbar with a custom "Add" button and use a custom command for edition. But at this point I consider that too "tricky".

To prevent Kendo UI custom grid popup editor window, define the editable property:
editable:
{
mode: "popup",
window: {
animation: false,
open: updateRowEventHandler
}
} // skip edit property
Then paste preventDefault() at the beginning of the handler:
function updateRowEventHandler(e) {
e.preventDefault(); //

Smart file component(html5smartfile) not working

I have been working on developing a custom extjs console to enable author drop an asset using html5smartfile component. But somehow, the html5smartfile component is not working the way it should. The Area where an author can drop an asset is not displaying. The same is working fine if I am creating a CQ5 dialog. But in my case where i have created a window it's not working.
I have declared my smartfile component like this:
var assetLinkDropField = {
xtype: 'html5smartfile',
fieldLabel: 'Asset Link',
ddAccept: 'video/.*',
ddGroups: 'media',
fileReferenceParameter: './linkUrl',
name: './linkUrl',
allowUpload: false,
allowFileNameEditing: false,
allowFileReference: true,
transferFileName: false
};
But this is rendering like this:
After a lot of work, I found out that the CQ5 dialog updates the view for the component but in case of my window, I have to update it myself. Thus, with a slight manipulation, i just succeeded in displaying the drag area by tweaking the declaration like this:
var assetLinkDropField = {
xtype: 'html5smartfile',
fieldLabel: 'Asset Link',
ddAccept: 'video/.*',
ddGroups: 'media',
fileReferenceParameter: './linkUrl',
name: './linkUrl',
allowUpload: false,
allowFileNameEditing: false,
allowFileReference: true,
transferFileName: false,
listeners: {
afterlayout: function () {
this.updateView();
}
}
}
So now the panel looks like:
But still the Drag and Drop is not working. My Window declaration is like this:
win = new CQ.Ext.Window({
height : 750,
width : 700,
layout : 'anchor',
// animateTarget : btn.el,
closeAction : 'close', // Prevent destruction on Close
id : 'manageLinkWindow',
title : '<b>Multi Link Widget Dialog</b>',
frame : true,
draggable : false,
modal : false, //Mask entire page
constrain : true,
buttonAlign : 'center',
items : [assetLinkDropField]
});
}

I think you should not use
ddAccept: 'video/.*',
This allows only videos from the content finder to be dragged and dropped. It should be "image/".
Verify your other extjs properties / configs for html5smartfile if the above doesn't resolves your problem.

Ext.MessageBox under TabPanel

I got problem like this:
There is TabPanel with two tab. First is FormPanel, second is GridPanel.
And I've added listener to beforetabchange. When values in FormPanel are changed there should appear Ext.MessageBox.cofirm with question: 'Do you want save your changes?'.
And it's appear but under TabPanel.
It doesn't work with any type of message box.
This is little bit weird because, when I click on submit button in this form, there is wait message box and after changes are saved there is information box.
Any ideas?
edited
I've removed all config sets from tabPanel and formPanel which is first tab, so everything is default. Message box looks like that (right now):
Ext.MessageBox.confirm('Title','message',Ext.emptyFn);
I think the problem is that the message box is binded somehow to gridPanel which is under the tabPanel.
I've added plugin to tabPanel and on beforetabchange event I show this confirm message.
Funny thing is that I do exactly the same code in plugin which is added to submit button in formPanel and there everything works perfect.
edited
new Ext.TabPanel({
activeTab: 0,
id: 'tabPanel_id',
items: [
new Ext.form.FormPanel({
cls: 'xf-windowForm',
bodyCssClass: '',
autoHeight: false,
autoScroll: true,
border: false,
layout: 'form',
buttonAlign: 'center',
monitorValid: true,
labelAlign: 'right',
labelPad: 10,
defaults: {
msgTarget: 'under',
anchor: '100%'
},
id: 'formPanel_id',
title: translate('tab_title-general'),
items: [
new Ext.form.TextField({
fieldLabel: 'label',
name: 'name',
id: 'id'
})
],
buttons: [
new Ext.Button({
text: 'save',
type: 'submit',
formBind: true,
plugins: {
init: function (component) {
component.on({
click: function() {
Ext.MessageBox.confirm('title', 'messsage', Ext.emptyFn);
}
});
}
}
})
]
}),
new Ext.Panel()
],
plugins: {
init: function(component) {
component.on({
beforetabchange: function() {
Ext.MessageBox.confirm('title', 'messsage', Ext.emptyFn);
}
});
}
}
});
There is also gridPanel under this tabPanel.
And this message box in buttons plugin works fine (tab panel becomes grey and message box appears on top), but the second one, in tabpanels plugin, add another mask on grid and shows under the panel and above the grid.
edited
Ext.onReady(function(){
new Ext.Window({
initHidden: false,
width: 700,
title: 'WindowTitle',
items: [
new Ext.TabPanel({
items: [
new Ext.Panel({title: 'Title1'}),
new Ext.Panel({title: 'Title2'})
],
plugins: {
init: function(component) {
component.on({
beforetabchange: function(t,c,n) {
Ext.MessageBox.confirm('MessageBoxTitle', 'Confirm message.', Ext.emptyFn, component);
}
});
}
}
})
]
});
});
That's complete code where problem occurs.
Message box in window show event is displayed ok, but in tabPanel it's under the window.
I'm working on FF 4.0.1, but problem occurs also in IE 8 and Chrome 12.
I'm using Ext JS 3.3.1.
solution
z-index of windows must be decreased (ie. to 7000, default is 9000).
To do that I'm using Ext.WindowGroup.
windows = new Ext.WindowGroup();
windows.zseed = 7000;
//and in config properties in window:
manager:windows
Thank's everyone for help.

"I think the problem is that the message box is binded somehow to gridPanel which is under the tabPanel."
MessageBox isn't bound to an existing panel, its a singleton and is basically a shortcut to creating a window rendered to the body, as per source code:
http://dev.sencha.com/deploy/ext-3.3.1/docs/source/MessageBox.html#cls-Ext.MessageBox
Kevin is on to something with the z-index being a likely culprit, as I've fixed issues in the past with the Ext.Notifications ux having a lower z-index than the main content.
Try running your messagebox call from the console and see if it appears. That will help determine if your wait messagebox is closing out the confirm messagebox (note the mention of it being a singleton above) or something odd where you're not seeing some other javascript error thats causing your code to not be run. Then, if you don't see the messagebox when run from the console, try the isVisible() api call to see if it thinks its being displayed (which will likely narrow it down to a css issue).

Ext MessageBox doesn't block your code until the user does something the way an alert() does. As a result, it's going to pop up the message box, and then proceed to render the new tab that the user just clicked on. Perhaps when the new tab renders, the Ext window manager is putting that window on top, since it rendered most recently?
You could try using setTimeout to display the message box after a short delay. That will give the new tab a chance to be on top, and then the message box renders, hopefully on top of everything, since it was the most recent.

setTimeout will work, there was same issue like
page- button -
on click - window with grid -
click on grid item->there should be a message box on top,
but it was under the window,
then i tried
click on grid item-
setTimeOut(function(){ Ext.MessageBox.alert('MessageBoxTitle', 'Confirm message.')}, 200);

I have used following method. It is working for me.
beforetabchange: function(tabpanel, newTab, oldTab){
if (!tabpanel.allowAction){
Ext.Msg.confirm('Confirm', 'Your Message',function(btn) {
if (btn == 'yes') {
/* logic*/
tabpanel.allowAction = true;
this.setActiveTab(newTab.id);
}else{ /* logic */}
});
return false;
}
delete tabpanel.allowAction;
}

Ext.create('Ext.window.MessageBox', {
alwaysOnTop: true,
closeAction: 'destroy'
}).show({
title: 'Title',
buttons: Ext.Msg.OK,
message: 'Message'
});
This should make the MessageBox appear on top.
Look at the fourth example in this page.
http://docs.sencha.com/extjs/5.1.0/api/Ext.window.MessageBox.html