I have a kendo grid with a custom popup:
columns.Command(commands =>
{
commands.Edit();
}
.Editable(editing => editing.Mode(Kendo.Mvc.UI.GridEditMode.PopUp))
Each time I click the edit button the window pops up but when I close it the window is not removed from the DOM.
I saw this post: http://www.telerik.com/forums/popup-windows-do-not-get-removed-from-dom and Telerik says the issue has been fixed.
What are some things that would cause this behavior?
UPDATED
This grid is nested in a Kendo TabStrip if that helps. Other than that I don't see anything out of the ordinary. The popup is entirely managed by the grid.
UPDATED 2
So I got the un-minimized code for the grid (kendo.grid.min.js, version 2013.3.1119, starting at line 1172), slopped it into my project and modified just the following with the two log statements to verify that destroy is being bound and called:
_destroyEditable: function () {
var that = this;
var destroy = function () {
if (that.editable) {
// My edit
console.log("...destroy() called");
that._detachModelChange();
that.editable.destroy();
that.editable = null;
that._editContainer = null;
}
};
if (that.editable) {
if (that._editMode() === "popup") {
// My edit
console.log("Binding destroy() to 'deactivate'...");
that._editContainer.data("kendoWindow").bind("deactivate", destroy).close();
} else {
destroy();
}
}
},
Each time I click edit and then close the window I see the expected two messages yet the window is not removed. Here is a screenshot of the debugger:
The outlined windows are the dom elements generated.
After much trial and error and deep diving it turns out this problem has to do with our scripts in our site's layout. At some point whomever setup the kendo scripts put in not only the 'kendo.all.min.js' but right after it 'kendo.web.min.js', 'kendo.aspnetmvc.min.js' and then about 10 individual kendo.*.js including the grid.
After viewing this link:
http://docs.telerik.com/kendo-ui/getting-started/javascript-dependencies
I realized that the site is creating these objects multiple times. Removing the script references in accordance to the link above resolves the issue.
Related
I'm using smart-table at the moment, and I have input text boxes up the top of each column and I am using st-search. The point of what I am making is something is selected from the table, and then the results in the table are changed.
I am trying to clear the search boxes when the row is clicked. At the moment other business logic is implemented on click, so it's at this point that I am looking to clear these text boxes.
I have tried to associate an ng-model to these text boxes, and to clear them when the row is clicked but the text boxes don't change. I have also googled this issue and I have only found solutions on how to make this work for when you click on a button (by a directive) to clear the predicates. I haven't been able to make these solutions work programatically however.
To resolve this I did the following:
Monkey-patched smarttable.js with the code in this github issue (https://github.com/lorenzofox3/Smart-Table/issues/164). For me this occured at around line 574.
// added from https://github.com/lorenzofox3/Smart-Table/issues/164
ng.module("smart-table").directive("stResetSearch",
function() {
return {
restrict: 'EA',
require: '^stTable',
link: function(scope, element, attrs, ctrl) {
return element.bind('click',
function() {
return scope.$apply(function() {
var tableState;
tableState = ctrl.tableState();
tableState.search.predicateObject = {};
tableState.pagination.start = 0;
return ctrl.pipe();
});
});
}
};
});
Added 'st-research-search' to the element that was calling the function in angularjs. For me, that was the "tr" element. Like below.
<tr ng-repeat="medicine in medicines" ng-click="medicationMatched(medicine)" ng-class="heatmapClass(medicine)" st-reset-search>
This worked fine. Unfortunately, I wasn't able to programatically clear the predicates from the code. But this works well enough for me.
I have an Interactive Grid on my page and I want to add a button to a toolbar. I have wrote a javascript function and tried to add the code under Advanced->Javascript. But when I did that my grid content disappeared completely, only heading was left. Is that the wrong place to add my code? How to ensure the function gets called?
Below is my function:
function(config) {
var $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
toolbarGroup = toolbarData.toolbarFind("actions3"); // group where Add Row button is
toolbarGroup.controls.push({type: "BUTTON",
action: "selection-delete"
});
config.toolbarData = toolbarData;
return config;
}
I do not know why, but this problem occurs when you use this code in a detail of an interactive grid.
The problem is solved when you put the code in both the reports, the master and the detail.
The problem is that the function "toolbarFind" is deprecated or just removed in current version. Try:
toolbarGroup = toolbarData[toolbarData.length-2];
When editing my grid, if I click outside the grid, the box I was editing is still editable. How do I get the edited cell to "complete" the edit when it looses focus?
The following code will save the current edit.
Slick.GlobalEditorLock.commitCurrentEdit();
You'll need to place this inside an event handler that you think should trigger the save. For example, if you're using the sample text editor plugin, I believe an editor-text CSS class is added to the input field that's created when you're editing a cell so something like this should work:
$('#myGrid').on('blur', 'input.editor-text', function() {
Slick.GlobalEditorLock.commitCurrentEdit();
});
I found that I needed to wrap clav's handler in a timeout:
$("#myGrid").on('blur', 'input.editor-text', function() {
window.setTimeout(function() {
if (Slick.GlobalEditorLock.isActive())
Slick.GlobalEditorLock.commitCurrentEdit();
});
});
to avoid errors like:
Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.
when using the keyboard to navigate. Presumably the new blur handler fires before SlickGrid can do its own handling and this causes problems.
Unfortunately, probably due to differences in event processing, Grame's version breaks keyboard navigation in chrome.
To fix this, I added another check to only commit the edit, if the newly focused element is not another editor element within the grid (as the result of keyboard navigation):
$('#grid').on('blur.editorFocusLost', 'input.editor-text', function() {
window.setTimeout(function() {
var focusedEditor = $("#grid :focus");
if (focusedEditor.length == 0 && Slick.GlobalEditorLock.isActive()) {
Slick.GlobalEditorLock.commitCurrentEdit();
}
});
});
This seems to work in current versions of firefox, chrome and ie.
Ok, so i have two ways to perform div refresh
$('#player').load('/videos/index');
in my rails app. One is through link
next
other is through shortcut of that button. And they work fine, until i discovered, that if I refresh player twice in a row through the link, and then through the shortcut, it loads div twicely. If i refresh through the link three times in a row, than through the shortcut, than it's loading div three times. And so on..
So, i've started to trying configure binds (as I assumed, that was the reason), but there were mo result.
Here is my messed up in binds shortcut part of application.js
$(document).ready(function(){;
$(document).bind('keydown', 'space', function() {
$('#player').unbind('load');
$('#player').load('/videos/index');
$(document).unbind();
});
});
I tried to click on link through the shortcut, but the same result, so I've assume, the problem is in load. Any suggestions would help.
The best way to avoid a double refresh, is having an state flag, indicating if it can load again, or if it's loading:
$(document).ready(function() {
var loading = false;
function reloadDiv() {
if(!loading) {
loading = true;
$('#player').load('/videos/index', null, function() { loading = false; });
}
}
$('#nextb').click(reloadDiv);
$(document).bind('keydown', 'space', reloadDiv);
});
Good luck!
Using the event click with live function leads to strange behavior when using Firefox*.
With live in Firefox, click is triggered when right-clicking also! The same does not happen in Internet Explorer 7 neither in Google Chrome.
Example:
Without live, go to demo and try right clicking
the paragraphs. A dialog menu should
appear.
With live, go to demo and try right
clicking "Click me!". Now both dialog
menu and "Another paragraph" appear.
*tested with firefox 3.5.3
As far as I know, that is a known issue (bug?). You can easily work around it by testing which button was clicked as follows:
$('a.foo').live("click", function(e) {
if (e.button == 0) { // 0 = left, 1 = middle, 2 = right
//left button was clicked
} else {
//other button was clicked (do nothing?)
//return false or e.preventDefault()
}
});
you might prefer using a switch depending on your specific requirements, but generally you would probably just want to do nothing (or or simply return) if any button other than the left button is clicked, as above:
$('a.foo').live("click", function(e) {
switch(e.button) {
case 0 : alert('Left button was clicked');break;
default: return false;
}
});
I think it's a known "bug", you could potentially query the event object after attaching the click handler ( which gets attached to the document ) and see if its a right click, otherwise manually attach the click handler after you manipulate the DOM.
After looking it up, e.button is the property you want to query:
.live('click', function(e){
if ( e.button == 2 ) return false; // exit if right clicking
// normal action
});
See my answer here: if you don't mind changing the jQuery source a bit, adding a single line in the liveHandler() works around the problem entirely.