I'm using MVVM in kendo ui. I've seen many examples of using a template to bind lists but I can't find a working example where I bind a single variable to a view item.
I found the following fiddle but its not showing the items in the dropdown. Is there a bug with the code or something else going on?
View:
<div class="form">
<dl>
<dt>Type</dt>
<dd>
<select data-role="dropdownlist" data-bind="source: type, value: expenseType" data-text-field="name" data-value-field="value" ></select>
</dd>
<dt>Merchant</dt>
<dd><input id="merchant" type="text" class='k-textbox' data-bind="value: merchant" /></dd>
<dt>Amount</dt>
<dd><input data-role="numerictextbox" data-bind="value: amount" id="amount" type="text" /></dd>
</dl>
<dt> </dt>
<dd><button id="create" data-bind="click: create" class="k-button">Add</button></dd>
</div>
<div class="span4">
<div data-role="grid" data-sortable="true" data-bind="source: expenses" data-columns='["Type", "Merchant", "Amount"]' ></div>
</div>
ViewModel:
var viewModel = kendo.observable({
// expenses array will hold the grid values
expenses: [],
// type array populates the drop down
type: [{ name: "Food", value: "food"}, { name: "Clothing", value: "clothing"}, { name: "Bills", value: "bills" }],
// expenseType holds the currently selected value of the dropdown list
expenseType: "food",
// the values are bound to the merchant and amount fields
merchant: null,
amount: null,
// event execute on click of add button
create: function(e) {
// add the items to the array of expenses
this.get("expenses").push({Type: this.get("expenseType"), Merchant: this.get("merchant"), Amount: this.get("amount")});
// reset the form
this.set("expenseType", "food");
this.set("merchant", "");
this.set("amount", "");
}
});
// apply the bindings
kendo.bind(document.body.children, viewModel);
https://www.telerik.com/blogs/bind-this-a-look-at-kendo-ui-mvvm
https://jsfiddle.net/burkeholland/NqSuS/6/
The fiddle is broken and the libraries are old. I updated jquery and the CDNs and now the fiddle works:
https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2018.2.516/styles/kendo.blueopal.min.css" />
https://jsfiddle.net/cyufwLea/
Related
in a svelte/sapper form I want to send data to a user model
<input type="text" bind:value={user.label}>
..works as expected. But how to send user.offer_ids
let offer_ids = [];
{#each offers as offer}
<label>
<input type=checkbox bind:group={offer_ids} value="{offer.id}">{offer.label}
</label>
{/each}
I can't find any svelte sample how to do this job, which I think is basic in forms.. Thanks for help
May be it was unclear..I want to send data to Json:
<form>
<input type="text" bind:value={user.label}> //gives data to 'user'
{#each offers as offer}
<label>
<input type=checkbox bind:group={offer_ids} value="{offer.id}">{offer.label}
</label>
{/each}
//how to get all selected ids to 'user'
</form>
Hope this is more clear now.
With checkboxes, we bind to checked instead of value:
<script>
let name = 'world';
let flag = false
</script>
<style>
.highlighted {
color: red
}
</style>
<h1 class:highlighted={flag}>Hello {name}!</h1>
<label for="checkbox">Highlight header</label>
<input id="checkbox" type='checkbox' bind:checked={flag}/>
Edit
The offer model should have a selected or checked state. Then you can bind the checkbox to that:
<script>
let name = 'world';
let offers = [
{id: 1, name: 'One', checked: false},
{id: 2, name: 'Two', checked: false},
{id: 3, name: 'Three', checked: false},
]
</script>
{#each offers as offer, index (offer.id)}
<label for={'checkbox'+offer.id}>{offer.name}</label>
<input id={'checkbox'+offer.id} bind:checked={offer.checked} type='checkbox'/>
{/each}
<div>
{offers.filter(offer => offer.checked).map(offer => offer.name)}
</div>
Here, we display three checkboxes and the text below prints the names of the selected offers on the screen.
REPL: https://svelte.dev/repl/461fea432dc54ed0a744afc4e05bf34b?version=3.22.3
so my solution now:
let offer_ids = [];
<form>
{#each offers as offer, i (offer.id)}
<label>
<input type=checkbox bind:group={offer_ids} value="{offer.id}">{offer.label}
</label><br/>
{/each}
</form>
enter code here
and in the function...
async function publish() {
user.offer_ids = offer_ids
const response = await (api.post('users', {user}));
I am creating a Todo Application using Vue.js, Express.js, and MongoDB.
I want to change the state of the fields that appear as v-for through the checkbox.
The code I want is to change the state of the text when the checkbox is checked and to show another element with v-if.
Here is the code I wrote: But it does not work.
If I have the wrong code, please help me.
List Component
<template>
<div class="todos">
<div v-for="todo in todos" v-bind:key="todo._id" class="todo">
<div>
<input type="checkbox" v-model="todo.done" v-on:click="completeTodo(todo)">
<del v-if="todo.done">{{todo.title}}</del>
<strong v-else>{{todo.title}}</strong>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
todos: {}
}
},
created () {
this.$http.get('/api/todos')
.then((response) => {
this.todos= response.data
})
},
methods: {
completeTodo (todo) {
todo.done = !todo.done
}
}
}
</script>
You don't need v-on:click="completeTodo(todo)". v-model is already doing the trick for you. Also, the todos in your code should be defined and instantiated as array not an object.
v-model is used for two way data binding. That means, whatever data you pass from your code will be bound to the checkbox value in this case and whenever a change is made from UI and value of checkbox is altered by user, that will be captured in v-model variable. v-model is a combo of :value prop and #change event in case of checkbox, hence, it is able to update data in both the ways.
Please refer this snippet.
var app = new Vue({
el: '#app',
data: {
todos: [
{
id: 1,
title: 'Study',
done: false
},
{
id: 2,
title: 'Work',
done: false
},
{
id: 3,
title: 'Play',
done: false
}
]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="todos">
<div v-for="todo in todos" :key="todo.id">
<div>
<input type="checkbox" v-model="todo.done"/>
<del v-if="todo.done">{{todo.title}}</del>
<strong v-else>{{todo.title}}</strong>
</div>
</div>
</div>
</div>
I'm building a registration form, and have to handle multiple checkboxes generated through *ngFor structural directive.
Template:
<div class="form-group">
<label class="col-lg-3 control-label">Response Type</label>
<div class="col-lg-7">
<div class="checkbox" *ngFor="let type of client.responseTypes; let i = index">
<label>
<input type="checkbox" name="responseTypes" [(ngModel)]="client.responseTypes[i].checked" /> {{type.value}}
</label>
</div>
</div>
</div>
TS model object:
client.responseTypes = [
{ value: 'type1', checked: false},
{ value: 'type2', checked: true },
{ value: 'type3', checked: true }
];
The actual values behind the scene checked or unchecked are stored correctly. But, the checkboxes do not show the correct value.
If one of the three objects.checked == false, all checkboxes will show unchecked
Only if all three objects.checked == true, all three will be checked in the form.
I tried fiddling with [value]="client.responseTypes[i].checked" and [checked]="client.responseTypes[i].checked" on the input element, but to no success.
Any pointers in the right direction are massively appreciated.
Regards, Chris
the syntax is ok, well, you can do too
<input type="checkbox" name="responseTypes" [(ngModel)]="type.checked">
the problem is in other place (when you defined the client -I think you write some like this.client.responseTypes=...-), you can write
{{client |json }}
to check it
Alright after trying to wrap my head around why my local application wasn't showing the result I wanted, I started to copy and paste my form-group out of the <form></form> element it was in.
Ta-daa, it works now.
FYI: Placing *ngFor checkboxes inside a <form></form> element results in unwanted behaviour.
In angular every model bind with name , means you need to give unique name to each Form elements`
For Example:
<div class="form-group"><label class="col-lg-3 control-label">Response Type</label>
<div class="col-lg-7">
<div class="checkbox" *ngFor="let type of client.responseTypes; let i = index">
<label>
<input type="checkbox" name="type.id" [(ngModel)]="client.responseTypes[i].checked" /> {{type.value}}
</label>
</div>
</div>
</div>
Object :
client.responseTypes = [{id: '1', value: 'type1', checked: false},
{id: '2', value: 'type2', checked: true },
{id: '3', value: 'type3', checked: true }];
And now Check :) Thank you
I have an objects array
pets = [{key: 'dog', isChecked: true}, {key: 'hamster', isChecked: false}, {key: 'cat', isChecked: false}];
and display it like checkboxes
<div *ngFor='let pet of pets'>
<input type='checkbox'
name='pets'
value='{{pet}}'
[(ngModel)]='pet.isChecked'
(change)='check()'
/>
{{pet.key}} - {{pet.isChecked}}
</div>
but as soon as I start putting it inside a form
<form>
<div *ngFor='let pet of pets'>
<input type='checkbox'
name='pets'
value='{{pet}}'
[(ngModel)]='pet.isChecked'
(change)='check()'
/>
{{pet.key}} - {{pet.isChecked}}
</div>
</form>
It stops displaying correctly.
How can I make this work with a form?
Plunkr link
and
Plunkr link with a form
HTML :
<form>
<div *ngFor='let pet of pets'>
<input type='checkbox'
name='pets'
id="pets{{getRandom()}}"
[ngModel]="pet.isChecked"
value='{{pet}}'
(click)="$event.stopPropagation(); check();"/>
{{pet.key}} - {{pet.isChecked}}
</div>
</form>
TS :
function getRandom() {
return Math.random() * 1000;
}
can you tell me how to assign a value of a dynamic amount of forms with input-field to a MVVM-Property in a template. The examples of the official Documentation is always binding to a property to the binded dataSource. I don't want to use the datasource properties, because ill have a more complex datasource, so i don't want to send the whole object to the server, only the entered Values! I want to it Like this:
<div id="example" data-template="template" data-bind="source: arr"></div>
<script id="template" type="text/x-kendo-template">
<div>
<div> Age: ${age}</div>
<input type="text" data-bind="value: inputs"/>
<h1 data-bind="text: inputs"></h1>
<span data-bind="click: show">click</span>
</div>
</script>
var arr = new kendo.data.ObservableArray([
{ name: "John Doe", age: 23 },
{ name: "Jane Doe", age: 34 }
]);
var viewModel = kendo.observable({
arr: arr ,
inputs:"asdas",
show: function(){alert(viewModel.get('inputs'));}
});
kendo.bind($("#example"), viewModel);
You will see that the inputs property don't get the entered value. What is the correct way to do it?
Thank
Here is your updated code
<div id="example" data-template="template" data-bind="source: arr"></div>
<script id="template" type="text/x-kendo-template">
<div>
<div> Age: ${age}</div>
<input type="text" data-bind="value: name"/>
<h1 data-bind="text: name"></h1>
<span data-bind="click: show">click</span>
</div>
</script>
var arr = new kendo.data.ObservableArray([
{ name: "John Doe", age: 23 },
{ name: "Jane Doe", age: 34 }
]);
var viewModel = kendo.observable({
arr: arr ,
inputs:"asdas", // Binding with this is also working
show: function(e){alert(e.data.name);}
});
kendo.bind($("#example"), viewModel);
Working in this fiddle link: http://jsfiddle.net/iamsalik/pk7jr1x1/1/