I am using a kendo multi-select of version(2015.1.521). It is located in the lower side of the page. Widow size is increasing after selecting items. After removing some item from option using x icon, multi-select does not open. Is there any solution?
dojo
I have got a workaround where I am checking for active element.
Solution dojo
$("#required").kendoMultiSelect({
autoClose:false,
close: function (e) {
var activeElement = document.activeElement.getAttribute('aria-owns');
var currentId = this.tagList[0].id;
if (activeElement != undefined && activeElement != null && activeElement.includes(currentId)) {
e.preventDefault();
}
}
});
I was able to reproduce your problem. On the other hand, I wasn't able to reproduce it with a current version. That tells me, that it must have been a bug which has been fixed in the meantime.
The only way I found out which fixes the problem for me at 2015.1.521 is to refresh the Widget, once the problem occurred.
$("#required").data("kendoMultiSelect").refresh();
Now the question is, how do you know (programmatically) that you are in that error-state? Maybe you could refresh it on a regular basis. Until you upgrade to a newer version, it's going to be a workaround.
Related
I've added a plugin that allows the user to add a specially styled div via a dialog. The issue now is, this element should not be clickable inside the edtior. The problem is the users manage it to click inside the div and enter text there and by this screw it up.
I've already spent some time searching the documentation but couldn't find the right approach to do this yet. I'm not asking for code, just some advice how to do it, a pointer to the right API method would be good enough for me. I guess I can somehow access the elements or intercept an users click and prevent them from adding something to my element somehow, I just couldn't yet figure out how to do it.
Use the Widget System.
Widget Tutorial.
Demos.
I've finally managed to get this done by making the elements content not editable. When I create the element in my dialog:
hrElement.setAttribute('contenteditable', false);
When loading the plugin:
init: function (editor) {
editor.on('contentDom', function () {
var stiching = (this.document.getElementsByTag('div'));
console.log(stiching);
for(var i=0;i<stiching.count();i++){
if (stiching.getItem(i).hasClass('stitching')) {
stiching.getItem(i).setAttribute('contenteditable', false);
}
}
});
}
I'm pretty sure this is not the most best solution (don't like to iterate over the elements) but at least it works for me now. Any suggestions how to improve it for future cases are welcome.
I am using the following directive to create a ckEditor view. There are other lines to the directive to save the data but these are not included as saving always works for me.
app.directive('ckEditor', [function () {
return {
require: '?ngModel',
link: function ($scope, elm, attr, ngModel) {
var ck = ck = CKEDITOR.replace(elm[0]);
ngModel.$render = function (value) {
ck.setData(ngModel.$modelValue);
setTimeout(function () {
ck.setData(ngModel.$modelValue);
}, 1000);
}; }
};
}])
The window appears but almost always the first time around it is empty. Then after clicking the [SOURCE] button to show the source and clicking it again the window is populated with data.
I'm very sure that the ck.setData works as I tried a ck.getData and then logged the output to the console. However it seems like ck.setData does not make the data visible at the start.
Is there some way to force the view window contents to appear?
You can call render on the model at any time and it will simply do whatever you've told it to do. In your case, calling ngModel.$render() will grab the $modelValue and pass it to ck.setData(). Angular will automatically call $render whenever it needs to during its digest cycle (i.e. whenever it notices that the model has been updated). However, I have noticed that there are times when Angular doesn't update properly, especially in instances where the $modelValue is set prior to the directive being compiled.
So, you can simply call ngModel.$render() when your modal object is set. The only problem with that is you have to have access to the ngModel object to do that, which you don't have in your controller. My suggestion would be to do the following:
In your controller:
$scope.editRow = function (row, entityType) {
$scope.modal.data = row;
$scope.modal.visible = true;
...
...
// trigger event after $scope.modal is set
$scope.$emit('modalObjectSet', $scope.modal); //passing $scope.modal is optional
}
In your directive:
ngModel.$render = function (value) {
ck.setData(ngModel.$modelValue);
};
scope.$on('modalObjectSet', function(e, modalData){
// force a call to render
ngModel.$render();
});
Its not a particularly clean solution, but it should allow you to call $render whenever you need to. I hope that helps.
UPDATE: (after your update)
I wasn't aware that your controllers were nested. This can get really icky in Angular, but I'll try to provide a few possible solutions (given that I'm not able to see all your code and project layout). Scope events (as noted here) are specific to the nesting of the scope and only emit events to child scopes. Because of that, I would suggest trying one of the three following solutions (listed in order of my personal preference):
1) Reorganize your code to have a cleaner layout (less nesting of controllers) so that your scopes are direct decendants (rather than sibling controllers).
2) I'm going to assume that 1) wasn't possible. Next I would try to use the $scope.$broadcast() function. The specs for that are listed here as well. The difference between $emit and $broadcast is that $emit only sends event to child $scopes, while $broadcast will send events to both parent and child scopes.
3) Forget using $scope events in angular and just use generic javascript events (using a framework such as jQuery or even just roll your own as in the example here)
There's a fairly simple answer to the question. I checked the DOM and found out the data was getting loaded in fact all of the time. However it was not displaying in the Chrome browser. So the problem is more of a display issue with ckEditor. Strange solution seems to be to do a resize of the ckEditor window which then makes the text visible.
This is a strange issue with ckeditor when your ckeditor is hidden by default. Trying to show the editor has a 30% chance of the editor being uneditable and the editor data is cleared. If you are trying to hide/show your editor, use a css trick like position:absolute;left-9999px; to hide the editor and just return it back by css. This way, the ckeditor is not being removed in the DOM but is just positioned elsewhere.
Use this java script code that is very simple and effective.Note editor1 is my textarea id
<script>
$(function () {
CKEDITOR.timestamp= new Date();
CKEDITOR.replace('editor1');
});
</script>
Second way In controller ,when your query is fetch data from database then use th
is code after .success(function().
$http.get(url).success(function(){
CKEDITOR.replace('editor1');
});
I know, that this thread is dead for a year, but I got the same problem and I found another (still ugly) solution to this problem:
instance.setData(html, function(){
instance.setData(html);
});
I'm using a Kendo Grid's removeRow function. It works, but it always prompts "Are you sure you want to delete this record?" whenever I programmatically remove a row. I've already done the decision-making as to whether or not the row should be removed, so I don't want this message to show up. Googling didn't help and I couldn't find any similar question on StackOverflow or Kendo's forum. I know I could change the code, but I was wondering if there's a way to configure the grid to just not show it? Another solution would maybe be to temporarily block confirm prompts, possibly? Not sure if that's possible.
Setting editable.confirmation to false should do the trick:
kendoGrid( {
editable: {
confirmation: false
}
})
I have a workaround that I just figured out, in the meantime. It works fine, but it's a bit hacky:
var oldConfirm = window.confirm;
window.confirm = function() { return true; };
grid.getKendoGrid().removeRow(selectedRow);
window.confirm = oldConfirm;
I'd still be interested in hearing about any disabling of the confirmation, however, and I'll accept that as the answer if it comes along.
The grid (v4.3.1) selects the correct values in the drop down when going into edit mode.
However, there seem to be an issue with IE 7 and IE 8, which automatically select the first item, along with the other values that also should get selected.
Have anyone stumbled upon this with IE7/8?
While studying the source for jqgrid I also saw a commented line that actually would fix this issue. It was commented in this changeset and fixed another issue, as Oleg commented. Haven't yet found out what that issue was though.
I examined the described problem and can confirm, that it's a bug in jqGrid. So +1 for you in any way.
The line
//if(i===0) { this.selected = ""; }
was commented after the fix which you referenced was made based on the problem with single selected selects. See the post. So I can suggest two ways to fix the problem:
1) replace the above comment to the following lines
// fix IE8/IE7 problem with selecting of the first item on multiple=true
if (i === 0 && elem.multiple) { this.selected = false; }
2) add instead of that after the $("option",elem).each(function(i){...}) the lines
// fix IE8/IE7 problem with selecting of the first item on multiple=true
var $first = $("option:first",elem);
if($.inArray($.trim($first.text()),ovm) < 0 && $.inArray($.trim($first.val()),ovm) < 0 ) {
$first[0].selected = false;
}
I am not sure which bug fixing is the most safe.
The demo can be used to reproduce the bug. One can use IE9, start Developer Tools with F12, choose IE8 as the "Browser mode" and choose "IE Standards" as the "Document Mode". After all one can select item "SM000237" in the grid and verify that "Accounting free" item are selected together with "Bank Fees" instead of selecting only the "Bank Fees".
The first and the second demos both fixes the bug and use the described above fixes.
I have a Safari 5 extension that contains a toolbar. Whenever the current tab changes, that toolbar should be updated. I would like to do something like this from my bar's script:
safari.self.browserWindow.addEventListener("activeTab", tabChanged, false);
However, that doesn't seem to work. I have tried a number of other event names as well:
activeTab
activeTabChanged
onActiveTab
onActiveTabChanged
tab
tabChanged
onTab
onTabChanged
selectionChanged
onSelectionChanged
Does anybody know how to detect when the active tab changes?
Not that this is in any way related, but it looks like I would do this in Chrome with:
chrome.tabs.onSelectionChanged.addListener(tabChanged);
Safari 5.1 has several new events for extensions, including an "activate" event that fires when a window or tab is focused.
https://developer.apple.com/documentation/safariextensions/safariactivateevent
That's the event you are looking for. I'm not sure, but i think is a new addition to the extensions api. You can put in global.html or in the popover.html
safari.application.addEventListener("activate", activateHandler, true);
function activateHandler(event) {
safari.application.activeBrowserWindow.activeTab.page.dispatchMessage('someId', false);
}
I agree with #imiaou 's answer: from looking at Apple's docs there doesn't seem to be a way to do this :(.
Since I needed to detect tab changes for my extension (which I'm porting over from Chrome), I did the following polling-based workaround which seems to be working fine (in my global page):
var prevActiveTab;
setInterval("poorMansOnTabChange()", 1500); //poll every 1.5 sec
function poorMansOnTabChange() {
var curTab = safari.application.activeBrowserWindow.activeTab;
if (curTab != prevActiveTab) {
prevActiveTab= curTab;
console.log("active tab changed!");
//do work here
}
}
I'm unhappy with constantly polling the browser, but I see no other way around this until Apple adds support for these tab-events. If your extension can live with a relatively relaxed tab-switch event trigger latency then this could be a reasonable workaround for now (1.5 sec. max latency is acceptable for my extension, and it doesn't feel like its slowing down the browser).
While Safari doesn't have Chrome's specific tab-related API, it does have a perfect solution to this problem.
#Galt was 99% of the way there, with the idea to add an event listener to your injected JavaScript and to dispatchMessage that information to your extension.
The event handler you're looking for is named focus, and gets fired every time a tab or window gets selected.
In your injected code:
var tabInFocus = function( event )
{
safari.self.tab.dispatchMessage("tabFocusSwitched","");
}
window.addEventListener("focus", tabInFocus, false);
You can then update your extension's UI, with the data relevant to safari.application.activeBrowserWindow.activeTab
I found this method works better than focus event, it can be managed in the background page:
safari.application.addEventListener("validate", PopUp.validateCommand, false);
var PopUp = {
activeTab : null,
// commands are validated before being excecuted
validateCommand : function(aEvent) {
// this is a hack for detecting tab switches, safari does not have a dedicated API like Chrome
if(PopUp.activeTab !== null){
if(PopUp.activeTab !== safari.application.activeBrowserWindow.activeTab){
$.each(safari.application.browserWindows, function(aIndex, aWindow) {
$.each(aWindow.tabs, function(aIndex, aTab) {
// message all tabs about the focus switch event
if (aTab !== safari.application.activeBrowserWindow.activeTab && aTab.page) {
aTab.page.dispatchMessage("tabUnfocused");
}else{
aTab.page.dispatchMessage("tabFocused");
}
});
});
}
}
// set the new active tab
PopUp.activeTab = safari.application.activeBrowserWindow.activeTab;
}
}
This code will help to trace the change in URL :-
Write this code Inject.js , in side function
function trackURL() {
alert("beforeNavigate "+safari.application.activeBrowserWindow.activeTab.url);
setTimeout(function() {
alert("afterNavigate "+safari.application.activeBrowserWindow.activeTab.url);
}, 500);
}
safari.application.addEventListener("beforeNavigate", trackURL, true);
It seems Apple doesn't provide much API for us manipulating tabs like Chrome does.
Currently, there is no way to detect tab event.
Unlike chrome which provides a special API for events like window and tab changes, you can still do it with safari extensions.
You simply have to have your injected javascript set up event listeners for the events that you want.
Then if that info is needed by global or other parts of the extension, you can pass the info in messages using the postMessage command.
injected.js:
window.addEventListener("load", loaded, false);
safari.self.tab.dispatchMessage("somethinghappened","load");