Develop Reference

How to set value of select2 to jquery on query builder?

I am using the Jquery query builder where I am also using the select2 plugin.
The question is when I need to set the values the select2 is not rendering the options, instead is empty even the value is there.
here is the example:
$('#builder-widgets').queryBuilder({
// plugins: ['bt-tooltip-errors'],
filters: [
{
id: 'manufacturers',
label: 'Brands',
operators: ['in', 'not_in'],
type: 'string',
multiple: 'multiple',
plugin: 'select2',
plugin_config: {
data: [
{
id: 1,
text: 'xyz'
},
{
id: 2,
text: 'abc'
}
],
width: '500px',
tags: true,
multiple: true
},
valueSetter: function (rule, value) {
console.log(value)
}
},

Vuetify v-select + item-disabled how to use it?

at sample of
https://vuetifyjs.com/en/components/selects/#multiple
<v-select
v-model="value"
:items="items"
multiple
item-disabled=['foo','fizz'] //read only not work?
></v-select>
<script>
export default {
data: () => ({
items: ['foo', 'bar', 'fizz', 'buzz'],
value: ['foo', 'bar', 'fizz', 'buzz'],
}),
}
</script>

As mentioned in the Vuetify documentation, your items can be an array of objects with the following properties:
{
text: string | number | object,
value: string | number | object,
disabled: boolean,
divider: boolean,
header: string
}
Your example becomes:
<template>
<v-select
v-model="value"
:items="items"
multiple
></v-select>
</template>
<script>
export default {
data: () => ({
items: [
{
text: "foo",
value: "foo",
disabled: true,
},
{
text: "bar",
value: "bar",
},
{
text: "fizz",
value: "fizz",
disabled: true,
},
{
text: "buzz",
value: "buzz",
},
],
}),
};
</script>

As per the github issue raised here [Which is still open]: https://github.com/vuetifyjs/vuetify/issues/5557
If an array is passed it's used as a path to a property (['a', 'b'] is
'a.b'), not a list of item values.
So as per now, we cannot pass array directly to item-disabled to make some options disabled.
As mentioned in above answer,
Your current array needs to be converted to array of objects in order for
item-disabled to work. We need to pass array of objects with disabled:true for the objects that needs to be disabled.
[
{text: 'Bar', value: 'Bar'},
{text: 'Gizz - Disabled', value: 'Gizz', disabled: true}
]
Here is the example - https://codepen.io/akshayd21/pen/qBqGONz
Similar questions for reference:
How can I disable literal values in Vuetify?
v-select deactivate some items/options

Date Issue in Kendo UI when Filter Grid

When we filter Kendo datagrid, use different types of operator like eq, and, or,
gt, lt etc. that's work well in string and number. When we use date to match another date using eq operator does not work but gt,lt works.
This is my source code
dataSource: {
data: data,
schema: {
model: {
fields: {
date: { type: "date"},
id: { type: "string" },
name: { type: "number" },
account: { type: "number" }
}
}
},
sort: [ { field: "date", dir: "desc" }],
filter : [{
field: "date", operator: "eq", value: dateString
}],
pageSize: 30,
}

probably your datestring is not being read has a date, so when it goes filter it throws a error.
Try to or use the format propertie in the grid
columns : [
{
field : "Date",
title : "Date",
format : "{0:dd-MMM-yyyy}",
filterable: {
ui: "datepicker"
}
}
]

Select2 jQuery Plugin: Is there a way to sort a list of tags alphabetically?

I'm using Select2 plugin (http://ivaynberg.github.io/select2/) and as you can see by the list of tags I have in the screenshot, they aren't listed alphabetically and I'd like to be able to do so.
EDIT: This is what I currently have, but instead of query, I want to sort the data (#appTags) via 'text', not 'id':
scope.find('input[name=noun]').select2({
data: #appTags,
sortResults: function(results, container, query) {
if (query.term) {
return results.sort();
}
return results;
}
});
Screenshots of my Console paused in Debugger:
Here's an image of the #appTags object, of which I'd like to sort via 'text':

Here is a bit of code from the docs that is using the JS built in sort function. I modified it to sort alphabetically instead of by length as they did in the docs.
$('#e22').select2({
sortResults: function(results, container, query) {
if (query.term) {
// use the built in javascript sort function
return results.sort();
}
return results;
}
});

For select2 plugin version 4.0
var customSorter = function(data) {
return data.sort(function(a,b){
a = a.text.toLowerCase();
b = b.text.toLowerCase();
if(a > b) {
return 1;
} else if (a < b) {
return -1;
}
return 0;
});
};
In select2 version 4.0, the sort param name is changed to "sorter"
Now pass "customSorter" to the plugin
$("#genre").select2({ tags: true, sorter: customSorter});

Select2 API v3.x (sortResults)
You can sort elements using sortResults callback option with String.localeCompare() which uses case non sensitive comparison:
let tags = [ { id: 0, text: 'androidtag' }, { id: 1, text: 'origin' }, { id: 2, text: 'Hobby' }, { id: 3, text: 'is-awesome' }, { id: 4, text: 'age' }, { id: 5, text: 'TestingDateTag' }, { id: 6, text: 'name' }, { id: 7, text: 'surname' }, { id: 8, text: 'Birthday' } ];
$( 'input[name=noum]' ).select2({
data: tags,
tags: true,
/* Sort tags using case non sensitive comparison */
sortResults: data => data.sort((a, b) => a.text.localeCompare(b.text)),
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css" integrity="sha256-ijlUKKj3hJCiiT2HWo1kqkI79NTEYpzOsw5Rs3k42dI=" crossorigin="anonymous" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js" integrity="sha256-7A2MDY2eGSSUvgfbuH1IdzYk8qkEd3uzwiXADqPDdtY=" crossorigin="anonymous"></script>
<input name="noum" style="width: 200px" />
Select2 API v4.0 (sorter)
You can sort elements using sorter callback option with an empty <select> tag:
let tags = [ { id: 0, text: 'androidtag' }, { id: 1, text: 'origin' }, { id: 2, text: 'Hobby' }, { id: 3, text: 'is-awesome' }, { id: 4, text: 'age' }, { id: 5, text: 'TestingDateTag' }, { id: 6, text: 'name' }, { id: 7, text: 'surname' }, { id: 8, text: 'Birthday' } ];
$( 'select[name=noum]' ).select2({
data: tags,
tags: true,
/* Sort tags using case non sensitive comparison */
sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" integrity="sha256-xqxV4FDj5tslOz6MV13pdnXgf63lJwViadn//ciKmIs=" crossorigin="anonymous" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js" integrity="sha256-FA14tBI8v+/1BtcH9XtJpcNbComBEpdawUZA6BPXRVw=" crossorigin="anonymous"></script>
<select name="noum" style="width: 200px" multiple="multiple" />

Kendo Grid: Canceling edit deletes new row

Here is a demo to for the behavior I am experiencing.
If you edit the existing row with id 1, change the text to something else and then press the cancel button, the row is reverted correctly to its previous state.
In order to reproduce my problem you need to:
Add a new row
Press the update button to save it.
Select the row again and press the update button.
Press the cancel button
The row disappears!
Even though there are similar questions on this problem, I have yet to find a satisfactory answer.
Some people say that I need to define an id. As you can see from my demo, this does not make any difference, the new row has an id and it still disappears.
There are some suggestions when you are using a remote datasource, but this does not work in my case, I need to use local data.
Finally, there is this answer. While it does prevent the new row from disappearing, Canceling the row does not revert the data to its old state, it only closes the editor and the data are as they where after the edit.

Had the same problem. I had it solved by simply calling the cancelChanges() method of the DataSource:
..
cancel: function(e) {
$('#mainGrid').data('kendoGrid').dataSource.cancelChanges();
},
..

It seems like bug only.But still you could acheive desired output through the below code.
I have introduced new variable tempSavedRecords and update
that variable when you are save or delete the record with kendo
datasource data.
When the user clicks cancel button fill the kendo datasource with tempSavedRecords.
$(document).ready(function() {
var tempSavedRecords = null;
var gridDataSource = new kendo.data.DataSource({
data: [
{ id: 1, description: 'Test 1', begin: new Date() }
],
schema: {
model: {
id: 'id',
fields: {
id: { type: 'number' },
description: { type: 'string' },
begin: { type: 'date' }
}
}
}
});
$('#grid').kendoGrid({
dataSource: gridDataSource,
scrollable: true,
sortable: true,
toolbar: ['create'],
columns: [
{ field: 'id', title: 'ID', width: 'auto' },
{ field: 'description', title: 'Description', width: 'auto' },
{ field: 'begin', title: 'Begin', width: 'auto', format: '{0:d}' },
{ command: ['edit', 'destroy'], title: ' ', width: '172px'}],
editable: {
mode: 'inline',
confirmation: false
},
save:function(e){
updateTempRecords();
},
cancel:function(e){
if(tempSavedRecords != null){
$('#grid').data('kendoGrid').dataSource.data(tempSavedRecords);
}
else{
$('#grid').data('kendoGrid').dataSource.cancelChanges();
}
},
remove:function(e){
$('#grid').data('kendoGrid').dataSource.remove(e.model)
updateTempRecords();
}
});
function updateTempRecords(){
tempSavedRecords = $('#grid').data('kendoGrid').dataSource.data();
tempSavedRecords = tempSavedRecords.toJSON();
}
});
Hope this helps.Thanks.
$(document).ready(function() {
var tempSavedRecords = null;
var gridDataSource = new kendo.data.DataSource({
data: [
{ id: 1, description: 'Test 1', begin: new Date() }
],
schema: {
model: {
id: 'id',
fields: {
id: { type: 'number' },
description: { type: 'string' },
begin: { type: 'date' }
}
}
}
});
$('#grid').kendoGrid({
dataSource: gridDataSource,
scrollable: true,
sortable: true,
toolbar: ['create'],
columns: [
{ field: 'id', title: 'ID', width: 'auto' },
{ field: 'description', title: 'Description', width: 'auto' },
{ field: 'begin', title: 'Begin', width: 'auto', format: '{0:d}' },
{ command: ['edit', 'destroy'], title: ' ', width: '172px' }
],
editable: {
mode: 'inline',
confirmation: false
},
save:function(e){
updateTempRecords();
},
cancel:function(e){
if(tempSavedRecords != null){
$('#grid').data('kendoGrid').dataSource.data(tempSavedRecords);
}
else{
$('#grid').data('kendoGrid').dataSource.cancelChanges();
}
},
remove:function(e){
$('#grid').data('kendoGrid').dataSource.remove(e.model)
updateTempRecords();
}
});
function updateTempRecords(){
tempSavedRecords = $('#grid').data('kendoGrid').dataSource.data();
tempSavedRecords = tempSavedRecords.toJSON();
}
});
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="grid"></div>
<script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<script src="script.js"></script>
</body>
</html>

This happens because the id remains set to its default value. The data source considers such data items as "new" and cancelling them removes them. Once you save a "new" item you need to set its id to a non-default value.

I modified your changes with this pluckr, and it seems to work.
The only change that I did was to rename 'id' column to 'ided'.
Somehow the 'id' column name, as shown in kendo examples does not work, and to me it seems like a bug.
model: {
id: 'ided',
fields: {
ided: { type: 'number' },
description: { type: 'string' },
begin: { type: 'date' }
}
}

I could resolve this problem by re-setting the data object after add new row.
For example:
function onInsertNewRow(dataItem) {
myDataSource.insert(dataItem);
myDataSource.data(myDataSource.data());
}
By calling data() method you say to grid that the new data asigned is the base data and the new rows are no longer new.
I hope this help you.