I have a dropdown with values-Name,MobileNumber and a input text-box related to the selected dropdown.
I want to limit the textbox entry values with only alphabet when Name is selected from the dropdown and only Numbers when MobileNumber is selected. This I am achieving by adding the below thing.
*
On(dom.byId("dropdownid"), "keypress", function(e)){
if(dom.byId("dropdownid").value=="Name"){
On(dom.byId("textboxid"), "keypress", function(e){
if(RegularExpressionAlphabetOnlyCondition == e.charCode){
Stopping the event using e.stopEvent();
}
});
}
if(dom.byId("dropdownid").value=="MobileNumber"){
On(dom.byId("textboxid"), "keypress", function(e){
if(RegularExpressionNumbersOnlyCondition == e.charCode){
Stopping the event using e.stopEvent();
}
});
}
});
*
Now on change of the dropdown value I am adding change event for dropdown and adding similar keypressevent with regularexpression condition of only numbers.
But its not working and accepting only alphabet still. It is apparently not replacing the already placed keypressevent.
How to remove the Keypress event in dojo for a textbox on change of a dropdown value?
The on Function returnes a handle
var h = On(dom.byId("textboxid"), "keypress", function(e){console.log("do Stuff"});
You can then use the handle to cancel it listener before doing a new one
if(h)h.remove();
Related
I am using in one of the lightning components and I am using it to filter a table. But when I'm trying to get its value in JS controller with the keyup function, it's giving one less value than actual.
This question has been already asked for HTML here , But for HTML, we have a solution that we can use onkeyup instead of keyup.
But in salesforce lightning, we don't have any onkeyup function for ui:inputText Source ,
So how to solve this issue?
I have already tried keypress, keyup, keydown.
All are giving one less value than actual one
Component :
<ui:inputText aura:id="search-phrase" class="slds-input" keyup="{!c.filterTable}" placeholder="Search Table" />
JS Controller :
, filterTable :function(component, event, helper) {
var dynamicVal = component.find("search-phrase");
var week = dynamicVal.get("v.value") ;
alert((week+'').toLowerCase());
var searchTerm = (week+'').toLowerCase() ;
$('#userTbl tbody tr').each(function(){
var lineStr = $(this).text().toLowerCase();
if(lineStr.indexOf(searchTerm) === -1){
$(this).hide();
}else{
$(this).show();
}
});
}
I found it's solution.
Just need to add updateOn="keyup" in <ui:inputText>
So new one will become :
<ui:inputText aura:id="search-phrase" class="slds-input" updateOn="keyup" keyup="{!c.filterTable}" placeholder="Search Table" />
Include updateOn attribute to ui:inputtext control. By default, it is mapped to change event so you will get only the exact value when the change event fires. updateOn="eventName"
event details : enter link description here
I have a kendo grid with filterable = true, mode=row.
I would like a way to have a button click, fire an event that will toggle hiding and showing the filter row.
Right now, I have it working by editing the innerHTML, but this is not what I want to do in the end, for several reasons.
1) I need to have a saved version of the filter row values before they are removed.
2) After they are removed and re-added they will not work
...
many other reasons, just bad practice and there has to be a better way.
A button that fires the event: toggleFilterClick:
<script type="text/x-kendo-template" id="gridFilter">
<button type="button" class="k-button" id="kendoFilterButton" data-click="toggleFilter"><span class="k-icon k-i-funnel"></span>Filter On/Off</button>
</script>
The Javascript code:
//Gets the innerHTML values before they are removed
var filterRowValues = $(".k-filter-row")[0].innerHTML;
//fired when the button is clicked
var toggleFilterClick = $('#kendoFilterButton').on("click", function () {
if ($(".k-filter-row")[0].innerHTML == '')
{
$(".k-filter-row")[0].innerHTML = filterRowValues;
}
else
{
$(".k-filter-row")[0].innerHTML = '';
}
});
Any thoughts suggestions would be appreciated/
I would just like to hide the actual filter row in the header
I'm not sure if i get the point but if you just want to hide it just simply remove everything except$(".k-filter-row").show(); and $(".k-filter-row").hide();. I create an example where when i hide the filter, the filter condtion will removed, but when it showed again the grid will refiltered with the previous value used to filter
$("#toggle").kendoButton({
click:function(){
if($(".k-filter-row").css("display") == "none"){
$(".k-filter-row").show();
//show again filter and execute previous filter condition
$("#grid").data("kendoGrid").dataSource.filter({field:"ShipName",operator:"contains",value:vm.get("filterOptions.ShipName").toString()});
$("#grid").data("kendoGrid").dataSource.filter({field:"OrderID",operator:"eq",value:vm.get("filterOptions.OrderID")});
}else{
//store the previous filter value
//autocomplete
vm.set("filterOptions.ShipName",$("input[data-role='autocomplete']").data("kendoAutoComplete").value());
vm.set("filterOptions.OrderID",$("input[data-role='numerictextbox']").data("kendoNumericTextBox").value());
//hide filter row
$(".k-filter-row").show();
//to reset filter of the grid when filterable hidden
$("#grid").data("kendoGrid").dataSource.filter({});
}
}
});
See the details in action
DEMO
Have you tried just hiding the row instead of removing it?
//fired when the button is clicked
var toggleFilterClick = $('#kendoFilterButton').on("click", function () {
if ($(".k-filter-row").is(":visible")){
$(".k-filter-row").hide();
}
else{
$(".k-filter-row").show();
}
});
Can Kendo-UI multiselect be use for input of user defined values?
By default when user clicks on multiselect control a dropdown is opened and user can select one of the predefined values. When user select one of the predefined values, that value is added to the selection.
What we need is a little bit different behavior. We would like to allow user to enter a custom string value, press enter key, and then that entered value would added to the selection.
One idea was to abuse multiselect control, by subscribing to the key events and adding user defined value to data source of the control, at which point we could (possibly) mark that value as selected (I am just guessing this, not sure if it would actually work).
So, is there an option value for this kind of behavior for multiselect or maybe some other control (does not have to be Kendo), so we don't have to hack existing kendo control?
As an example of the behavior I have create a quick [PoC here] (http://plnkr.co/edit/mcpVsstaxB2Xteh374pk?p=preview).
Here is the code from the plnkr
<script>
$(function() {
var input = $('input');
var list = $('ul');
input.on('keyup', function(e) {
if (e.which === 13) {
var value = $.trim(input.val());
if (value.length > 0) {
list.append($('<li/>'));
list.find('li:last').text(value);
var remove = $('<span class="remove"/>');
remove.html(' x');
list.find('li:last').append(remove);
remove = list.find('.remove:last');
remove.click(function() {
$(this).closest('li').remove();
});
input.val('');
}
}
});
});
</script>
I have a simple dropdown with two values.Lets say Staus:active and inactive.
During the onchange event, I want to perfrom some validation and revert back if the validation fails. Thai is if I change from active-inactive and my validation fails, I should change the dropdown back to active.
So far I am able to catch the on change event through the dataevents options of editOptions.
Below is my code, Thanks for the assist.
editoptions:{value:{Y:'Active',N:'Inactive'}, dataEvents:[
{
type: 'change',
fn: function(e) {
alert("inside change trigger");
$grid.setColProp('Status', { editoptions:{value:{Y:'Active',N:'Inactive'}}});
}
}
]}
I also read I have to set recreate form :true. I tried that also.
I would recommend you to consider to make the column non-editable or to readonly/disabled if the validation condition could be checked before editing will be started. It shows the user more clear that the field mayn't be changed.
Alternatively you can get savedRow parameter of jqGrid if you use inline editing mode or cell editing mode (with var savedRows = $(this).jqGrid("getGridParam", "savedRow")). To get the "old" data in case of form editing you can just get the data of selected row by using getGridParam with selrow (or alternatively from the hidden field of the form which have id="id_g". Something like var serRowId = $("#id_g").val();) and by using getRowData/getCell.
I have a basic checkbox click function that only allows the user to click only one checkbox within each fieldset (there are four fieldsets each containing numberous checkboxes:
$(document).ready(function(){
$('input[type=checkbox]').click(function(){
// get the fieldset class
var fieldset = $(this).parents('fieldset').attr('class');
// set the number of checked
var numChecked = $('.'+fieldset+' input:checked').size();
// if more than 1
if(numChecked > 1){
alert('Please select only one option per breakout session.')
$(this).attr('checked',false);
}
});
Then I have a submit function on the form that will confirm that at least one checkbox is selected before posting the form:
$('form[name=mainForm]').submit(function(){
var error = '';
// loop through each fieldset
$('fieldset',this).each(function(){
// set the number of checked for this fieldset
var numChecked = $('input:checked',this).size();
// if none are checked
if(!numChecked){
// set the error var
error = 'At least one of your time sessions has no checkbox selected!';
// add class to show user
$(this).addClass('errorSessions');
}
else{
$(this).removeClass('errorSessions');
}
});
// if any errors, show them and don't allow the form to be submitted
if(error.length){
alert(error);
return false;
}
$("#mainForm").validate();
The form validates perfectly and everything happens flawlessly the first time around. The problem is that if you submit the form, the validation occurs and it gives the error "At least one of your time sessions has no checkbox selected!" - at that point if you proceed to select multiple checkboxes within a given fieldset that was not initially checked, it will ignore the checkbox click function and allow you to select more than one checkbox in a fieldset.
Can someone please help with this?
Okay, I figured it out. The error has to do with the script adding the class 'errorsessions' to the fieldset which changes the unique classname of the fieldset. By adding a unique id to each fieldset and then changing the script to reference .attr('id'); instead of .attr('class'); the issue resolved and the on click alert function resumed after the class was added.
Do you consider using radio buttons as they are there for single selection? This way you don't have to check for multi selection as it isn't possible for select more than one radio button in given group.