Develop Reference

Removing multiple select options and replace with new ones

I have a select tag like :
<span id="reportProjectSelector">
<span>Reporting Project:</span>
<select id="reportProjectDropdown" onChange="loadChartWithData();" multiple="multiple"></select>
</span>
and
$(function() {
$('#reportProjectDropdown_${widgetId}').multiselect({
includeSelectAllOption: true
});
});
Here I have multiple dropdown chain of other dropdowns which are parents of 'reportProjectDropdown'. For simplicity let's consider just one 'Project'. So now we have 'Projects', on change of which 'Reporting Projects' filter is triggered. Currently the Reporting project filter doesn't change and replace new values (basically null or no values which are replaced by a value like 'No Reporting Projects' in the dropdown)
I have tried removing the previous values but with no luck. Here is the function that I am expecting will do the job.
function setDependentProjects (data, widgetId) {
$('#reportProjectDropdown').find('option').remove().end();
if(jQuery.isEmptyObject(data)) {
let newOption = new Option("No Projects", 0, true, true);
$('#reportProjectDropdown').append(newOption);
} else {
let selected = true;
for(let key in data) {
selected = "${defaultDependentProject}" == data[key];
let newOption = new Option(data[key], key, selected, selected);
$('#reportProjectDropdown').append(newOption);
selected = false;
}
}
loadChartWithData_${widgetId}(); //renders data as per the previous filters
}
Am I missing something or removing the elements incorrectly ?

You need to refresh the jQuery multiselect instance after every change. You can do that by using $('#reportProjectDropdown').multiSelect('refresh');
See also the documentation: jQuery multiselect

KendoUI Grid: How to select all pages data

