Develop Reference

Kendo UI multiselect text of selected values

i have a problem. Right now I have a normal Kendo-Ui Multiselect which doesn´t work.
You can choose those values: 1
The problem is the following. When you select one or more values, the name of the selected values wouldn´t shown in the input field. There is only an empty box. 2
Here is one part of my code:
<div class="col-md-3">
<fieldset>
<div class="form-group">
<label class="control-label">Assigned Attributes</label>
<div class="demo-section k-content">
<select id="dropdownAttributes"></select>
</div>
</div>
</fieldset>
</div>
And the other one:
var days = [
{ text: "First", value: "1" },
{ text: "Second", value: "2" },
{ text: "Third", value: "3" },
{ text: "Fourth", value: "4" },
{ text: "Fifth", value: "5" }
];
$("#dropdownAttributes").kendoMultiSelect({
dataTextField: "text",
dataValueField: "value",
dataSource: days,
height: 200,
filter: "contains"
});
Can somebody help me with this problem?

VueJS: Getting dynamic checkbox values in VueJS 2

I am using VueJS 2 and Vuetify to build the subscription form below. Where all the preferences applicable for a subscription are fetched from the server and displayed. Preferences in the image are for digital magazine subscription. For a print magazine subscription preferences might be different.
The data fetched from server looks like this
preferences: [
{
id: "1",
title: "Subscription frequence",
options: ["Daily", "Weekly", "Fortnight", "Monthly"]
},
{
id: "2",
title: "Topics",
options: ["Sports", "Politics", "Art", "Music", "Health", "Tech"]
},
{
id: "3",
title: "Promotional Offers",
options: ["Daily", "Weekly", "Fortnight", "Monthly", "Never"]
}
]
I have used v-for to display preferences like below:
<v-col
v-for="pref in preferences"
:key="pref.id"
>
<span>{{ pref.title }}</span>
<v-checkbox
v-for="option in pref.options"
:key="option"
:v-model="pref.options"
:label="option"
color="red"
value="option"
hide-details
>
</v-checkbox>
</v-col>`
Now, since all the preferences have the same options array, I am not able figure how to differentiate one checkbox group from another. And therefore get the selected checkbox for each preference group.
Any tips much appreciated. Thanks.
UPDATE
This works for input type as shown in #palash answer. But is not working for Vuetify v-checkbox.

Add a selectedOption key in preferences objects.
preferences: [
{
id: "1",
title: "Subscription frequence",
options: ["Daily", "Weekly", "Fortnight", "Monthly"],
selectedOption: []
},
{
id: "2",
title: "Topics",
options: ["Sports", "Politics", "Art", "Music", "Health", "Tech"],
selectedOption: []
},
{
id: "3",
title: "Promotional Offers",
options: ["Daily", "Weekly", "Fortnight", "Monthly", "Never"],
selectedOption: []
}
]
<v-checkbox
v-for="option in pref.options"
:key="option"
:v-model="pref.selectedOption"
:label="option"
color="red"
value="option"
hide-details
>

First, try to add an empty selected array to each object inside preferences array:
preferences: [{
id: "1",
title: "Subscription frequence",
options: ["Daily", "Weekly", "Fortnight", "Monthly"],
selected: []
},
{
id: "2",
title: "Topics",
options: ["Sports", "Politics", "Art", "Music", "Health", "Tech"],
selected: []
},
{
id: "3",
title: "Promotional Offers",
options: ["Daily", "Weekly", "Fortnight", "Monthly", "Never"],
selected: []
}
]
Next, in the template update the v-checkbox model from:
:v-model="pref.options"
to
:v-model="pref.selected"
Now, you can easily see the selected options in each preference like:
For Subscription frequence:
this.preferences[0].selected
For Topics:
this.preferences[1].selected
For Promotional Offers:
this.preferences[2].selected
Simple Demo:
new Vue({
el: '#app',
data: {
selected: [],
roles: [{id:1,name:"Client"},{id:2,name:"Admin"},{id:3,name:"Guest"}]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="role in roles" :key="role.id">
<label>{{role.name}}</label>
<input type="checkbox" v-model="selected" :value="role"/>
</div>
<p>Selected Roles:</p>
{{selected}}
</div>
Complex Demo:
new Vue({
el: '#app',
data: {
preferences: [{
id: "1",
title: "Subscription frequence",
options: ["Daily", "Weekly", "Fortnight", "Monthly"],
selected: []
},
{
id: "2",
title: "Topics",
options: ["Sports", "Politics", "Art", "Music", "Health", "Tech"],
selected: []
}
]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="pref in preferences" :key="pref.id">
<h3>{{pref.title}}:</h3>
<div v-for="option in pref.options" :key="option">
<label>{{option}}</label>
<input type="checkbox" v-model="pref.selected" :value="option" /><br>
</div>
<p>Selected {{pref.title}}:</p>
{{pref.selected}}
<br><br><hr/>
</div>
</div>

Vue: Displaying nested data in a table

I'm in the process of rewriting some older code, and using Vue as the replacement. It's all going great apart from changing one table that is templated using handlebars.
Using handlebars nested {{each}} I can work down through the nested data structure while displaying the relevant data in table rows: e.g. using handlebars: https://jsfiddle.net/6dsruo40/1/
I cant figure out how to do the same using Vue with v-for etc.
Fiddle with as mush as I have: https://jsfiddle.net/cj7go6bv/
I don't know how to work through the data structure while maintaining the <tr>s like in handlebars
This is the data structure I'm using, but it is flexible:
var data = [
{
key: "Region 1",
values: [
{
key: "Sub region 1",
values: [
{
site: "Site A",
timestamp: 1507246300935,
total: 3,
},
{
site: "Site B",
timestamp: 1507246300818,
total: 0,
},
{
site: "Site C",
timestamp: 1507246300936,
total: 0,
}
],
},
{
key: "Sub region 2",
values: [
{
site: "Site A",
timestamp: 1507246301442,
total: 20,
},
{
site: "Site B",
timestamp: 1507246301788,
total: 5,
}
]
},
{
key: "Sub region 3",
values: [
{
site: "Site A",
timestamp: 1507246302503,
total: 66,
},
{
site: "Site B",
timestamp: 1507246302783,
total: 2
}
]
}
]
},
{
key: "Region 2",
values: [
{
key: "Sub region 1",
values: [
{
site: "Site A",
timestamp: 1507246306789,
total: 0,
},
{
site: "Site B",
timestamp: 1507246307439,
total: 6,
}
]
},
{
key: "Sub region 2",
values: [
{
site: "Site A",
timestamp: 1507246308269,
total: 10,
},
{
site: "Site B",
timestamp: 1507246308683,
total: 30,
}
]
}
]
}
];
The Vue code I have is very modest so far:
Vue.component('project-table', {
template: '#table-template',
props: {
data: Array
}
});
var app = new Vue({
el: '#table-container',
data: {data: sites},
});
And the template:
<div id="table-container">
<project-table :data="data"></project-table>
</div>
<script id="table-template" type="text/x-template">
<table class="u-full-width">
<thead>
<tr>
<th>Project location</th>
<th>Total</th>
<th>Timestamp</th>
</tr>
</thead>
<tbody>
<tr class="name-row" v-for="item in data">
<th class="name" colspan="3">{{item.key}}</th>
</tr>
<tbody>
</table>
</script>
What is the mechanism in Vue for displaying a table like is done in Handlebars? Thanks!

Here is the relevant part of the template updated.
<tbody>
<template v-for="item in data">
<tr class="name-row" >
<th class="name" colspan="3">{{item.key}}</th>
</tr>
<template v-for="subregion in item.values">
<tr>
<th class="group-name" colspan="4">{{subregion.key}}</th>
</tr>
<tr v-for="site in subregion.values">
<td>{{site.site}}</td>
<td>{{site.total}}</td>
<td>
<span>{{site.timestamp}}</span>
</td>
</tr>
</template>
</template>
<tbody>
And the updated fiddle.
The main point is taking advantage of the template element to render more than one tr per iteration.

Use checkbox to select item Angular JS

I want to be able to have a list of items and to select one using a checkbox:
<div data-ng-repeat="device in devices">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> {{ device.name }}
</label>
</div>
</div>
</div>
If this can be done using a custom directive that would also be cool!
So the idea, that when a checkbox is checked the device would go into an ng-model and all the other checkboxes would be disabled.
I have a feeling there needs to be a custom model created, something like:
devices = [{
name: "LED",
checked: false,
id: "98"
},{
name: "LED 2",
checked: false,
id: "8"
},{
name: "LED 3",
checked: false,
id: "78"
}]
Just need some function to fire each time one checkbox is checked.
I expect that it can be done with a ng-click on the checkbox? And a two way data binding on the model for canBeChecked
devices = [{
name: "LED",
checked: false,
id: "98",
canBeChecked: true
},{
name: "LED 2",
checked: false,
id: "8",
canBeChecked: true
},{
name: "LED 3",
checked: false,
id: "78",
canBeChecked: true
}]

Iterate over your collection and display a checkbox for each:
<div ng-repeat="device in devices">
<label>
{{ device.name }}
<input type="checkbox" ng-model="device.checked" ng-click="change(device)">
</label>
</div>
Note that the checkbox also has the ng-click directive. This is what you want to trigger each time a checkbox is clicked. The triggered function clears all checkboxes and only checks the clicked one. The checkboxes should now behave like radio buttons.
Your controller might look like this:
app.controller("MyCtrl", ["$scope", function($scope) {
$scope.devices = [{
name: "LED",
checked: false
}, {
name: "LED 2",
checked: false
}, {
name: "LED 3",
checked: false
}];
$scope.change = function(device) {
angular.forEach($scope.devices, function(item) {
item.checked = false;
});
device.checked = true;
};
}]);
It is not necessary to create the canBeChecked property you mention.
Here's the full working example: http://jsfiddle.net/zxdr8/

If you must use checkboxes, here is how you would do it.
Markup:
<div data-ng-repeat="device in devices">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="device.checked" ng-change="checkDevice(device)"> {{ device.name }}
</label>
</div>
</div>
</div>
Controller:
$scope.devices = [{
name: "LED",
checked: false,
id: "98"
},{
name: "LED 2",
checked: false,
id: "8"
},{
name: "LED 3",
checked: false,
id: "78"
}];
$scope.checkDevice = function (device) {
for (var i = 0, len = $scope.devices.length; i < len; ++i) {
if ($scope.devices[i] !== device)
$scope.devices[i].checked = false;
}
});

Your checked and canBeChecked properties seems like merely an UI thing. In my opinion, you should not be creating a custom data models and duplicating unnecessary properties just to do that. Believe me, I did things like that too when started using Angular, but there are much better ways.
Consider storing selected data in other location (model, service, controller, whatever). And maybe if you can store just an ID (primitive property), you can do your "checkbox-radio-like-element" like this:
<div ng-repeat="device in devices">
<label>
<input type="checkbox" ng-true-value="{{device.id}}" ng-false-value="" ng-model="some.storage">
{{device.name}}
</label>
</div>
And thats all you need, no background code needed. When Angular team implements interpolation support for ngTrueValue and ngFalseValue directives, you will be able to store the whole objects and reset model to e.g. null.

AngularJS select box options disappear when an item is selected

I have created a select box bound to a model using Angularjs.
The select box options load correctly but as soon as select any single option all options disappear from the select box. What is the reason this is occuring and how do I keep my options from disappearing?
Plunker link demonstrating the issue:
http://plnkr.co/edit/DolBIN
HTML
<html xmlns="http://www.w3.org/1999/xhtml" ng-app>
<head>
<title>Angular Test Prjoect - Home</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script type="text/javascript" src="Clinic.js"></script>
</head>
<body>
<div ng-controller="ClinicCtrl">
<select ng-options="item as item.start + '-' + item.end + ':' + item.patient.name for item in appointments" ng-model="appointments">
</select>
</div>
</body>
</html>
JavaScript
function ClinicCtrl($scope) {
$scope.appointments = [
{ start: "900", end: "930", provider: "1", patient: {name:"Allen",dob:"8/12/1977"} },
{ start: "1000", end: "1045", provider: "1", patient: { name: "Allen", dob: "8/12/1971"} },
{ start: "1030", end: "1100", provider: "2", patient: { name: "David", dob: "11/22/1973"} },
{ start: "1100", end: "1145", provider: "2", patient: { name: "Francine", dob: "3/18/1987"} },
{ start: "1230", end: "1530", provider: "3", patient: { name: "George", dob: "4/5/1997"} },
{ start: "1300", end: "1500", provider: "3", patient: { name: "Kirkman", dob: "6/28/1970"} }
];
}

The problem is that the ng-model on your select element overwrites the $scope.appointments array as soon as an item is selected. Use a different scope property for your ng-model value.
Here's an updated plunker: http://plnkr.co/edit/EAExby
The changes to your template would be:
<div ng-controller="ClinicCtrl">
<select
ng-options="item as item.start + '-' + item.end + ':' + item.patient.name for item in appointments"
ng-model="selectedAppointment"
></select>
{{selectedAppointment}} <!-- log out the value just to show it's working -->
</div>