Develop Reference

Change TomSelect's text filtration or remove it outright

Needed a searchable select dropdown box and found a TomSelect library that has it all set up. I added in the required library. More specifically, this solution here.
<link href="https://cdn.jsdelivr.net/npm/tom-select#2.0.0-rc.4/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select#2.0.0-rc.4/dist/js/tom-select.complete.min.js"></script>
added in the JS code
new TomSelect("#select-state",{
create: false,
sortField: {
field: "text",
direction: "asc"
}
});
and everything works fine as intended until I realised that TomSelect filters out my text in said HTML dropdown selection.
If one of my dropdown selection was meant to say: 1 - this is option "hello" then after implementing the TomSelect, it says instead this is option, I assume filtering out elements before and after keys like - and ".
Would love to know to disable this filter, or at least modify it so that the whole text of the option is displayed otherwise the point of a dropdown is sort of defeated.
I was thinking of maybe tackling the attributes such as field: "text" but I have no idea where to begin or what other options could be. What would these SoftField option be?

Did you try to render your list with escaping?
new TomSelect("#select-state",{
create: false,
sortField: {
field: "text",
direction: "asc"
},
optionClass: 'option',
itemClass: 'item',
render:{
option: function(data, escape) {
return '<div>' + escape(data.text) + '</div>';
},
item: function(data, escape) {
return '<div>' + escape(data.text) + '</div>';
},
dropdown:function(){
return '<div></div>';
},
},
});

Is it possible to deselect a particular row in Aggrid?

I am trying to deselect a specific row in aggrid.
I have gone through the documentation but couldn't find one.
gridOptions.api.deselectAll();
This is what I am using to deselect all rows.But is there any way to deselect specific rows in Aggrid
I tried so many ways.Please help me to get through this.

You can use the row node api to deselect a node.
Based on docs -
setSelected(newValue: boolean, clearSelection: boolean)
Select (or deselect) the node. newValue=true for selection, newValue=false
for deselection. If selecting, then passing true for clearSelection
will select the node exclusively (i.e. NOT do multi select). If doing
deselection, clearSelection has no impact.
You need to first get the id of the node you want to deselect and do something like -
const node = gridOptions.api.getRowNode(id);
node.setSelected(false);

ag-Grid doesn't have toggling for the single row selection out of the box. That's just my understanding based on official docs, I sure can be wrong about this.
So for the multiple row selection it's easy and supported out of the box:
you just need to set rowMultiSelectWithClick to true and rowSelection to 'multiple' in the gridOptions (or whatever you call the config object).
For the single row select/deselect I've come up with the following (working plunker):
const gridOptions = {
columnDefs: [
{ field: 'name' },
{ field: 'continent' },
{ field: 'language' },
],
defaultColDef: {
flex: 1,
resizable: true,
},
rowData: rowData,
// here i'm just checking for the right selection mode
// and firing my custom little function when the row is clicked
onRowClicked: this.rowSelection === 'single' && toggleRowSelection,
rowMultiSelectWithClick: true,
rowSelection: 'single'
};
let selectedRow = null;
// this function is just for keeping track of selected row id
// and programmatically deselecting the row by doing node.setSelected(false)
function toggleRowSelection({ node }) {
if (selectedRow !== node.id) {
selectedRow = node.id;
} else {
selectedRow = null;
node.setSelected(false);
}
}

How can I set maximumSelectionLength while closeOnSelect is false in Select2?

I have the following code:
$("#select2").select2({ closeOnSelect: false,
maximumSelectionLength: 5,
... // I have AJAX implemented here
});
When I have closeOnSelect to be false and have the maximumSelectionLength set, I'm able to select more than 5 items without any problem. When I click away from the dropdown while having more than 5 items selected and I try to add another, I get the message "You can only select 5 items".
Is there any workarounds to have these two properties work together without clashing?
I'm currently using Select2 4.0.1.
Update:
I took pratikwebdev's advise and added the following code:
$("#select2").select2({ closeOnSelect: false,
maximumSelectionLength: 5,
... // I have AJAX implemented here
}).on("change", function(e) {
if(e.target.length == 5) {
$("#select2").select2({closeOnSelect: true,
maximumSelectionLength: 5,
});
}
});
This actually will close the dropdown once I select 5 items and the maximumSelectionLength property will work properly. But now the closeOnSelect is true so each time I select something, the dropdown will close.
Is there a way to toggle closeOnSelect?

