RadComboBox(autocomplete) is expanding dropdown list when focused. I want to prevent it when there is no text in autocomplete box.
I tried smth like this
function OnClientTextChange (sender, eventArgs) {
if (false && sender.get_text() == "") {
showDropDown(sender, null);
}
but "OnClientTextChange doesn't fire until the user hits Enter or clicks outside the combobox."
I need different way to prevent expanding dropdown when its text is empty.
I fixed it by reading json value which is generated and saved in hidden field
function OnClientDropDownOpening(sender, eventArgs) {
if ($("#RadComboBox1_ClientState").val() != "") {
var obj = jQuery.parseJSON($("#RadComboBox1_ClientState").val());
if (obj.text === "") {
sender.set_cancel(true);
}
} else {
eventArgs.set_cancel(true);
}
}
I assume the TextChanged event is referring to the autocomplete textbox? OnClientTextChanged fires from the client-side onblur event, which fires when another control receives the focus. You are looking for a key event, either keydown, keyup, or keypress. When a key event (keydown/keyup/keypress) fires in the autocomplete, you can then show the dropdown.
Related
I am using Telerik radscheduler when I move appointment then I want open a dialog box and after clicking yes or no, I want to go to OnAppointmentUpdate event.
function onAppointmentMoving(sender, eventArgs) {
debugger;
redgrd = sender;
eventArgs.set_cancel(true);
var appointment = eventArgs.get_appointment();
var confirmMessage = "Do you want to make this the patient's default Round?";
radconfirm(confirmMessage,
function (arg) {
debugger;
if (arg) {
//sender.updateAppointment(sender, eventArgs)
alert("ok");
}
else {
alert("Cancel");
}
})
}
I used the code in screen shot, but after eventArgs.set_cancel(true) I am not able to reach OnAppointmentUpdate event.
Calling eventArgs.set_cancel(true) means that you will cancel not only the AppointmentMoving event but also the flow. That's why the OnAppointmentUpdate event is not fired. Better try to call eventArgs.set_cancel(true) after you get the result from the confirm window.
Normally, you update the data bound to a datagrid item like this:
protected function onGridEditEnd(event:DataGridEvent):void
{
if (grid.dataProvider != null && event != null)
{
var editor:Object = event.currentTarget.itemEditorInstance;
if (event.columnIndex == getColumnIndex(columnA) {
collection[event.rowIndex].name = TextInput(editor).text;
}
}
}
The itemEditEnd event is dispatched right after the user finishes editing.
So, what if I want to
End the edit (from another method or handler other than itemEditEnd handler)
Update the value of the bound data item at the same time.
"while" the item is being edited by the user.
For example; how do I trigger this from a keyDown event handler?
Note: You could call onGridEditEnd(null) which would end the edit but not update the data. onGridEditEnd(new DataGridEvent(DataGridEvent.ITEM_EDIT_END, ...)) would work but you also need to store and pass values like columnIndex, rowIndex, dataField, etc.. which does not seem to be the best and simplest way.
thanks...
try setting editable property to false (then you can turn it back on).
Or you could try setting focus (FocusManager.focus = null) elsewhere. This way it will be still editable, but the user will have to click it again.
I use a ASP.NET Menu control with Orientation=Horizontal. It is kind of irritating that the popout menus appear on mouseover, which causes it to show by accident if you move the mouse over the menu when you want to click on something right below the menu. Then the menu popout hides the element you actually wanted to click on!
Is it possible to change the functionality so that the popout requires a mouse click instead of mouseover?
Well, I found a solution myself (kind of a hack...).
This solution requires use of AJAX to capture the menu item onclick postback event, so it can be picked up client side in javascript before doing the actual postback when you click the menu item.
First, I override these functions that is defined by the Menu control
to ignore the menu popout in the mouseover event:
var activeMenuItem = null;
function Menu_HoverStatic(item) {
// Register the active item to be able to access it from AJAX
// initialize postback event
activeMenuItem = item
// Apply the style formatting on mouseover (colors etc).
// This was also called in the original Menu_HoverStatic function.
Menu_HoverRoot(item);
}
function Menu_Unhover(item) {
activeMenuItem = null; // This is the only difference to the original
var node = (item.tagName.toLowerCase() == "td") ?
item:
item.cells[0];
var nodeTable = WebForm_GetElementByTagName(node, "table");
if (nodeTable.hoverClass) {
WebForm_RemoveClassName(nodeTable, nodeTable.hoverClass);
}
node = nodeTable.rows[0].cells[0].childNodes[0];
if (node.hoverHyperLinkClass) {
WebForm_RemoveClassName(node, node.hoverHyperLinkClass);
}
Menu_Collapse(node);
}
// Then I added a renamed copy of the original `Menu_HoverStatic` function:
function Menu_ClickStatic() {
// Pick up the active menu item that is set in the
// overridden Menu_HoverStatic function.
// In the original, the item was input parameter.
var item = activeMenuItem;
// The rest is identical to the original Menu_HoverStatic.
var node = Menu_HoverRoot(item);
var data = Menu_GetData(item);
if (!data) return;
__disappearAfter = data.disappearAfter;
Menu_Expand(node, data.horizontalOffset, data.verticalOffset);
}
Then I snap up the onclick postback event in AJAX that is triggered by the menu. This must be done to cancel the onclick postback and display the menu popout instead.
// Get the Page Request Manager that provides all the .NET
var prm = Sys.WebForms.PageRequestManager.getInstance();
// Register postback event for asyncronous AJAX postbacks
if (prm) prm.add_initializeRequest(InitializePostback);
function InitializePostback(sender, args) {
var element = args.get_postBackElement();
//Check if the postback element is the menu
if (element.id == 'myMenu') {
// Name of the menu element that triggered is the postback argument
var postbackArguments = document.getElementById('__EVENTARGUMENT');
if (postbackArguments)
// Check on the menu item name to pick up only the menu items that shall
// trigger the popout (not the items that does an actual command).
if (postbackArguments.value == 'MenuTopItem1'
|| postbackArguments.value == 'MenuTopItem2'
|| postbackArguments.value == 'MenuTopItem3') {
// Abort and cancel the postback
prm.abortPostBack();
args.set_cancel(true);
Menu_ClickStatic(); // Call my own copy of the original function
return;
}
}
}
Note:
I found out the details about these functions by using the script viewer in Firebug.
The soluton provided above doesn't work in everone's case. One can also try this out, it worked in my solution-
var jq = jQuery.noConflict();
jq(document).ready(function () {
jq(document).on('click', '#ctl_id_Here', function () {
Menu_HoverStatic(this);
Menu_HoverRoot(this);
});
jq(document).on('click', '#ctl_id_Here', function () {
Menu_HoverStatic(this);
Menu_HoverRoot(this);
});
});
3 Steps:
Stop the current hovering effects:
On page load (or on ready), write following line: $('#Menu1').find('ul .level2').css('display','none');
Once you do that, it'll stop the hovering effect of that menu. But once you do that, then you would only be able to open the submenu by making it display block, so for that I wrote following lines, onclick of an image inside the menu: $('#Menu1').find('ul .level2').css('display','block');
Open the menu on click of an element: I don't think need to explain it. Just make menu display block on click of the identified element.
Close the opened menu: 2 ways to do it: First; Use property Disapperafter as below:
Second: Write below code to close it onclick of anywhere else on the screen:
$('body').click(function(evnt) {
if($(evnt.target).parents('table#menu').length == 0)
{
$('#MenuInvitePatient').find('ul .level2').css('display','none');
return;
}
else
{
return;
}
});
Rather than assign to every buttons with MouseEvent, I assign to AIR application with:
private function init():void {
this.addEventListener(MouseEvent.MOUSE_DOWN,mpressKey);
}
However, I only want the mouse_down to execute if it detect a "button" property instead of Demo0.WindowedApplicationSkin2.Group3.contentGroup.g4 (g4 is an id).
Don't rely on event.target to check if a button was clicked or not. The target property is set to the innermost item that was clicked on. When you click on a button, you're not always clicking on The Button; you might be clicking on the text field that displays the label, or the background image if any, or some other child skinning part etc - the target will be set to this inner item.
If you want to have a single click handler for all buttons and take appropriate action based on the button clicked, you can assign same function as handlers for each button and check the event.currentTarget property; when an event handler is invoked, currentTarget is set to the object with which that handler was registered.
btn1.addEventListener(MouseEvent.CLICK, clickHandler);
btn2.addEventListener(MouseEvent.CLICK, clickHandler);
btn3.addEventListener(MouseEvent.CLICK, clickHandler);
public function clickHandler(e:MouseEvent):void
{
if(e.currentTarget == btn1){
/* Handle btn1 here */
}
else if(e.currentTarget == btn2){
/* Handle btn1 here */
}
else if(e.currentTarget == btn3){
/* Handle btn1 here */
}
}
When you add a single mouse handler using airApp.addEventListener, the currentTarget will always be your airApp and thus you can't use it to act as a single function to handle them all.
Are you asking how to test to see if the target is a Button, or a particular button?
If it's a Button
if ( e.target is Button ) { ... }
or if it's a particular button
if ( e.target == myButton ) { ... }
I have a hidden field on my page
<input runat="server" type="hidden" id="selectedIndex" />
and it is being set by this bunch of code, an onclick event to a gridview's row:
var gridViewCtlId = '<%=GridView.ClientID%>';
var selectedIndex = '#<%=selectedIndex.ClientID%>';
var itemVisible = '<%=ItemVisible.ClientID%>';
var gridViewCtl = null;
var curSelRow = null;
var previousRowIndx = null;
window.onload = function showQuery()
{
if ($(selectedIndex).val() != undefined)
{
if ($(selectedIndex).val() != '')
{
var prevRowID = $(selectedIndex).val();
var prevRow = getSelectedRow(prevRowID);
prevRow.style.backgroundColor = '#1A8CD4';
}
}
}
function getGridViewControl(rowIdx)
{
if (gridViewCtl == null)
{
gridViewCtl = document.getElementById(gridViewCtlId);
}
}
function onGridViewRowSelected(rowIdx)
{
if (document.getElementById(gridViewCtlId).disabled == false)
{
var selRowCCA = getSelectedRow(rowIdx);
if (curSelRow != null)
{
var previousRow = getSelectedRow(previousRowIndx);
var CountIdx = previousRowIndx % 2;
if (document.getElementById(itemVisible) == null)
{
if (CountIdx == 0)
{
previousRow.style.backgroundColor = 'Silver';
}
else
{
previousRow.style.backgroundColor = 'White';
}
}
}
if (null != selRow)
{
previousRowIndx = rowIdx;
curSelRow = selRow;
selRow.style.backgroundColor = '#1A8CD4';
}
}
}
function getSelectedRow(rowIdx)
{
getGridViewControl(rowIdx);
if (gridViewCtl != null)
{
$(selectedIndex).val(rowIdx);
return gridViewCtl.rows[rowIdx];
}
return null;
}
This is what happens: When The page first loads, the hidden field is undefined, which it should be. When I click on a row and then click the 'select' button which then calls this:
GridView.Attributes.Add("disabled", "true");
The gridview becomes disabled (along with the select button) and another gridview comes up (which should happen depending on what is seleted in the first gridview). So now, here is the problem. When I click on a row in the gridview (I'm only talking about the initial gridview, not the secondary one which comes up, that's not an issue here), and click select, everything gets greyed out and most of the time, the selected row will highlight when the page loads (the other times for some reason it defaults to row #2). Then, say you click on row 4 then click on row 1 and then click select, for some reason row 4 will remain highlighted and row 4's data will then populate the second gridview, like you never clicked row 1. But if I click row 4 then click row 1 then click row 1 again, does it save. Does anyone know why that happens?
Also, I'm pretty much trying to disable the first gridview when select is hit so I do
GridView.Attributes.Add("disabled", "true");
rather than
GridView.Enabled = false;
If a user re-clicks the search button (another button located previously on the page which makes this gridview become visible), I would like the secondary gridview to become hidden, and the primary gridview (this one in question) to become re-enabled. But doing
GridView.Attributes.Add("disabled", "false");
when the search button is fired only disables the gridview, which is very weird. Now I know that the disabled field is not supported by any other browser except IE, and i only use it because I need to check if the gridview is disabled so a user cant click on another row after they've made their selection (which happens if I dont do the following:
if (document.getElementById(gridViewCtlId).disabled == false)
So could anyone let me know of another way of accomplishing that task? Thanks again in advance.
Some bits of info on disabled:
Browsers won't send any disabled control's value to the server. This is by definition.
Disabled field is supported by other browsers, but it uses a different model. Note list of supported browsers: http://www.w3schools.com/tags/att_input_disabled.asp (also how it is defined disabled='disabled').
Also see how it compares to the read-only: http://www.w3.org/TR/html401/interact/forms.html#h-17.12.2
Also note according to the standard its support its limited to certain elements. This is important, as you are applying it at an unsupported html element, which is also a likely cause of it not working in other browsers in your scenario. You can disable the supported control by using an script, getting the controls to apply it like $get("someClientID").getElementsByTagName("input");