I just want to change some style when the CHANGE event fired.But when I change the model by insert or move a vertex or edge, the style didn't change. And the changed vertex will change it's style after I change anything again. Is anybody konws why?
Here is my code:
graph.getModel().addListener(mxEvent.CHANGE, function(sender, evt){
if(graphInited){
graph.getModel().beginUpdate();
try {
var changes = evt.getProperty('edit').changes;
for (var i = 0; i < changes.length; i++) {
var change = changes[i];
var state = graph.view.getState(change.cell);
if(state!=null){//color #1C86EE means new insert
if(state.style[mxConstants.STYLE_IMAGE_BACKGROUND]!="#1C86EE"
&& state.style[mxConstants.STYLE_STROKECOLOR]!="#1C86EE"
&& state.style[mxConstants.STYLE_FONTCOLOR]!="#1C86EE"){
graph.setCellStyles(mxConstants.STYLE_IMAGE_BACKGROUND, '#68228B', [change.cell]);
graph.setCellStyles(mxConstants.STYLE_STROKECOLOR, '#68228B', [change.cell]);
}
}
}
} finally {
graph.getModel().endUpdate();
}
}
});
I made more recon and fond simpler solution than in my first answer.
You need to add:
evt.consume()
graph.refresh()
So final code would looks like:
graph.getModel().addListener(mxEvent.CHANGE, function(sender, evt){
if(graphInited){
graph.getModel().beginUpdate();
evt.consume();
try {
var changes = evt.getProperty('edit').changes;
for (var i = 0; i < changes.length; i++) {
var change = changes[i];
var state = graph.view.getState(change.cell);
if(state!=null){//color #1C86EE means new insert
if(state.style[mxConstants.STYLE_IMAGE_BACKGROUND]!="#1C86EE"
&& state.style[mxConstants.STYLE_STROKECOLOR]!="#1C86EE"
&& state.style[mxConstants.STYLE_FONTCOLOR]!="#1C86EE"){
graph.setCellStyles(mxConstants.STYLE_IMAGE_BACKGROUND, '#68228B', [change.cell]);
graph.setCellStyles(mxConstants.STYLE_STROKECOLOR, '#68228B', [change.cell]);
}
}
}
} finally {
graph.getModel().endUpdate();
graph.refresh();
}
}
});
Related
Trying to toggle the visibility of MarkerClusterer (V3):
var hydrantsShowing = true;
function ToggleHydrants() {
var markers = hydrantsClusterer.getMarkers();
for (var i = 0; i < markers.length; i++) {
markers[i].setVisible(!hydrantsShowing);
}
hydrantsShowing = !hydrantsShowing;
}
The markers do toggle but with two problems:
1. The map must be panned a bit to the change can take place.
2. The MarkerClusterer icons (with the numbers) are always there, even after the markers are not visible.
I've also tried using the setMap approach, but with similar behavior:
var hydrantsShowing = true;
function ToggleHydrants() {
var markers = hydrantsClusterer.getMarkers();
if (hydrantsShowing) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
}
else {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(gmap);
}
}
hydrantsShowing = !hydrantsShowing;
}
Solved it by using MarkerClustererPlus instead.
var hydrantsShowing = true;
function ToggleHydrants() {
var markers = hydrantsClusterer.getMarkers();
for (var i = 0; i < markers.length; i++) {
markers[i].setVisible(!hydrantsShowing);
}
hydrantsClusterer.repaint();
hydrantsShowing = !hydrantsShowing;
}
Calling repaint() after setting visibility sorted all issues.
The original MarkerClusterer don't have such a function.
I am creating game like http://www.puzzlegames.org/814games-Connect-2-Game-game.html. so what should i add in connected() function?
fB and sB are First and second button selected.
fBN and sBN are names of those buttons.
allNull() makes fB,sB, fBN, sBN null.
function onClick(e:MouseEvent):void {
if (! another) {
another = true;
fB = e.target;
fBN = e.target.name;
}
else {
sB = e.target;
sBN = e.target.name;
if (fBN == sBN)
{
allNull();
}
else if (connected())
{
fB.removeEventListener(MouseEvent.MOUSE_DOWN, onClick);
sB.removeEventListener(MouseEvent.MOUSE_DOWN, onClick);
fB.alpha = 0;
sB.alpha = 0;
pairCount++;
allNull();
if (pairCount == 25)
{
gameOver = false;
showScore();
endGame();
}
}
another = false;
}
}
Please help. I am trying to solve this problem since 15 days.
Thanks in advance.
Suppose we've a grid with sortable columns.
If a user clicks on a column, it gets sorted by 'asc', then if a user clicks the column header again, it gets sorted by 'desc', now I want similar functionality when a user clicks the column third time, the sorting is removed, i.e. returned to previous style, the css is changed back to normal/non-italic etc?
Today I was trying to achieve same thing. I've skimmed through SlickGrid code but didn't find any 'Reset' function. So, I've tweaked the slick.grid.js v2.2 a little bit.
Basically you just need to add a new array - 'latestSortColumns' which will store sort columns state (deep copy of internal SlickGrid sortColumns array).
var latestSortColumns = [];
Optionally add new setting to opt-in for sort reset.
var defaults = {
(...),
autoResetColumnSort: false
};
Change setupColumnSort to reset sort after third click on column's header.
function setupColumnSort() {
$headers.click(function (e) {
// temporary workaround for a bug in jQuery 1.7.1 (http://bugs.jquery.com/ticket/11328)
e.metaKey = e.metaKey || e.ctrlKey;
if ($(e.target).hasClass("slick-resizable-handle")) {
return;
}
var $col = $(e.target).closest(".slick-header-column");
if (!$col.length) {
return;
}
var column = $col.data("column");
if (column.sortable) {
if (!getEditorLock().commitCurrentEdit()) {
return;
}
var sortOpts = null;
var i = 0;
for (; i < sortColumns.length; i++) {
if (sortColumns[i].columnId == column.id) {
sortOpts = sortColumns[i];
sortOpts.sortAsc = !sortOpts.sortAsc;
break;
}
}
**if ((e.metaKey || (options.autoResetColumnSort && latestSortColumns[i] != null && latestSortColumns[i].sortAsc === !column.defaultSortAsc)) && options.multiColumnSort) {**
if (sortOpts) {
sortColumns.splice(i, 1);
**latestSortColumns.splice(i, 1);**
}
}
else {
if ((!e.shiftKey && !e.metaKey) || !options.multiColumnSort) {
sortColumns = [];
}
if (!sortOpts) {
sortOpts = { columnId: column.id, sortAsc: column.defaultSortAsc };
sortColumns.push(sortOpts);
} else if (sortColumns.length == 0) {
sortColumns.push(sortOpts);
}
}
setSortColumns(sortColumns);
if (!options.multiColumnSort) {
trigger(self.onSort, {
multiColumnSort: false,
sortCol: column,
sortAsc: sortOpts.sortAsc}, e);
} else {
trigger(self.onSort, {
multiColumnSort: true,
sortCols: $.map(sortColumns, function(col) {
return {sortCol: columns[getColumnIndex(col.columnId)], sortAsc: col.sortAsc };
})}, e);
}
}
});
}
Store new state after every sort change in latestSortColumns:
function setSortColumns(cols) {
sortColumns = cols;
var headerColumnEls = $headers.children();
headerColumnEls
.removeClass("slick-header-column-sorted")
.find(".slick-sort-indicator")
.removeClass("slick-sort-indicator-asc slick-sort-indicator-desc");
$.each(sortColumns, function(i, col) {
if (col.sortAsc == null) {
col.sortAsc = true;
}
var columnIndex = getColumnIndex(col.columnId);
if (columnIndex != null) {
headerColumnEls.eq(columnIndex)
.addClass("slick-header-column-sorted")
.find(".slick-sort-indicator")
.addClass(col.sortAsc ? "slick-sort-indicator-asc" : "slick-sort-indicator-desc");
}
});
**for (var i = 0; i < sortColumns.length; i++)
latestSortColumns[i] = { columnId: sortColumns[i].columnId, sortAsc: sortColumns[i].sortAsc };**
}
That's all, should work now.
This is a function I call to reset all columns back to their original order.
It requires one of columns to be set up as not sortable.
In the example below I use the first column of the table, columns[0], which has the field id "locus".
function removeSorting() {
columns[0].sortable = true;
$('.slick-header-columns').children().eq(0).trigger('click');
columns[0].sortable = false;
// clear other sort columns
grid.setSortColumns( new Array() );
}
Then in the typical dataView.sort() function you make an exception for this column:
grid.onSort.subscribe(function(e,args) {
var cols = args.sortCols;
dataView.sort(function (dataRow1, dataRow2) {
for( var i = 0; i < cols.length; i++ ) {
var field = cols[i].sortCol.field;
// reset sorting to original indexing
if( field === 'locus' ) {
return (dataRow1.id > dataRow2.id) ? 1 : -1;
}
var value1 = dataRow1[field];
var value2 = dataRow2[field];
if( value1 == value2 ) continue;
var sign = cols[i].sortAsc ? 1 : -1;
return (value1 > value2) ? sign : -sign;
}
return 0;
});
});
Will the table always be sorted in some order on some column?
If not then you'll have to store a lot of state the first time a column is clicked just in case you want to restore it after a third click.
Im looking for a way to place objects displaced from each other on every 2nd row.
The objects are being placed like this: http://bit.ly/fpn1GC
for(var i:uint=1;i<12;i++) {
for(var j:uint=1;j<12;j++) {
var p:place = new place();
if(i%2){
//1-3-5...
p.x=40*j;
}
else {
//2-4-6...
p.x=40*j;
}
p.y=29*i;
addChild(p);
}
}
Thanks in advance
for(var i:uint=0;i<11;i++) {
for(var j:uint=0;j<11;j++) {
var p:place = new place();
if(i%2){
//2-4-6...
p.x=42*j+22;
}
else {
//1-3-5...
p.x=42*j+42;
}
p.y=28*i+20;
addChild(p);
}
}
I am using a RadGrid (2009 Q2) with a hierarchy. Is there a way in the client api to expand all rows and vice-versa?
thanks!
Update:
I have written a javascript function based off the api documentation suggested by Dick Lampard below to expand/collapse all rows in a radgrid with three levels. It expands all the mastertableview rows and all the nested detailtableview rows in both sub levels of the first mastertableview row, but it breaks when it goes the to detailtableview rows for the second mastertableview row (whew!). The error I am getting is "_350 is undefined". This is coming from a Telerik.Web.UI.WebResource file.
function ExpandCollapseAll(expand) {
var grid = $find("<%= rgHistory.ClientID %>");
master = grid.get_masterTableView();
var masterRowCount = master.get_dataItems().length;
for (masterIndex = 0; masterIndex < masterRowCount; masterIndex++) {
if (expand) {
master.expandItem(masterIndex);
}
else {
master.collapseItem(masterIndex);
}
}
var detailTables = grid.get_detailTables();
var detailTableCount = detailTables.length;
for (detailTableIndex = 0; detailTableIndex < detailTableCount; detailTableIndex++) {
var detailTable = detailTables[detailTableIndex];
var rowCount = detailTable.get_dataItems().length;
for (rowIndex = 0; rowIndex < rowCount; rowIndex++) {
if (expand) {
//expandItem is failing! detailTableIndex and rowIndex are correct
detailTables[detailTableIndex].expandItem(rowIndex);
}
else {
detailTables[detailTableIndex].collapseItem(rowIndex);
}
}
}
}
ANY IDEAS?!?!
There is client API for hierarchy expansion as well as ExpandHierarchyToTop() server method. Check out this demo.
Dick
If you would like to see all the hierarchy levels, Set HierarchyDefaultExpanded to the MasterTableView and all the GridTableViews. See this link for more details.
Try This
protected void Page_PreRenderComplete() {
if (!Page.IsPostBack) {
foreach (GridItem item in MyGrid.MasterTableView.Controls[0].Controls) {
if (item is GridGroupHeaderItem)
if (item.GroupIndex.ToString() != "0")
item.Expanded = !item.Expanded;
}
}
}
after radGrid.DataBind()
use this Mehtod
private void ExpanadAllRadGridNodes()
{
foreach (GridDataItem item_L1 in radgridQuestionGroups.MasterTableView.Items)
{
foreach (GridTableView item_L2 in (item_L1 as GridDataItem).ChildItem.NestedTableViews)
{
foreach (GridDataItem item_L3 in item_L2.Items)
{
item_L3.Expanded = true;
}
}
}
}