SDK2 Rally grids are seriously great and flexible, but there are a few significant issues I have run into:
% done columns like LeafStoryPlanEstimateTotal for Portfolio Items show orange arrows when there is an issue (like not all stories have plan estimate), but there in no popup (which you get when viewing them in Plan -> Portfolio items)
No drag and drop ranking
No coherent display of the rank field (it shows the raw real number)
Are these on the near term roadmap? Are there any workarounds?
1) The PercentDone tooltips should work. Are you getting any script errors in the console when hovering over the PercentDone bar in your grid?
2) You should be able to simply set enableRanking to true in the config when creating the grid: http://developer.rallydev.com/apps/2.0p5/doc/#!/api/Rally.ui.grid.Grid-cfg-enableRanking
(It shouldn't be necessary to include the Rank field in the grid to enable this functionality)
3) Currently there is no built-in way to show the friendly rank like the Backlog page does. You would have to implement a custom renderer for the Rank column:
columnCfgs: [
'FormattedID',
'Name',
{
text: 'Rank',
dataIndex: 'Rank',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
//Use this info to render the friendly rank
return rowIndex + 1;
}
}
]
Note the above really only works when the grid is sorted by Rank- it was more an example of how to specify a custom renderer.
Related
I am trying to implement filtering in my grid.Panel component. The filtering works fine (date, string and numbers) but I can not uncheck the "Filters" checkbox by clicking on it. As far as I have seen in the Ext js documentation there is nothing that I should add extra to be able to uncheck the Filters checkbox (see image below)
When I click on the Filters checkbox, nothing happens, no error also. The only way to disable this particular "Wholesaler" filter is if I go to the text box and remove the entry. This of course would be just fine, but at the date filters, I also can not click the checkbox and thus can not remove the filter once applied (see image below) The only way to remove it is to refresh the page.
I am using Ext JS version 5.1.2, and here is the sample code:
{
dataIndex: 'Wholesaler',
text: 'Wholesaler',
filter: {
type: 'string'
},
}
And the Panel componenet itself:
Ext.apply(this, {
region: 'center',
api: new Dextop.api('sample'),
border: false,
plugins: 'gridfilters',
columns: sample.getController().getGridColumns(),
storeOptions: {
autoLoad: false
}
});
Any help is appreciated!
I am trying to get a DGrid working using the following properties:
Drag and Drop
Single Selection
Unfortionatly, this doesn't work quite as easily as I was hoping. I am declaring my DGrid like this:
this._grid = new (declare([OnDemandGrid, DijitRegistry, Selection, DnDGrid]))({
store: this.store,
columns: [
{label: "ID", field:"id", sortable: false},
...
],
touchesToScroll: 2, // Required to enable d&d on mobile
dndSourceType: "grid-row",
getObjectDndType: function(item){
return [item.type ? item.type : this.dndSourceType];
},
selectionMode: "single"
}, this.gridDiv);
this._grid.startup();
For the most part this works well. DnD is working. Selection is mostly working. There is just some strange state on occasion. These are the cases:
Shift Select:
If I perform a shift select then I will get multiple items looking as if they are selected. They will have the following css classes attached to them:
.claro .dojoDndItemAnchor, .claro .dojoDndItemSelected { ... }
When listening to the dgrid-select event, it reports the selected elements correctly.
Attempting to drag the selected elements also works correctly -> only one of them is moved.
Edit: I have found a solution to the Shift Select issue. It is posted as answer below. I still haven't been able to figure out the next issue.
Programmatic Deselect:
If I do the following:
Select an item
Programmaticlly deselect all: this._grid.clearSelection();
Programmatically select another item: this._grid.select(row);
Leaves two items looking selected.
The two items have different styles. The incorrect one has:
.claro .dojoDndItemAnchor, .claro .dojoDndItemSelected { ... }
The correct one has:
.dgrid-selected
As before, when listening to the dgrid-select event, it reports the selected elements correctly.
It seems like this is the default dojo DnD moduel that is causing me issues. Looking at the doc it seems like I need to do something with the selector. Selector has a property called singular but I haven't been able to figure out how/where to set this.
Info on singular: https://dojotoolkit.org/reference-guide/1.9/dojo/dnd.html#id2
RE programmatic deselect, I think you've found a legit dgrid bug. I took a quick look at this and issued a pull request. See if that changeset resolves the issue for you.
It is possible to prevent Shift Select the multiple selection issue by using the dndParams field.
Instantiating the grid like this will solve the issue:
this._grid = new (declare([OnDemandGrid, DijitRegistry, Selection, DnDGrid]))({
store: this.store,
columns: [
{label: "ID", field:"id", sortable: false},
...
],
touchesToScroll: 2, // Required to enable d&d on mobile
dndSourceType: "grid-row",
getObjectDndType: function(item){
return [item.type ? item.type : this.dndSourceType];
},
selectionMode: "single",
dndParams:{singular: true} // ADDED THIS.
}, this.gridDiv);
this._grid.startup();
Still haven't figured out how to deal with programmatic changes.
I am using amCharts pie chart (v3) and I want to customize the pop up balloon that comes on mouseover on a slice: in addition to routine text like [[value]] [[percent]],
(a) a text that depends on the data item, and
(b) provide different click options to the user depending on data item. Every data row might not have these possibilities in which case the options should not appear.
For example, the pie chart might show wine consumption by country. On hover, I want to provide the user two different click options - one to see consumption by season if available, plus another to see consumption by age group if available.
Is it possible to do so in amCharts? I saw an exit for event clickSlice() here http://docs.amcharts.com/3/javascriptcharts/AmPieChart but nothing on how to modify the balloon text on the fly and add behavior to the balloon that comes on hover.
Will greatly appreciate your help.
For writing dynamic text in the balloon you can also do the folowing:
"graphs": [{
"balloonFunction": function(graphDataItem, graph) {
var value = graphDataItem.values.value;
if (value < 500) {
return value + "<br>(Little)";
} else {
return value + "<br>(A Lot)";
}
}
}],
You can use the following tags: [[title]], [[description]], [[value]] and [[percent]]. says the documentation.
I have used description for a custom field, it works fine.
You can add any custom field to your data provider and then display it in your balloon in the same way as value:
{value:15, title:"slice title", someCustomField:"some custom data"}
and then:
chart.balloonText = "[[someCustomField]]";
I am trying to add some column header groups with sub columns in ExtJs, however I am having some difficulty...
I know that when we specify the config for a gridpanel, we can use a tree like structure to specify columns with sub groups i.e.
columns[{
text: 'column1',
columns[{
text: 'subcolumn'
}]
}}
This is fine, however, I am trying to do this dynamically when my gridpanel store loads
I have some code which creates a grid column on the fly
retCol = new Ext.grid.column.Column({
fixed: false,
hideable: false,
menuDisabled: true,
draggable: false,
sortable: false,
align: 'center',
text: monthName,
columns: []
});
The problem is, the newly created doesn't seem to have the value for columns that I supplied, it is hidden away in the initialConfig but it is of no use there :-/
Seen as this code creates the column header, if we don't have an array of columns, there is no way of adding sub columns. I tried adding to the 'items' config, but that doesn't work either :-/
Thanks for any help in Advance
Baz
If you want to add columns after the grid has been rendered you can use the grid reconfigure method.
I just read your question again, the reconfigure will also expect you the give your column config in the structure you posted. Not with the dynamically created headers.
You can build your column config dynamically though, after your store has loaded and pass the new config through reconfigure to your grid.
I have a problem with YUI (2) Datatable and Drag and Drop combo. I have a table of items, one of them is item description which I made editable (and saveable) with YUI's TextboxCellEditor. I also made the rows draggable (so I can drop them to another container).
But I'm stuck with two items:
- I can only get DnD by clicking on the second column (the first one does not work)
- I can only get it to work on the second attempt since initialization.
Here is a snipet from my JS (simplified):
nameFormatter = function (elCell, oRecord, oColumn, oData) {
var link = '/share/page/site/' + Alfresco.constants.SITE + '/document-details?nodeRef=' + oRecord.getData('nodeRef');
elCell.innerHTML = '<span>' + oData + '</span>';
};
descFormatter = function(elCell, oRecord, oColumn, oData) {
elCell.innerHTML = '<pre class="desc">' + oData + '</pre>';
};
columnDefs = [
{key: "name", label: "Name", sortable: true, formatter: nameFormatter, resizable: true}
, {key: "description", label: "Description", sortable: true, formatter: descFormatter, editor: new YAHOO.widget.TextboxCellEditor(), resizable: true}
];
this.mediaTable = new YAHOO.widget.DataTable(this.id + "-media-table", columnDefs, this.dataSource, {
MSG_EMPTY: "No files"
});
// now we want to make cells editable (description)
var highlightEditableCell = function(oArgs) {
var elCell = oArgs.target;
if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")) {
this.highlightCell(elCell);
}
};
this.mediaTable.subscribe("cellMouseoverEvent", highlightEditableCell);
this.mediaTable.subscribe("cellMouseoutEvent", this.mediaTable.onEventUnhighlightCell);
this.mediaTable.subscribe("cellClickEvent", this.mediaTable.onEventShowCellEditor);
this.mediaTable.subscribe("editorSaveEvent", this.saveDesc);
this.mediaTable.subscribe('cellMousedownEvent', this.onRowSelect);
The saveDesc function is simple Ajax call to save that items' description.
Here is the onRowSelect function:
onRowSelect = function(ev) {
console.log(" == method onRowSelect");
var tar = Event.getTarget(ev)
, dd
;
dd = new YAHOO.util.DDProxy(this.getTrEl(tar));
dd.on('dragDropEvent', function(e) {
YAHOO.Bubbling.fire('myCustomEvent', { target: e.info, src: tar});
dd.unreg();
});
};
If I just click on desc, I get the text editor, if I click on name, I get the link open.
Like I said, when I mouseDown on the second column (description), in first attempt I get nothing. Then I click and hold the second time, and this time it works (I get a DDProxy and I can Drag and drop it to the target, everything works there).
And the other issue is that when I click and hold on the name column, I don't get the DDProxy (I get my onRowSelect event and the correct row).
What am I doing wrong here?
UPDATE: Resolved the first issue by using Satyams answer - removing the formatter for my cell with link.
The second issue (only on the second click) was resolved because I added the missing dd.handleMouseDown(ev.event) in my onRowSelect function.
Dav Glass, who wrote DD, has this example in his page: http://new.davglass.com/files/yui/datatable4/ I used it in my example: http://www.satyam.com.ar/yui/2.6.0/invoice.html and it works just fine, though it is somewhat more involved than you have there. I'm sorry I cannot help you more precisely with your issue, D&D is not my string point but I hope the examples might help.
One reason for your problem might be that link in the cell. This is not a good idea, whether you have DD or not. In general, the recommended way to deal with this is to listen to the cellClickEvent and if the column of the cell that got clicked is the one that 'navigates', you build the URL based on the information in the record clicked and then navigate or do whatever you want with it. This allows the DataTable to render much faster, as it needs no formatter and, in the odd event that someone does click the cell, then and only then you bother to make the calculations. The size and number of DOM elements on the page also goes down.
Likewise, with the other cell with the pre-formatted tag, you can easily avoid it. The cells in each column in a DataTable gets a CSS class name made from the "yui-dt-col-" prefix and the 'key' value of the column (for example: yui-dt-col-description). Thus, you can simply add a style declaration for that CSS class name and spare yourself the formatter. Likewise, for highlighting the editable cells, how about defining some style for the .yui-dt-editable:hover selector? I've never done it myself but I imagine it should work.