This should work fine.
$("#select2").change(function(){
var ele = $(this);
if(ele.val().length==5)
{
ele.select2('close');
}
});

Kendo UI Grid editable manual dataItem.set() slow/delay

I have an editable Kendo Grid that may have a column with a checkbox to change a boolean value. I have used this solution proposed by OnaBai that is working perfectly!
The only problem is that the checkbox value change is too slow. When user clicks it, it takes about 1 second to change. I realize that the dataItem.set() method is responsible by this delay.
My grid has a considerable amount of data. About 30-40 columns and 300+ lines. It is defined as follows:
$("#mainGrid").kendoGrid({
dataSource: dataSource,
pageable: false,
sortable: true,
scrollable: true,
editable: true,
autoBind: false,
columnMenu: true, // Cria o menu de exibição de colunas
height: getGridHeight(),
toolbar: [/* hide for brevity */],
columns: [/* hide for brevity */],
dataBound: function() { /* hide for brevity. */},
edit: function() { /* hide for brevity. */}
});
Another detail is that, when dataItem.set() is called, it calls dataBound() event but that is not causing the delay. Grid's edit() method is not being called on this process. I don't know if worths to post dataSource code.

I would suggest using the approach from this code library article when it comes to use checkboxes. It does not use the set methods of the model and still works the same way. Even with 2000 records on a single page CheckAll will work flawlessly.

