Develop Reference

Getting the selected items count in a kendoMultiSelect footerTemplate

Is it possible to get the selected items count in the kendoMultiSelect's footerTemplate?
I created a DOJO example with an attemp to use instance.dataItems().length but for some reason, the value is always 0.
$("#customers").kendoMultiSelect({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
footerTemplate: '#: instance.dataItems().length # item(s) selected'
});

EDIT:
due #Aleksandar comment where he points out
Calling setOptions in an event handler or the respective widget is not
recommended and can cause an endless loop or a JavaScript error.
I take his suggestion into account and add his solution as an answer.
footerTemplate: '<span id="total">#:instance.value().length#</span> item(s) selected',
change:function(e){
var itmsSelected = e.sender.value().length;
$("#total").html(itmsSelected);
}
OBSOLETE:
Guess it's not in an observable object. One of the possible solutions is to change footerTemplate
every time a change happens on multiSelect:
var multi = $("#customers").kendoMultiSelect({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
change: function() {
this.setOptions({"footerTemplate": this.value().length +" item(s) selected"});
},
dataTextField: "name",
dataValueField: "id",
footerTemplate: '0 item(s) selected'
}).getKendoMultiSelect();
Example: Footer template update

How to show ALL category content results in semantic-ui search input?

I want my semantic-ui search input to behave just a bit more like a dropdown, by showing ALL options when clicking the empty field.
Here's a jsfiddle that gets pretty close. It works fine (with fulltext search) after entry ...
... but a way of showing the entire list isn't indicated. I ended up trying something like ...
$('.ui.search').search({
type: 'category',
maxResults: 70,
source: categoryContent,
fullTextSearch: true,
searchFields: [
'title',
'category'
],
onSelect: function(a){
// do something
}
}).on('click', function(){
if ($(this).val()=='') {
$('.ui.search').search('show results', function(){
// this isn't right...
// how do you show ALL results when clicking empty imput?
});
}
});
But that ain't right. Any advice on showing ALL options when the input field is empty?

You can set the minCharacters to 0. Try this:
$('.ui.search').search({
type: 'category',
maxResults: 70,
source: categoryContent,
fullTextSearch: true,
searchFields: [
'title',
'category'
],
onSelect: function(a){
// do something
},
minCharacters: 0
});

Why is my Bootstrap-Editable with Bootstrap-tables not working?

I am creating a table which needs editable fields..
This jquery element is appended to the page:
var container = $('#up-modal .modal-body');
var table = $('<table></table>');
table.attr('id','up-table');
table.attr('style','width:auto;');
table.attr('data-toggle', 'table');
table.attr('data-search', 'true');
table.attr('data-maintain-selected', 'true');
table.attr('data-pagination','true');
table.attr('data-page-size',3);
container.append(table);
following this, the bootstrap table function is called
$("#up-table").bootstrapTable({
columns:[
{
field: 'id',
title: 'ID',
align: 'center'
},
{
field: 'Permission',
title: 'Permission',
searchable: true
},
{
field: 'Extended',
name: 'Extended',
title: 'Properties',
editable:{
type: 'text',
pk: 1,
title: 'Modify Properties',
name: 'Extended',
validate: function(value){
value = $.trim(value);
try{
JSON.parse(value);
}catch(e){
return 'Invalid json provided for properties';
}
}
}
},
{
field: 'Access',
title: 'Access',
checkbox:true
}
],
data: tableData
});
The table is drawn correctly, but the fields are not editable. I can call $('.editable').editable(options) after the table is built and that works fine, but that stops working when pagination is involved.
I am using this example as a reference https://github.com/wenzhixin/bootstrap-table-examples/blob/master/welcome.html
oh, and I should mention the proper scripts and css files are locally hosted and being included correctly in my html.
Library quick links:
https://vitalets.github.io/bootstrap-editable/
http://bootstrap-table.wenzhixin.net.cn/

Woops. As it turns out, there are compatibility issues with x-editable, bootstrap 3 and bootstrap-tables.
To fix this all I had to do was include the bootstrap-editable-tables extension
https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/editable

Angular-Formly dynamically change select options

