<input data-bind="kendoDropDownList: { data:$root.brands,
value: BrandID,
dataTextField: 'Name',
dataValueField: 'BrandID'},
event: { change: $root.saveItem }" />
Does anyone know why wouldn't the change event fire if this is inside a kendo window??
I am using knockout-kendo.js.
For Change Event Firing
<input data-bind="kendoDropDownList:{ data :$root.brands,
value :BrandID,
dataTextField :'Name',
dataValueField :'BrandID',
change :$root.saveItem}"/>
Here is sample of change event firing
Related
I've been toying around with this for a while to no avail.
When the user inputs a date manually into the text field, that onChange event fires and everything works as I want it to. When the user clicks on a date from from datepicker, nothing at all happens.
I'm still getting used to using MUI fields in Controllers to suit React Hook Form, but I'm not sure what I'm doing incorrectly.
const { handleSubmit, control, register } = useForm();
const [selectedDate, setSelectedDate] = React.useState(null);
const handleDateChange = (date) => {
console.log(date)
setSelectedDate(date);
};
<form onSubmit={handleSubmit(submitForm)}>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<Controller
control={control}
name={"newEffectiveDate"}
defaultValue={null}
render={() => (
<KeyboardDatePicker
inputVariant="outlined"
disableToolbar
format="MM/dd/yyyy"
margin="normal"
id="date-picker-inline"
label="Date picker inline"
value={selectedDate}
onChange={date => handleDateChange(date)}
KeyboardButtonProps={{
"aria-label": "change date",
}}
/>
)}
/>
</MuiPickersUtilsProvider>
</form>
Any help would be much appreciated!
Turns out, I just needed to add the autoOk prop to the KeyboardDatePicker component...
I have an input box as you can see in the code below.
The data inside the input box is set using model#setProperty, but my onValueChange gets triggered only when I enter the value directly into the input box. It's not triggered when the value is manipulated via binding.
<!-- ... -->
<table:Column xmlns:table="sap.ui.table">
<Label xmlns="sap.m" text="{i18n>ItemCode}" required="true" />
<table:template>
<Input value="{model1>itemCd}" change=".onValueChange" />
</table:template>
</table:Column>
<!-- ... -->
onValueChange: function(oEvent){
console.log("inside function onValueChange");
},
Try with liveChange beacause from library doesn't exist event change, but event liveChange. Perhaps is deprecated?
As #Marc mentioned change event is part of the Input, not of the model. So it is only triggered if you change the actual Input and not the bound value. Its true but there is a workaround for it.
You can achieve it using input fireLiveChange event and formatter.
View.xml
<Input value="{path: 'ipModel>/text', formatter: 'assets.util.Formatter.triggerLiveChange'}"
liveChange="ipLiveChange" />
Controller.js
onInit: function() {
this.setInputModel();
},
setInputModel:function() {
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({ text: "Test Value"});
this.getView().setModel(oModel, "ipModel");
},
ipLiveChange: function(oEvent) {
console.log("LiveChange triggered!!");
}
Formatter.js
jQuery.sap.declare("assets.util.Formatter");
assets.util.Formatter = {
triggerLiveChange: function (value) {
this.fireLiveChange();
return (value);
}
};
I have multiple form in a Screen. Need to submit form while onBlur event calling without using ref, because i have multiple and dynamic forms.
You may add onBlur event, get access to DOM-element Form and then do submit 'form.submit()':
const myForm = () =>
<input onBlur={(e) => {
// if click occurs outside of element
if(!e.relatedTarget || (e.target.form !== e.activeTarget))
//attention: your page will reload every such instant submission
e.target.form.submit();
}
}} ... (other props) >
...
</form>
Or you need to use
<form onSubmit={(e) => {
e.preventDefault();
...
}>
<input onBlur={(e) => {
...
e.target.form.requestSubmit();
} />
...
the detail of this solution are here Here is my question
I am programmatically rendering multiple SelectField and DropDownMenu components. I am trying to work with a single onChange handler functions, but I'm have not found a way to reference specific SelectField / DropDownMenu that triggered the event so I can update state accordingly.
The params passed for the onChange event seem not to contain any helpful information to identify the firing components. Any ideas?
Here's an example of how this can be done
https://jsfiddle.net/davidebarros/k9ng7bk9/
This is assuming you are familiar with the es6 arrow function syntax.
state = {
dropDown1: 1,
dropDown2: 4,
selectfield1: null,
selectfield2: null
}
onChange = (type) => (event, index, value) => {
this.setState({
[type]: value
})
//In your render method
<SelectField
floatingLabelText="Select Field 1"
value={this.state.selectfield1}
onChange={this.onChange("selectfield1")}>
<MenuItem value={1} primaryText="Select 1, value 1" />
<MenuItem value={2} primaryText="Select 1, value 2" />
</SelectField>
I am using Kendo UI Grid and I have configured it to use popup editing with custom template
<script id="popup_editor" type="text/x-kendo-template">
<div id="editor">
<div class="k-edit-label">
<label for="Type">Type</label>
</div>
<select data-role="dropdownlist" data-value-field="Type" data-text-field="Type"
data-bind="source: typeSource, value: selectedProduct"></select>
<div class="k-edit-label">
<label for="Type">Option</label>
</div>
<select data-role="dropdownlist" data-value-field="Option" data-text-field="Option"
data-bind="source: productsSource.Options, value: selectedOption"></select>
</div>
</script>
This is my ViewModel:
function ViewModel() {
var getTypesUrl = "/Controller/Action";
var viewModel = kendo.observable({
typeSource: new kendo.data.DataSource({
transport: {
read: {
url: getConditionTypesUrl,
dataType: "json"
},
},
batch: true,
schema: {
model: {
id: "Type"
}
}
}),
selectedType: null,
selectedOption: null
});
kendo.bind($("#editor"), viewModel);
}
ViewModel();
My action returns JSON.
The problem is that when I click on the "Add new record" button, there is no call to the getTypesUrl and the dropdownlist is not populated. The general idea is to have different options for different types and to populate the Option dropdownlist depending on the selected type. I believe, that the problem occurs because the editor is showed only when the button is clicked and the kendo can not create the bindings.
If the Drop down list is the same for each row get its values from the Data Source and store these in a variable in the page in JavaScript and point the Drop Down list at this new Data Source. Use some JavaScript to associate the id and name.
Alternatively if this is loaded based on some other logic implement a separate call to populate the Data source for the drop down list in your view model.
http://www.aspnetwiki.com/page:introduction-to-kendo-mvvm
http://www.aspnetwiki.com/page:kendo-mvvm-ui-grid
Further note your can write your template purely in JavaScript and bind this to the html, advantage of which is you can debug it and it can still be loaded by an ajax call later and it is likely going to be smaller.