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?

hiding the Inactive Items form the Suggestions in kendo Multiselect

I have a multiselect in our application. I have a requirement where we should not show the Inactive users in the multi-select dropdown suggestions list. We have the flag in the model. So need to know we can filter the dropdown using that flag. Please find the attached screenshot to get the Idea.
We can filter the data in the ajax call using that flag. But need to get the Names of the already selected Inactive users. So I am trying to hide the Inactive users from the suggestions list only.
So need to show the selected Inactive users, but from the suggestions need to hide inactive users.

Not sure if this is the best way, but you can try applying a filter on the dataSource in open event and removing it in close event:
$("#multiselect").kendoMultiSelect({
dataSource: {
data: [{Name: "test 1", Active: true, Id: 1},
{Name: "test 2", Active: true, Id: 2},
{Name: "test 3", Active: false, Id: 3},
{Name: "test 4", Active: true, Id: 4},
{Name: "test 5", Active: false, Id: 5}]
},
value: [1, 3],
dataTextField: "Name",
dataValueField: "Id",
filter: "startswith",
open: function(e) {
this.dataSource.filter({ field: "Active", operator: "eq", value: "true" });
},
close: function() {
this.dataSource.filter(null);
}
});
Demo

Kendo Combobox - set multiple combobox values all coming from the database

I am having a lot of trouble with setting the values of my combo-boxes. The problem is that I have multiple combo-boxes, each dependent on the previous selected value from a combo-box. All the values are stored in a database. When I run an ajax request to get the values and set the combo-box values, every time I refresh my page the text on the combo-boxes are INCORRECT. And every time I load the page different text is displayed on the combo-box even though nothing has been changed. Has this got something to-do with the way I set the values? Or should there be a particular order considering each is dependent on the previous value? Can someone please help???
E.g.
Sports (selected from 1st combo-box),
Football (selected from 2nd combo-box),
David Beckham (selected from 3rd combo-box)
Once all of this data is selected and saved to the database. On document ready I call an ajax request to get this data and set the combo-box values but, either the saved values is not displayed and shows a different value from the data-source or shows nothing at all. Every time the page is loaded it shows something else even the the right values is coming from the database.

To have three dependent combo-boxes, it is better to use "cascadeFrom" property of kendo combo-box.
A simple example:
<div>
<input id="category" />
<input id="sports" />
<input id="player" />
</div>
<script>
$("#category").kendoComboBox({
dataTextField: "categoryName",
dataValueField: "categoryId",
dataSource: [
{ categoryName: "Sports", categoryId: 1 },
{ categoryName: "Music", categoryId: 2 }
]
});
$("#sports").kendoComboBox({
cascadeFrom: "category",
dataTextField: "sportsName",
dataValueField: "sportsId",
dataSource: [
{ sportsName: "Football", sportsId: 1, categoryId: 1 },
{ sportsName: "Cricket", sportsId: 2, categoryId: 1 },
{ sportsName: "Pop", sportsId: 3, categoryId: 2 },
{ sportsName: "Rock", sportsId: 4, categoryId: 2 }
]
});
$("#player").kendoComboBox({
cascadeFrom: "sports",
dataTextField: "playerName",
dataValueField: "playerId",
dataSource: [
{ playerName: "David Beckham", playerId: 1, sportsId: 1 },
{ playerName: "Leonel Messi", playerId: 2, sportsId: 1 },
{ playerName: "Xavi", playerId: 3, sportsId: 1 },
{ playerName: "Raina", playerId: 4, sportsId: 2 },
{ playerName: "Gambhir", playerId: 4, sportsId: 2 },
{ playerName: "YXZ", playerId: 4, sportsId: 3 },
{ playerName: "ABC", playerId: 4, sportsId: 3 }
]
});
// To set value in combo-box
$("#category").data('kendoComboBox').value(1);
$("#sports").data('kendoComboBox').value(1);
$("#player").data('kendoComboBox').value(2);
</script>
Here, I have hard coded the value to set in combo-box. You can pull data from database and set here.
Its good to save the value field of combo-box and use that to display the data.
Hope this helps.
Reference Link

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.

Using an input element to reference a json

bit of background: when a user clicks an element, it loads a form retrieved by an ajax call. I save a copy of the json in the controller, and when they change a value, it is to update the local json.
Let's say the json is something like this:
{
name: "questions!",
id: "0",
questions: [{
id: "1",
text: "ninjas or pirates?",
type: "radio",
answers: [{
id: "1",
text: "ninjas"
} , {
id: "2",
text: "pirates"
}],
}, {
id: "3",
text: "why?",
type: "text"
answers: []
}]
}
the element returned is a jquery-ized version of the input that was selected.
While I could iterate through each field and check, I can't help but feel like there is a better way to do it and reference it more directly. How would this be done?