I would like to know if I could change select options using Angular-Formly depending on another select's selected value.
Lets say I have beverageTypeSelect and drinkSelect.
beverageTypeSelect has options Alcoholic and Non-Alcoholic.
drinkSelect would have Heineken, Budweiser, Alcohol 96%, if beverageTypeSelect value is Alcoholic.
drinkSelect would have Coca-Cola, Pepsi, Water, if beverageTypeSelect value is Non-Alcoholic.
How can I do that?
Editing:
Ok, let's try to make it a little more clear:
This is not my real application, but I want to keep it simple and get the general solution for this, so I'll keep with the beverage.
We are using https://github.com/formly-js/angular-formly-templates-bootstrap.
We have a formly forms generator. The part of code that is interesting in here is this:
if (obj.ngOptions){
o.templateOptions.options=[];
o.templateOptions.ngOptions = obj.ngOptions;
}
We have figured out that options must by an empty array so ngOptions can take place.
So we have a formly form like this:
[{
key: 'beverageTypeSelect',
type: 'select',
templateOptions: {
options: [{
name: 'Alcoholic',
value: 'A'
},
{
name: 'Non-Alcoholic',
value: 'N'
}]
}
}, {
key: 'drinkSelect',
type: 'select',
templateOptions: {
options: [],
ngOptions: 'item as item.label for item in model.drinkSelect track by item.id'
}]
Then we'll have a html to show our form:
<formly-form fields="formFields" model="DrinkingCtrl.data" form="DrinkingCtrl.form">
</formly-form>
And, finally, our controller:
'use strict'
angular.module('drunkApp')
.controller('DrinkingCtrl', drinking);
function drinking($scope, $stateParams, $state, $reactive, AutoSaveReactiveFormScope) {
var self = this;
var vm = AutoSaveReactiveFormScope($scope, this, 'NAME_TO_SEARCH_FOR_DRINK_FORMLY_FORM', 'drinkPublishName', drinkMongoCollection, $stateParams.id); // This is a factory that gives us everything (or almost it) that we need in a controller with form autosave functionallity :).
var drinkOptions = [{
id: 'H',
label: 'Heineken',
types: ['A']
}, {
id: 'B',
label: 'Budweiser',
types: ['A']
}, {
id: 'A',
label: 'Alcohol 96%',
types: ['A']
}, {
id: 'C',
label: 'Coca-Cola',
types: ['N']
}, {
id: 'P',
label: 'Pepsi',
types: ['N']
}, {
id: 'W',
label: 'Water',
types: ['N']
}];
vm.autorun(function() {
if (self.data) {
self.data.drinkSelect = _.filter(drinkOptions, function(drk) {
return _.contains(drk.types, self.data.beverageTypeSelect);
});
}
});
}
This really works, but I was expecting something cleaner, something that I could do directly inside of the form declaration. Maybe do something like we can do with required or hideExpression (that we can write something like 'model.option1 != "BLA"' or a function).
p.s.: Hope this time I made myself clearer.

Browser crashes when binding a foreign source datafield in jqx.dataAdapter

I'm trying to build a grid using jQWidgets (jqxGrid) with a column which displays values from a foreign data source, using jqx.dataAdapter, but the browser crashes when I try to call the dataBind() method.
Here's my (browser crashing!) jsfiddle:
http://jsfiddle.net/qYyRs/6/
Partial code:
var Area_DataSource = {
datatype: 'array',
localdata: Area_Data,
async: false,
datafields: [{
name: 'Id'
}, {
name: 'Name'
},{
name: 'PlantId'
},{
name: 'PlantName',
value: 'PlantId',
values: {
value: 'Value', // the problematic field
name: 'Name',
source: Plant_DataAdapter.records
}
}]
};
var Area_DataAdapter = new $.jqx.dataAdapter(Area_DataSource);
Area_DataAdapter.dataBind(); // booom!
Base example from jQWidgets website:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/gridkeyvaluescolumnwitharray.htm

This is a confirmed issue:
http://www.jqwidgets.com/community/topic/browser-crashes-foreign-datafield-in-jqx-dataadapter/
"We debugged the issue and confirm it. It will be resolved in jQWidgets
2.8.
Best Regards, Peter Stoev
jQWidgets Team http://www.jqwidgets.com"