I have found an alternative way for doing what OnaBai proposed and it's working better.
// This is the grid
var grid = $("#mainGrid").data("kendoGrid");
// .flag is a class that is used on the checkboxes
grid.tbody.on("change", ".flag", function (e)
{
// Get the record uid
var uid = grid.dataItem($(e.target).closest("tr")).uid;
// Find the current cell
var td = $(e.target).parent().parent();
// This opens the cell to edit(edit mode)
grid.editCell(td);
// This ones changes the value of the Kendo's checkbox, that is quickly shown,
// changed and then hidden again. This marks the cell as 'dirty' too.
$(td.find("input")[0]).prop("checked", $(e.target).is(":checked") ? "checked" : null).trigger("change").trigger("blur");
}

Should try something like this:
I'll set the column with the Edit button to look like this:
columns.Command(command => {command.Edit().HtmlAttributes(new { id = "btnEdit_" + "${Id}" }); }).Width(100).Hidden(true);
And have it where clicking into the first column (I have an image with a hyperlink) uses an onclick function to programmatically click the Edit button, click the checkbox, then click the Update button. Probably more "old school", but I like knowing it is following the order I would be doing if I were updating it, myself.
I pass in the object ("this"), so I can get the row and checkbox when it appears, the new status as 0 or 1 (I have some code that uses it, not really necessary for this demo, though, so I'm leaving that part out of my function for simplicity), and the ID of that item:
columns.Bound(p => p.IsActive).Title("Active").Width(100).ClientTemplate("# if (IsActive == true ) {# <a href=javascript:void(0) id=btnActive_${Id} onclick=changeCheckbox(this, '0', ${Id}) class='k-button k-button-icontext k-grid-update'><img style='border:1px solid black' id=imgActive src=../../Images/active_1.png /></a> #} else {# <a href=javascript:void(0) id=btnActive_${Id} onclick=changeCheckbox(this, '1', ${Id}) class='k-button k-button-icontext k-grid-update'><img style='border:1px solid black' id=imgActive src=../../Images/active_0.png /></a> #}#");
function changeCheckbox(obj, status, id) {
var parentTr = obj.parentNode.parentNode;
$('[id="btnEdit_' + id + '"]').click();
parentTr.childNodes[5].childNodes[0].setAttribute("id", "btnUpdate_" + id); // my Update button is in the 6th column over
parentTr.childNodes[0].childNodes[0].setAttribute("id", "chkbox_" + id);
$('[id=chkbox_' + id + ']').click().trigger("change");
$('[id=chkbox_' + id + ']').blur();
var btnUpdate = $('[id="btnUpdate_' + id + '"]');
$('[id="btnUpdate_' + id + '"]').click();
}
Code above assumes, of course, the checkbox is in the first column. Otherwise, adjust the first childNodes[0] on that chkbox setAttribute line to the column it sits in, minus one because it starts counting from zero.

I did a solution much like #DontVoteMeDown. But I have a nested grid (master / detail) so I get the parent grid from the event parameter. Also I just trigger a click-event on the checkbox.
$("#grid .k-grid-content").on("change", "input.chkbx", function (e) {
// Get the parent grid of the checkbox. This can either be the master grid or the detail grid.
var parentGrid = $(e.target).closest('div[data-role="grid"]').data("kendoGrid");
// Get the clicked cell.
var td = $(e.target).closest("td");
// Enter the cell's edit mode.
parentGrid.editCell(td);
// Find the checkbox in the cell (which now is in "edit-mode").
var checkbox = td.children("input[type=checkbox]");
// Trigger a click (which will toggle check/uncheck).
checkbox.trigger("click");
});

MultiSelectCombobox issue in dojo

I needed the combobox with checkboxes in front of each option, to select multiple options. I tried using CheckedMultiSelect using "dropdown:true",
It shows the value in the combobox like, 2 item(s) selected, 1 item(s) selected,etc when I select items.
How to show the values selected in the text area of combobox separated by delimiter??
Should css or HTML or someotherthing has to be changed for checkedMultiSelect??
Thanks in advance.

As for your second question, you have to extend dojox.form.CheckedMultiSelect class and override _updateSelection and startup methods:
var MyCheckedMultiSelect = declare(CheckedMultiSelect, {
startup: function() {
this.inherited(arguments);
setTimeout(lang.hitch(this, function() {
this.dropDownButton.set("label", this.label);
}));
},
_updateSelection: function() {
this.inherited(arguments);
if(this.dropDown && this.dropDownButton) {
var label = "";
array.forEach(this.options, function(option) {
if(option.selected) {
label += (label.length ? ", " : "") + option.label;
}
});
this.dropDownButton.set("label", label.length ? label : this.label);
}
}
});
Use MyCheckedMultiSelect instead of dojox.form.CheckedMultiSelect:
var checkedMultiSelect = new MyCheckedMultiSelect ({
dropDown: true,
multiple: true,
label: "Select something...",
store: dataStore
}, "placeholder");
checkedMultiSelect.startup();
Again, I added this to the jsFiddle: http://jsfiddle.net/phusick/894af/

In addition to #Craig's solution there is also a way to add only a look&feel of checkboxes via CSS. If you inspect generated HTML, you can see that each row is represented as a table row <tr> with several table cells <td>. The table row of the selected item gets CSS class .dojoxCheckedMultiSelectMenuItemChecked, so I suggest to change styling of the first cell which always has class .dijitMenuItemIconCell:
td.dijitMenuItemIconCell {
width: 16px;
background-position: center center;
background-repeat: no-repeat;
background-image: url('some-unchecked-image-here.png');
}
tr.dojoxCheckedMultiSelectMenuItemChecked td.dijitMenuItemIconCell {
background-image: url('some-checked-image-here.png');
}
So you will get:
I added this to the jsFiddle I was helping you with before: http://jsfiddle.net/phusick/894af/

The CheckedMultiSelect does not provide checkboxes when the dropDown is set to true. It simply allows the user to click to click multiple items to select.
To implement what you want, take a look at my answer here:
Custom dojo Dropdown widget by inheriting _HasDropdown and _AutoCompleterMixin
In MyCustomDropDown, you will need to build the list of checkboxes and items as a custom widget. I would recommend looking at dojox.form._CheckedMultiSelectMenu and dojox.form._CheckedMultiSelectMenuItem and mimic the functionality there and just give a different ui (with checkboxes).

dojox.form.CheckedMultiSelect should have been showing the checkboxes, this ticket fixes the problem. https://bugs.dojotoolkit.org/ticket/17103