I am trying to select data from a kendo grid. I need to select one cell at a time when user clicks one key element in that row. I am successful in getting each row's data from first page but when I go to the next page the same function does not work anymore. Do I have to add code in change function ie., in grid change?
Here's the code:
$('.data').click(function () {
alert($(this).text());
var grid = $("#List").data("kendoGrid");
var selectedItem = grid.dataItem(this.parentElement.parentElement);
CData.set('activedata', selectedItem);
}
I understand data source gets all the data but this doesn't work:
$('.data').click(function () {
alert($(this).text());
var grid = $("#List").data("kendoGrid");
var selectedItem = grid.dataItem(this.parentElement.parentElement);
CData.set('activedata', selectedItem);
}
for (var i = 0; i < datasourcedata.length; i++) {
var currentitem = datasourcedata[i].CompanyID;
if (currentitem == $('.data')) {
selectedItem = grid.dataItem(this.parentElement.parentElement);
alert($(selectedItem));
Comp.set('activeCompany', selectedItem);
}
}
Where am I wrong? Any help appreciated.

This will help you for printing all pages in kendo grid
var dataSource = $("#grid").data("kendoGrid").dataSource;
dataSource.pageSize(dataSource.total());

I change datasource settings.
serverPaging: false,
serverFiltering: false,
serverSorting: false
solved in this way.

I think you don't need to use jquery events but instead use some kendo approach with change event. That way you always can change selectedDataItems collection based on users actions.

AUI textboxlist - retrieve removed elements value

I am using Liferay 6.2 and want to retrieve the value of removed element from a Textboxlist component. I have stored a list of values in a hiddenInput element, and I display the list in a Textboxlist. As I remove the element, I want to update the values stores in the hidden input element. But I do not know how to retrieve the removed element.
AUI().ready('aui-textboxlist-deprecated', function (A) {
var source = A.one('#hiddenInput').val().split(',');
var tagslist = new A.TextboxList({
contentBox: '#demo',
dataSource: source,
matchKey: 'name',
schema: {
resultFields: ['key', 'name']
},
schemaType: 'json',
typeAhead: true,
width: 500
}).render();
var values = A.one('#hiddenInput').val().split(',');
A.each(values, tagslist.add, tagslist);
var updateHiddenInput = function (event) {
//how to get the removed element?
}
tagslist.entries.after('remove', updateHiddenInput);
});
How to achieve this?

As #jbalsas said in the comments:
If you just need the label, then you can get it using event.attrName. If you need to work with the element, it is passed in event.item.entry.
So you should be able to do it like this:
var updateHiddenInput = function (event) {
var hiddenInput = A.one('#hiddenInput');
hiddenInput.val(hiddenInput.val() + ',' + event.item.entry); // or event.attrName
}

SAPUI5 dynamic binding of table cells

I have the following Problem:
I want to dynamically create table rows and cells with different settings.
The Solution mentioned here: Dynamic binding of table column and rows
was a good starting point for my problem, but I still could not get it to work.
The table should display each object of the model in a new row with the binding for the given attributes of that object.
The checked attribute should be displayed in/as a checkbox that is either checked or unchecked depending on the value (true or false) of checked.
Now, this works perfectly fine if I define the bindings and columns as they are in the SAPUI5 Table Example
The Problem:
Depending on value (true or false) of the objects existsLocal attribute I want the checkbox of that row to be either enabled or disabled. Further that row should get a new class - called existsLocalClass wich sets its background to grey if existsLocal is true.
I was thinking that this can be solved with a factory function that creates my rows and its cells. Unfortunately my factory does not work as intended.
Here is my code:
Model definition:
var model = [
{name: "name1", description: "description1", checked: true, existsLocal: true},
{name: "name2", description: "description2", checked: false, existsLocal: false}
]
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({modelData: model});
Table plus factory function:
var oTable = new sap.ui.table.Table({
visibleRowCount: 7,
firstVisibleRow: 3,
selectionMode: sap.ui.table.SelectionMode.None
});
var tableRowFactory = function (sId, oContext) {
console.log("row factory");
var exists = oContext.getProperty("existsLocal");
if(exists){
return new sap.ui.table.Row(sId)
.addCell(new sap.ui.commons.TextView()
.bindProperty("text", oContext.sPath + "/name"))
.addCell(new sap.ui.commons.TextView()
.bindProperty("text", oContext.sPath+ "/description"))
.addCell(new sap.ui.commons.CheckBox()
.bindProperty("checked", oContext.sPath+ "/checked").setEnabled(false))
.addStyleClass("existsLocal");
}else{
return new sap.ui.table.Row(sId)
.addCell(new sap.ui.commons.TextView()
.bindProperty("text", oContext.sPath + "/name"))
.addCell(new sap.ui.commons.TextView()
.bindProperty("text", oContext.sPath+ "/description"))
.addCell(new sap.ui.commons.CheckBox()
.bindProperty("checked", oContext.sPath+ "/checked"))
}
};
oTable.setModel(oModel);
oTable.bindRows("/modelData",tableRowFactory); // does not work
oTable.bindAggregation("rows", "/modelData", tableRowFactory); //doesn't work either
The browser does not show any errors and the table stays empty. I think the function does not even get called but I could not manage to fix it.
Maybe my entire approach is wrong - I don't really understand sapui5's binding and context thingy.
I hope that you can help me with this.
Edit:
I found a kinda hacky solution for this:
var model = oTable.getModel();
var rows = oTable.getRows();
var indicesOfRows = [];
$.each(rows, function (index, row){
indicesOfRows.push(oTable.indexOfRow(row));
});
$.each(rows, function(index, row){
var rowIndex = indicesOfRows[index];
var exists = model.getProperty("existsLocal", oTable.getContextByIndex(rowIndex));
var cells = row.getCells();
if(exists){
$.each(cells, function(index, cell){
if(cell instanceof sap.ui.commons.CheckBox){
row.$().toggleClass("existsLocal", true);
cell.setEnabled(false);
}
})
}
})

Instead you could bind to column with template. You have only rows binding and table does not know the columns.
BTW, You can define "enable" property of the checkbox with formatters. You need factory only for addStyleClass when necessary
So something like that: http://jsbin.com/poyetoqa/1/edit

See my edited solution in the original question. If you have a better working solution feel free to answer. Meanwhile I'll mark the question as answered.

Kendo UI Web - MultiSelect: select an option more than once

I'm currently facing a problem with the Kendo UI MultiSelect widget for selecting an option more than once. For example, in the image below I want to select Schindler's List again after selecting The Dark Knight, but unfortunately the MultiSelect widget behaves more like a set than an ordered list, i.e. repetitive selection is not allowed. Is there actually a proper way to achieve this? Any workarounds?

That's the intended behavior of the multi-select control and there is no simple way to make it do what you want using the available configuration options. Possible workarounds are ...
Creating a custom multi-select widget
Something like this should work (note that I haven't tested this much - it lets you add multiples and keeps the filter intact though):
(function ($) {
var ui = kendo.ui,
MultiSelect = ui.MultiSelect;
var originalRender = MultiSelect.fn._render;
var originalSelected = MultiSelect.fn._selected;
var CustomMultiSelect = MultiSelect.extend({
init: function (element, options) {
var that = this;
MultiSelect.fn.init.call(that, element, options);
},
options: {
name: 'CustomMultiSelect'
},
_select: function (li) {
var that = this,
values = that._values,
dataItem,
idx;
if (!that._allowSelection()) {
return;
}
if (!isNaN(li)) {
idx = li;
} else {
idx = li.data("idx");
}
that.element[0].children[idx].selected = true;
dataItem = that.dataSource.view()[idx];
that.tagList.append(that.tagTemplate(dataItem));
that._dataItems.push(dataItem);
values.push(that._dataValue(dataItem));
that.currentTag(null);
that._placeholder();
if (that._state === "filter") {
that._state = "accept";
}
console.log(this.dataSource.view());
},
_render: function (data) {
// swapping out this._selected keeps filtering functional
this._selected = dummy;
return originalRender.call(this, data);
this._selected = originalSelected;
}
});
function dummy() { return null; }
ui.plugin(CustomMultiSelect);
})(jQuery);
Demo here.
Using a dropdown list
Use a simple dropdown list (or ComboBox) and bind the select event to append to your list (which you have to create manually).
For example:
var mySelectedList = [];
$("#dropdownlist").kendoDropDownList({
select: function (e) {
var item = e.item;
var text = item.text();
// store your selected item in the list
mySelectedList.push({
text: text
});
// update the displayed list
$("#myOrderedList").append("<li>" + text + "</li>");
}
});
Then you could bind clicks on those list elements to remove elements from the list. The disadvantage of that is that it requires more work to make it look "pretty" (you have to create and combine your own HTML, css, images etc.).