have this code:
<TextField
v-model="lastname"
#textChange="ontextChange"
name="lastname"
/>
and i want get name from event:
ontextChange(args){
console.log(args.name)
}
but i thing it's wrong.
You are accessing the wrong attribute in the arguments. It's of type EventData, you must be looking for args.eventName.
Update:
If you want to access the actual TextField which triggered the event, args.object should work.
Related
This is the code I am using present, tried in many ways like used placeholder tags but nothing worked out. Help me
<kendo-grid-column field="food" title="foods">
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-string-filter-cell
[showOperators]="false"
[column]="column"
[filter]="filter">
</kendo-grid-string-filter-cell>
I tried this approach working now
Just put this piece of code in your component file
public placeHolders(){
$(".k-textbox").eq(0).attr("placeholder", "column 1");
$(".k-textbox").eq(1).attr("placeholder", "column 2");
$(".k-textbox").eq(2).attr("placeholder", "column 3");
}
There is no solution to write default placeholder in kendo-UI > kendo-grid-string-filter-cell as per my understanding.
I have the same problem with you and I cannot find an easy way to do it. The only way i can think to achieve this is below:
1) Create a Reusable Custom Filter Component from Kendo -> https://www.telerik.com/kendo-angular-ui/components/grid/filtering/reusable-filter/
2) Then add a TextArea Input as your filter input and there's the floatingLabel html element in order to use it like placeholder.
#Component({
selector: 'my-app',
template: `
<kendo-textbox-container floatingLabel="First name">
<textarea kendoTextArea></textarea>
</kendo-textbox-container>
`
I cannot find a way to do this by using the Built-In Filter Templates that Kendo UI provides.
I'm not 100% sure of your question. I'm using Vue, but here is how I am setting placeholder text when there are no records by setting the noRecords attribute.
<kendo-grid ref="gridComponent"
...
:no-records="noRecords"
...
v-on:change="rowSelected"
:sort="sortFilter">
In Vue, noRecords is a reactive data field, defined as:
data () {
return {
noRecords: {
template: '<br /><br/> Please start typing a Policy Number, Insured Name, or Address to show results <br /><br /><br />'
}
}
I got different reaction (output in console) when using inline delegate or when implementing a handler in #functions section. I don't understand why! Is that a bug or something is missing me?
<input type="text" onkeyup="#(e => Console.Write(e.Key))" />
It gives me immediate output in console.
But when I use a handler like this, I got nothing:
<input type="text" onkeyup="#showKey"/>
#functions{
void showKey(UIKeyboardEventArgs e){
Console.Write(e.Key);
}
}
Both don't work for me with your code. But do work when I change them to Console.WriteLine(e.key)
I guess Console.Write is not supported because browsers don't support this, Console.Writeline translates to console.log and Console.Write has nothing to translate to.
Currently I want to create a function to handle when user press Enter on Input field (sap.m.Input). I found this suitable function submit() in the API.
However it didn't work, I tried but nothing happen. I pressed enter but it does not call the responding function.
Here my code:
App.view.xml
<mvc:View controllerName="Test.controller.App" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<App>
<pages>
<Page title="{i18n>title}">
<content>
<Input submit='onSubmit'/>
</content>
</Page>
</pages>
</App>
</mvc:View>
App.controller.js:
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("Test.controller.App", {
onSubmit: function(oEvent){
console.log("Submitted");
}
});
});
I pressed enter but nothing showed in the console.
I'm looking for help from your expert experience. Is the submit() function does not work anymore? Is there another function to solve my question?
First of all submit is not a function, it's an event.
This event is fired when user presses the Enter key on the input.
So, function to be called when event is fired should be specified as this event's value in view.
View code:
<Input submit='onSubmit'/>
Controller code:
onSubmit: function(oEvent) {
console.log("Submitted");
}
I have an application where I am using ui-bootstrap-tabs. documentation here. With the ng-bs-daterangepicker.
The behavior I am observing is that whenever I put the daterangepicker inside the ui-tab. It is not able to catch the events attached to it.
But when I move that input tag outside the ui-tabs, it's able to catch the events associated with it.
I have created a working plunker to highlight my issue.
<body ng-app="myApp">
<div ng-controller="testController">
<uib-tabset>
<uib-tab index="0" heading="Drivers"></uib-tab>
<uib-tab index="1" heading="Charts">
<input class="btn btn-danger" type="daterange" id="daterange1" ng-model="dates" format="DD MMM" ranges="ranges" />
</uib-tab>
</uib-tabset>
<!-- <input class="btn btn-danger" type="daterange" id="daterange1" ng-model="dates" format="DD MMM" ranges="ranges" /> -->
</div>
</body>
Here there are two input tags. One inside the uib-tab and other outside it.
$scope.dates = {
startDate: moment().startOf('day'),
endDate: moment().endOf('day')
};
$scope.ranges = {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
'Last 7 days': [moment().subtract('days', 7), moment()],
'Last 30 days': [moment().subtract('days', 30), moment()],
'This month': [moment().startOf('month'), moment().endOf('month')]
};
$('#daterange1').on('apply.daterangepicker', function(ev, picker) {
console.log(picker.startDate);
console.log(picker.endDate);
});
The event apply.daterangepicker is not called when I activate the inside input button but is called when I activate the outside one.
My approach
I am guessing it's not a scope issue as highlighted in some posts. Because if it was that, then how come even the date is being populated.
Another thing could be the Known issue column which says
To use clickable elements within the tab, you have override the tab
template to use div elements instead of anchor elements, and replicate
the desired styles from Bootstrap's CSS. This is due to browsers
interpreting anchor elements as the target of any click event, which
triggers routing when certain elements such as buttons are nested
inside the anchor element.
maybe somehow this is stopping the event propagation. I am stuck at this point and can't think of a solution on how to fix it. Hoping the community would help here...
In case of $('#daterange1').on the object to which the event if getting attached must exist at the moment when .on() is invoked.
When daterangepicker is initialized inside Tabs component you could attach event like this:
$("body").on("apply.daterangepicker", "#daterange1", function(e,picker) {
console.log(picker.startDate);
console.log(picker.endDate);
});
Modified plunker
Hi I have a textArea and I have added a onkeyup event to it. When the event is triggered I want to update another element, by taking the input of the textArea and manipulating it in a javascript function. Here is my textArea tag:
<g:textArea name="translation" id="2" cols="40" rows="5" value="${domainInstance?.translation}"
onkeyup="${remoteFunction(
controller: 'domain',
action: 'ajaxChangeTranslation',
params:'\'text=\'+this.value',
onComplete:'updateEntry(e)')}" />
and here is my stub javascript function:
<g:javascript>
function updateEntry(e){
alert("Hi");
}
</g:javascript>
My javascript function is never getting called. I never see the alert when I type something into the textArea. If I place an alert outside of the function the alert shows up. Why is my javascript function not getting called. When I ran it with the chrome debugger I didn't get any errors.
Try this:
<g:textArea name="translation" id="2" cols="40" rows="5" value="${domainInstance?.translation}"
onkeyup="${remoteFunction(
controller: 'domain',
action: 'ajaxChangeTranslation',
params:'\'text=\'+this.value',
onComplete :'updateEntry(XMLHttpRequest,textStatus)')}" />