Related
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
Following the example here, we've been trying for over a week to get Tabulator working with a Select2 header filter. There is a JS Fiddle here with all the pieces. It seems like the Tabulator filter (which are really just editors) onRendered() function is not even getting called because the console log we have inside it never gets logged.
The select element itself shows up in the header filter, but never gets the Select2 object applied (probably because the onRendered seems to not even be called). If we put the Select2 object outside the onRendered function, it get applied, but then the filter does not get applied after selection is made. There are no console or other errors and we've followed the Tabulator 'example' to the letter, so we are not sure what to try next.
Does anyone know how to get a basic Select2 header filter functioning with Tabulator?
var tableData = [{
id: "1",
topic: "1.1"
},
{
id: "2",
topic: "2.2"
},
];
var select2Editor = function(cell, onRendered, success, cancel, editorParams) {
var editor = document.createElement("select");
var selData = [{
id: '1.1',
text: "One"
}, {
id: "2.2",
text: "Two"
}, {
id: "3.3",
text: "Three"
}, ];
onRendered(function() {
// TODO: map tracks to id and text
console.log('rendered');
$(editor).select2({
data: selData,
minimumResultsForSearch: Infinity,
width: '100%',
minimumInputLength: 0,
//allowClear: true,
});
$(editor).on('change', function(e) {
success($(editor).val());
});
$(editor).on('blur', function(e) {
cancel();
});
});
return editor
};
var columns = [{
title: "ID",
field: "id"
}, {
title: "Topic",
field: "topic",
headerFilter: select2Editor,
}, ];
var table = new Tabulator("#table", {
placeholder: "No Data Found.",
layout: "fitData",
data: tableData,
columns: columns,
});
I'm new to both Tabulator and select2 and I think this is possibly a bad way to do it but it seems like it miiight work.
If you want to use select2 with text input elements, it looks like you need to use the full package.
https://jsfiddle.net/dku41pjy/
var tableData = [{
id: "1",
topic: "1.1"
},
{
id: "2",
topic: "2.2"
},
];
var columns = [{
title: "ID",
field: "id"
}, {
title: "Topic",
field: "topic",
headerFilter: 'select2Editor'
}, ];
var awaiting_render = [];
function do_render({ editor, cell, success, cancel, editorParams }) {
console.log('possibly dodgy onrender');
var selData = [{
id: '',
text: "-- All Topics --"
}, {
id: '1.1',
text: "One"
}, {
id: "2.2",
text: "Two"
}, {
id: "3.3",
text: "Three"
}, ];
$(editor).select2({
data: selData,
//allowClear: true,
});
$(editor).on('change', function(e) {
console.log('chaaaange')
success($(editor).val());
});
$(editor).on('blur', function(e) {
cancel();
});
}
function render_awaiting() {
var to_render = awaiting_render.shift();
do_render(to_render);
if(awaiting_render.length > 0)
render_awaiting();
}
Tabulator.prototype.extendModule("edit", "editors", {
select2Editor:function(cell, onRendered, success, cancel, editorParams) {
console.log(cell);
var editor = document.createElement("input");
editor.type = 'text';
awaiting_render.push({ editor, cell, success, cancel, editorParams });
return editor
},
});
var table = new Tabulator("#table", {
placeholder: "No Data Found.",
layout: "fitData",
data: tableData,
columns: columns,
tableBuilt:function(){
render_awaiting();
},
});
Edit: my suspicion is that onRendered only gets fired when these edit elements are used in cells to sope with the transition between showing just data and showing an editable field.
Demo and my code is like this : http://jsfiddle.net/fc1qevem/10/
My javascript code is like this :
var select02 = $('#select02');
$(select02).select2({
data: [{
id: 0,
text: "test01"
}, {
id: 1,
text: "test02"
}, {
id: 2,
text: "test03"
}, {
id: 3,
text: "test04"
}, {
id: 4,
text: "test05"
}],
placeholder: "Branch name",
});
I want change the background color of select2 to blue color
I want change the background color using javascript
Whether it can be done?
Thank you
add this in your css
.select2-selection{
background-color:blue !important;
}
js solution
$(select02).select2({
data: [{
id: 0,
text: "test01"
}, {
id: 1,
text: "test02"
}, {
id: 2,
text: "test03"
}, {
id: 3,
text: "test04"
}, {
id: 4,
text: "test05"
}],
placeholder: "Branch name",
}).data("select2").$container.find(".select2-selection").css('background-color', 'blue');
When you will change the background-color using JavaScript try this:
$('.select2-selection').css('background-color', 'blue');
// Css code
.bg_color {
background-color: blue !important;
}
// Javascript code
// just put this code under the load function
$(select02).select2({ containerCssClass: "bg_color " });
This is how select2 adding class to the container or default css ".select2-container--default .select2-selection--single" of select2 where you can edit the background color of the container. Hope it helps you.
Try the code below:-
document.getElementById("select02").style.backgroundColor="blue";
As with disabled: true and locked: true is there a way to preselect an option in select2?
I have a text field that gets json data and i want to preselect an option
Is there something like this?
{id: 0, text: 'story'},{id: 1, text: 'bug', selected: true},{id: 2, text: 'task'}
I know it can be done with initSelection but i don't understand how to get selected: true
Can you help please?
Look at the code here:
http://jsfiddle.net/9PZTm/1/
I found something that worked for me
Here is the code if someone need it:
var items = [{id: 0, text: 'story'},{id: 1, text: 'bug', selected: true},{id: 2, text: 'task'}];
$(".form-control").select2({
createSearchChoice:function(term, data) { if ($(data).filter(function() { return this.text.localeCompare(term)===0; }).length===0) {return {id:term, text:term, selected:term};} },
multiple: false,
data: items,
width: 218,
initSelection : function (element, callback) {
$(items).each(function(){
if (this.selected != undefined){
callback(this);
}
});
},
});
http://jsfiddle.net/9PZTm/2/
I used an array instead
let arr = ['1','0'];
$('#multiple').val(arr).select2();
I'd like to hide a column (its an ID column that is unique for each row), but I cannot remove it from the "columns" array because I need that data in the Row when actions are performed on the Row (Selection, Sorting, ect).
After being sorted for example, I need to grab the Rows match them up to the previous styles that they had before, and I can do this with the ID column. I need the data in the row, I just don't want it to be displayed.
Thanks.
The answer is NO, but that is not the answer you are looking for :)
Other than what columns are looking at to grab their data, there is no hard link between them and what your data items look like. You don't have to have a column visible to have an ID on your data item.
In case anyone is still looking for this, I've found a way... it's not massively elegant but it does work. As Simon, suggested, add the Id column as the last in the grid. Set both the cssClass and headerCssClass to be "display:none !important" and set the width, minWidth and maxWidth column options to 0 as follows:
var columns = [
{ id: "MyColumnId", name: "My Column", field: "MyColumnData", width: 100},
{ id: "Id", name: "Id", field: "Id", width: 0, minWidth: 0, maxWidth: 0, cssClass: "reallyHidden", headerCssClass: "reallyHidden" }
];
and the css is:
.reallyHidden { display: none !important;}
Hope that helps.
It is not possible BUT as a workaround you can set the width/maxWidth to 1, set the name to an empty string and place the column at the far right of all other columns. Like so (example is in coffeescript, if you feel uncertain about the syntax use http://js2coffee.org/):
columns = [
... some columns ...
{
id:"hidden"
name:""
field:"id"
sortable:"true"
width: 1
maxWidth: 1
minWidth: 1
unselectable: true
formatter: (row,cell,val,columnDef,dataContext) ->
"<div style='display: none;'>#{val}</div>"
}
]
I had the same problem today, and i am working with pure array data. if you add your values at the end of the data array, but do not define them in the columns-array, the data is present and you can use it in your events, but it is not shown.
example:
new Slick.Grid({
document.getElementById('grid')
, [
[1, 2, 3, 1]
, [1, 2, 3, 2]
, [1, 2, 3, 3]
, [1, 2, 3, 4]
, [1, 2, 3, 5]
]
, headers: [
{
field: '0'
, id: 'foo'
, name: 'foo'
}
, {
field: '1'
, id: 'bar'
, name: 'bar'
}
, {
field: '0'
, id: 'baz'
, name: 'baz'
}
]
, {}
);
As you can see in the code, i provided a 4th value to the grid with no column-definition.
For this kind of problem, I've used two arrays. One for showing and the other one for columnPicker. Here is how,
var org_columns = [],hid_columns = [];
org_columns.push(
cb_selector.getColumnDefinition(),
{id: "id", name: "ID", field: "id", sortable: true, width: 56},
{id: "name", name: "Name", field: "name", editor: Slick.Editors.Text, sortable: true, width: 234},
{id: "email", name: "Email", field: "email", editor: Slick.Editors.Text, sortable: true, width: 234}
);
hid_columns.push(
cb_selector.getColumnDefinition(),
{id: "name", name: "Name", field: "name", editor: Slick.Editors.Text, sortable: true, width: 234},
{id: "email", name: "Email", field: "email", editor: Slick.Editors.Text, sortable: true, width: 234}
);
var data_view = new Slick.Data.DataView();
grid = new Slick.Grid("#grid", data_view, hid_columns, grid_options);
var columnPicker= new Slick.Controls.ColumnPicker(org_columns, grid,grid_options);
in coloumns.push({id:id,name:name,Hidden:true})
//hidden ensures that the column is removed while binding grid
I realize this is an old question but the correct way to do this is by using a dataProvider and utilizing getItemMetaData to provide information you don't necessarily want displayed.
When you select your row you can call grid.getItemMetaData(cell.row) to get the extra information you need. getItemMetaData is expected to return a jsonObject describing both row and cell level metaData.
Here's the docs that describe it.
https://github.com/mleibman/SlickGrid/wiki/Providing-data-to-the-grid
After looking for some answers about this questions I've found a workaround that quite does the trick of hiding the column and still save the data.
My initial problem was that I needed to hide the ID column of the grid, so basically I hid the ID column by creating the only with the name attribute without specifying anything else and the column was then created I was expecting.