If a form lookup attribute is customized as readonly and activated programatically using the setDisabled javascript method, its behavior is different to lookups which are not customized as readonly:
a single click in the blank spot of the lookup (not on the text) triggers the redirection to the lookup's entity (if not not empty) instead of selecting the lookup and enabling text input.
Is there a way to enable the same behavior without changing the readonly property in the form customizing?
Version is 8.2.0.749.
So I found that for some reason there are two click handlers registered on the "readonly" lookup dom element. This is not the case, if the lookup is not set to readonly in form customizing. A hacky unsupported workaround would be the following javascript:
var domElement = document.getElementById("transactioncurrencyid");
if (domElement && domElement.children && domElement.children[0]) {
var div = domElement.children[0];
if (div && div._events && div._events.click && div._events.click.length === 2) {
div.removeEventListener('click', div._events.click[0].browserHandler, false);
div.removeEventListener('click', div._events.click[1].browserHandler, false);
}
}
Related
I have a couple raddatepicker controls that are not enabled correctly after I've set date1.enabled = true.
The master page contains a client side function that sets disabled controls to readonly:
function ParseDocumentForDisabled() {
//Transform the disabled controls that are not inside a DIV
$("input[type=text][disabled]").each(function (i, v) {
if ($(v).attr('OnClientLoad') != '' && $(v).attr('OnClientLoad') != undefined)
return;
$(v).removeAttr("disabled");
$(v).attr("readonly", "");
});
//Transform the disabled DIVs
$("div[disabled]").each(function (i, v) {
$(v).removeAttr("disabled");
//Take each control type and parse it
$(v).find("input[type=text]").attr("readonly", "");
$(v).find("textarea").attr("readonly", "");
$(v).find("checkbox").attr("disabled", "disabled");
$(v).find("input[type=submit]").attr("disabled", "disabled");
$(v).find("input[type=button]").attr("disabled", "disabled");
});
}
The controls are in a radwindow popup and linked to the event of a radcombobox change, however, after the combobox event sets either raddatepicker's enabled property to true after being disabled, only the calendar icon becomes usable again, the textarea remains readonly.
Thank you for your help.
Iris
[edit]
Managed to fix the issue by setting date1.dateinput.enabled = true. The problem was that the textarea remained readonly instead of being disabled and the jquery didn't activate it properly.
Use the client-side API provided by the control (http://www.telerik.com/help/aspnet-ajax/calendar-client-side-rad-datepicker.html), as it is much more than the collection of HTML, so enabling it has to enable other features and code. Here is what worked for me:
<telerik:RadDatePicker runat="server" ID="rdp1" Enabled="false"></telerik:RadDatePicker>
<asp:Button ID="Button1" Text="enable picker" OnClientClick="enableDatePicker(); return false;" runat="server" />
<script>
function enableDatePicker() {
$find("<%=rdp1.ClientID%>").set_enabled(true);
}
</script>
Here is also an approach that does not depend on knowing the ID of the control - it goes through all disabled HTML elements on the page, check if an IScriptControl is associated with them and whether it has the set_enabled() API and then calls it. Since date pickers are composite controls, the actual date input is disabled, and you also have to enable its parent - the date picker, hence the second nested if.
function enableDatePicker() {
$telerik.$("[disabled]").each(function (index, elem) {
if (elem.control && elem.control.set_enabled) {
elem.control.set_enabled(true);
if (elem.control.get_owner && elem.control.get_owner().set_enabled) {
elem.control.get_owner().set_enabled(true);
}
}
});
}
There is a known issue with the Telerik RadEditor that causes odd character insertions, as documented here.
The work around requires the insertion of a client-side script to strip out the offending character in the OnClientSubmit event.
We use this control in many places and have three styles defined in our skins file for it. We also derive a custom control from the RadEditor in a custom control we call RichEdit.
The question is - will this approach work to guarantee that all instances of our RichEdit control receive the required client-side event?
1) In the RichEdit.cs OnLoad, register a client script block containing the required javascript function
2) In the skin file, add the required OnClientSubmit method call to each skin?
So - will it work? And if not, what DO I need to do?
And the answer is yes.
Adding a call to this method in the page load section:
private void AddRichEditGarbageCharacterWorkaround()
{
string scriptName = "RadEditorOnClientSubmit";
Type csType = GetType();
ClientScriptManager csm = Page.ClientScript;
if (!csm.IsClientScriptBlockRegistered(csType, scriptName))
{
StringBuilder sb = new StringBuilder();
sb.Append("<script type=\"text/javascript\">");
sb.Append("\tfunction RadEditorStripGarbage(editor, args) {");
sb.Append("\t\tvar html = editor.get_html();");
sb.Append("\t\thtml = html.replace(/\u200b/g, \"\");");
sb.Append("\t\teditor.set_html(html);");
sb.Append("\t\t}");
sb.Append("</script>");
csm.RegisterClientScriptBlock(csType, scriptName, sb.ToString());
}
}
And adding this to the skin:
<nt:RichEdit runat="server" SkinID="SpellCheckOnly" ...
OnClientSubmit="RadEditorStripGarbage" >
Successfully added the code and the hook to every instance.
I'm working on a Kendo Mobile project with a number of:
Kendo Views (external to root html)
Modal Views (in the root html).
The external files load on demand and everything works fine. But i'd like to have the same load on demand behavior for some of the modal views, because the root/based html file is becoming too large and not manageable.
Is there a way to either:
Store a modal view in an external file? If so is it possible to load via javascript syntax (app.navigate()) rather than the declarative syntax (href='externalmodal').
Manually pre-load an external view without navigating to it first.
This code lets you manually create a view:
var viewUrl = 'blahblahblah';
var element = $.parseHTML('<div data-role=view>test</div>')[0];
element.style.display = 'none';
$(document.body).append(element);
var options = $.extend({}, kendo.parseOptions(element, kendo.mobile.ui.View.fn.options));
var view = new kendo.mobile.ui.View(element, options);
view.element[0].setAttribute('data-url', viewUrl);
kendo.mobile.application.navigate(viewUrl, '');
Depending on what features you use, you may need to instead use code similar that that used for ModalView below so that Kendo creates the subclass (changes: substitute View for ModalView, substitute view for modalview, add data-url, remove call to show(), maybe check that view not already created by checking for element with matching data-url). We haven't tested setting roles.view this way, but we did something similar while testing this stuff out and it worked.
Don't try settings the options - Kendo got confused (at least trying to set useNativeScrolling didn't work, also don't try setting the options object on the subclass unless you really know what you are doing).
Caveat: This was using browserHistory:false (which disables routing) when the kendo.mobile.Application was created. The technique should still work when using browser history if you use a valid url fragment (same as would be created by Kendo for the pushstate/hashchange url).
This is a also way to cleanly subclass kendo.mobile.ui.View that works well - although you must still use data-role=view even though your subclass is a "different" component. Note that you can't just use you cant use your own subclassed component with its own name like role=myview to subclass a view because there are hard-coded checks specifically for data-role=view in the kendo codebase. Same if you wish to subclass: layout modalview drawer splitview page (amongst other hard-coded kendo ui component names - search kendo code for kendo.roleSelector - ugly). e.g.
MyView = kendo.mobile.ui.View.extend({
init: function(element, options) {
kendo.mobile.ui.View.prototype.init.apply(this, arguments);
...
var myView = new MyView('<div data-role=view>test</div>');
Why it works: The relevant function in the Kendo source code is _findViewElement which does element = this.container.children("[" + attr("url") + "='" + urlPath + "']"); to see if the view already exists for a url, before creating a new one. A unique init function is always required as it ends up being the constructor function.
If you want to subclass a modalview, you need to do something different due to the way kendo works:
var MyModalView = kendo.mobile.ui.ModalView.extend({
html: '<div data-role=modalview style="width:90%;display:none;">Foobar</div>',
init: function() {
kendo.mobile.ui.ModalView.prototype.init.apply(this, arguments);
}
});
function makeModalView() {
$(document.body).append($.parseHTML(MyModalView.prototype.html));
var roles = $.extend({}, kendo.mobile.ui.roles);
roles.modalview = MyModalView;
var modalView = kendo.initWidget($(element), {}, roles);
modalView.open();
return modalView;
}
CheckBoxes="true" is set by default in a Telerik RadTreeView. But based on certain condition like if the resource id is 0 then the visibility of the check box must be set to false and the expand icon of the node must be hidden.
This can probably be done by:
iterating through the treeview nodes (when build), for example inside the NodeCreated event handler
locating the checkbox inside when node via the Controls collection
setting its visible property accordingly
you can use the Following:
public void DisabledCheckBox()
{
foreach (RadTreeNode n in RadTreeView.GetAllNode())
{
if( condition)
{
n.Checkable=false;
}
}
}
regards
So I know that one of the downsides of using jQuery.live is the unavailability of .stopPropagation(). But I need it badly.
Here's my use case. I have a checkbox is that is currently bound to a click. However, other checkboxes appear on-screen via an AJAX call, meaning I really need .live('click', fn). Unfortunately, the checkbox is situated atop another clickable element, requiring .stopPropagation(). This works fine with .bind('click', fn), but the inability to use it with .live() is hampering me. Using return false doesn't work as the checkbox will not be checked.
Any ideas on how to mimic .stopPropagation() when using .live() without returning false?
Instead of binding a .live handler to the checkboxes, bind a smarter event handler to the container, with behaviour dependent on which element is the target of the event.
$("#container").click(function(e) {
var ele = e.target;
if(ele.tagName.toLowerCase() == 'input'
&& ele.type.toLowerCase() == 'checkbox') {
e.stopPropagation();
// do something special for contained checkboxes
// e.g.:
var val = $(ele).val();
}
});
Here is something of an example to show how this can be used.