How Do I Prevent the KendoGrid's RemoveRow Function from Prompting? - telerik

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.

Related

Kendo UI multiselect flashing after removing item

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.

ckeditor disable element, prevent user from adding content to it

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.

wysihtml5 - setting a value won't work, because 'sandbox iframe isn't loaded yet'

I'm just working on a little webservice. Therefore I am using an AJAX call and append my data to a table on my website. Here I can read and update already existing entries or write new entries. Everything works fine.
I want to have the possibility to update already existing with the wysihtml5 editor. I already integrated this editor on my website and I can use it on new entries. That works, too.
But now there's the problem with existing data. When it comes to the form to update data, I want the existing data being displayed as the value. Everything works fine on all inputs, just the wysihtml5 don't work.
I already know that there's an iframe and that's why I can't set the value of the textarea. I searched for a solution and found the following code (last line):
var editor = new wysihtml5.Editor("textareaid", { // id of textarea element
toolbar: "wysihtml5-toolbar", // id of toolbar element
parserRules: wysihtml5ParserRules, // defined in parser rules set
});
editor.setValue('Here's the content', true);
Usually this should work, but no content appears and the console just tells me:
Error: wysihtml5.Sandbox: Sandbox iframe isn't loaded yet
I tried it with a timeout-function but nothing works. Searching on the internet it also seems that there is noone else with that problem. I hope you can help me out, would be great!
Is there a way to set the value?
This code work for me
$("#product_details").data("wysihtml5").editor.getValue();// to get the value
$("#product_details").data("wysihtml5").editor.setValue('new content')// to set the value
I got the solutions, below code worked for me
$('#id ~ iframe').contents().find('.wysihtml5-editor').html(my_html);
This work for me
$('.wysihtml5-sandbox').contents().find('.wysihtml5-editor').html(my_html);
the ".wysihtml5-sandbox" is a class name of iframe, create by wysihtml5 by default.
I finally got it working by myself. I just change the second parameter of setValue to false. I don't know why, but it works then.
this code worked for me :
var wysihtml5Editor = $('#text_editor').data("wysihtml5").editor;
wysihtml5Editor.setValue("<p>foobar</p>", true);
console.log(wysihtml5Editor.getValue());

Getting the source of a delegated tap event

Okay, so it took some digging here, I hope the solution I found is useful. I hope even more, though, that there is a less jacked-up way to do this, and someone can point it out.
I was trying to figure out how to get the source of a delegated tap event from an item that is in a carousel, rather than a list or other similar structure with built-in passable arguments in Sencha Touch 2; the scope of the event is, by default, the container that has the listener. All of the arguments that were passed through the function were related to the mouse click event, rather than the source. See below for my solution.
One more way
tap: function(list, index, target, record, e, eOpts){
var elm = Ext.get(e.target);
Ext.getCmp(elm.dom.id);
}
Like I said, this is a hacky solution, if there's something better that'd be awesome, please post it here. Anyway, this is the delegate listener code I used:
{
element: 'element',
delegate: '.completed_button',
event: 'tap',
fn: function(element){
var source_id = element.getTarget().id;
Ext.getCmp(source_id);
}
}
In other words, pass the click event argument, get its target, and get that target's id. I found this through snooping around what console.log(element) showed me.

Tying a data source from dojo.xhrPost to a text box for autocomplete

I inherited a web app that uses Dojo 1.5 and the template toolkit. I am enjoying learning dojo but it's at a slow pace.
Initially when bringing up our web form, we'll have a list of files on the right side of the page like so....
AAA_text
BBB_text_1
BBB_text_2
CCC_text
....
....
On the left side we have a search box that asks for the subset of file to use. Normally we would just type in "AAA" and then the div on the right side would find those files that match and display them after you press the "Search" key below the box.
What we are looking to do is to eliminate the "Search box" and have the list of files matching "AAA" to come up in the right side div as "AAA" is being typed, (or "BBB" or "CCC", etc).
I suppose in a nutshell it's the equivalent having the "Search" button pressed after every key is typed in the Search box.
Does this sound like a realistic goal or even possible? The code itself uses a ton of Template Tookit so I'm not looking to do any major rewrite.
If I am not making myself clear, let me know. I can elaborate for clarity. Many many thanks! Janie
EDIT: OK, I have solved a good deal of my problem so far and as it turns out, as so many of these things have a propensity to do, that what I am really needing is to get clear on how to make autocomplete work. Which is to say that I have a data source for my text box but not really sure how to tie it to the text box. I have a dojo.xhrPost routine that can handle grabbing the values.
It looks like this....
dijit.byId('files_matching').getValue(),
Googling dojo autocomplete examples gives me a zillion links and none of which are proving helpful. So I suppose my questions have transitioned to....
1. Can you even use autocomplete on a mere text box (I've seen links that say that you can only use it on combo boxes)
2. Is there a link out there somewhere that describes/shows in detail how to tie a dojo text box to a data source using dojo.xhrPost.
I am so close to solving this and I still seem to have a gaping chasm in front of me.
It's difficult to say for sure without seeing your code but if you don't have one already, I would recommend to create an ItemFileReadStore or something similar to start with. That way you can query that store locally on the client without having server requests after every key stroke.
It could look something like this:
var file_store = new dojo.data.ItemFileReadStore({ data: {
items: [{ name:"AAA_text" },
{ name:"AAA_text_1" },
{ name:"BBB_text_2" }]
}});
When you have that in place you can call a function from your text input's onChange event:
<input type="text" onchange="query_store(this.value);" />
And then you handle to actual query from the function called from the onchange event:
var query_store = function(search_for) {
var my_query = { name: search_for+"*" }; // * for wildcard match
completed = function(items, result){
for(var i = 0; i < items.length; i++){
var value = file_store.getValue(items[i], "name");
alert(value); // Instead of alert, you can save the values to your div.
}
};
file_store.fetch({ query: my_query, onComplete: completed });
}
A lot of good information about this can be found here
Hope this is at least a little helpful.

Resources