I have looked at multiple questions on SO and on Git hub:
Set multiple Select2 options
Select2 can't set multiple value
Is initSelection used for select2(val)
But I still cant seem to figure out why the values is not being set.
I am using a jinja2 template, so Ill give the generated html/js:
<div class="form-group">
<label class="control-label col-sm-4" for="message_type">Meassage Type</label>
<div class="col-sm-5">
<input type="hidden" name="message_type" id="message_type" readonly />
</div>
</div>
and the js:
$(function () {
$("#message_type").select2({
placeholder: "Email/SMS/PIMS Modal",
multiple: true,
width: "300px",
tokenSeparators: [',', ' '],
data: [{
id: "email",
text: "Email"
}, {
id: "pims modal",
text: "PIMS Modal"
}, {
id: "sms",
text: "SMS"
}, ],
});
$("#message_type").select2("val", "pims modal");
});
I have also managed to reproduce the result, see example.
The issue occurs because you have set the multiple property to true. In this case to set a value you need to use an array instead of a string.
For example:
$(function () {
$("#message_type").select2({
placeholder: "Email/SMS/PIMS Modal",
multiple: true,
width: "300px",
tokenSeparators: [',', ' '],
data: [{
id: "email",
text: "Email"
}, {
id: "pims modal",
text: "PIMS Modal"
}, {
id: "sms",
text: "SMS"
}, ],
});
$("#message_type").select2("val", ["email"]);
});
A working demo here: http://jsfiddle.net/nww22qoj/19/
Edit: Here is a working jsfiddle using the 4.0.1 version of the plugin http://jsfiddle.net/nww22qoj/20/ (using the full version of the plugin)
Related
I have a problem with the dropdown in ui-grid.
This is my cell template where it must be.
{
cellTemplate: '<div>{{ row.entity.deviceType }}</div>',
displayName: $filter('prefixTranslate')('device_type', 'devices'),
field: 'deviceType',
key: 'deviceType',
name: 'column_device_type',
height: 40,
enableCellEdit: true,
enableCellEditOnFocus: false,
editType: 'dropdown',
editableCellTemplate: `
<div>
<form
name="inputForm">
<select
class="my-select"
ng-class="'colt' + col.uid"
ui-grid-edit-dropdown
ng-model="MODEL_COL_FIELD"
ng-options="field[editDropdownIdLabel] as field[editDropdownValueLabel] CUSTOM_FILTERS for field in editDropdownOptionsArray">
</select>
</form>
</div>
`,
editDropdownValueLabel: 'deviceType',
editDropdownOptionsArray: [
{ id: 1, deviceType: 'Vertical Tank' },
{ id: 2, deviceType: 'Horizontal Tank' }
]
},
enter image description here
When you dblclick on the cell, the select (1) element appears, then you click on select element and it disappears. This problem can be solved only by fast mouseover on the popup (2)
So when I click on select element it just disappears and the default cell is shown... I don't know why it happens
Thank you for your answers
I am trying to create a custom toolbar in KendoUI grid following this link:http://demos.telerik.com/kendo-ui/grid/toolbar-template but getting stuck with an error.
This is what I am trying to do in my code:
<div id="example">
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<input type="search" id="category" style="width: 150px" />
</div>
</script>
<div id="grid"></div>
<script>
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: 'http://localhost:52738/Default1/KendoDataAjaxHandle',
type: "post",
dataType: "json"
}
},
schema: {
data: "Data",
total: function (response) {
return $(response.Data).length;
}
},
pageSize: 10
},
toolbar: kendo.template($("#template").html()),
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "CustomerAltID",
filterable: true
},
{
field: "CustomerID",
title: "Customer ID"
},
{
field: "CustomerName",
title: "Customer Name",
template: "<div class='customer-photo'" +
"style='background-image: url(../Content/Images/customerimg/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: CustomerName #</div>"
},
{
field: "Gender",
title: "Gender",
template: "<div class='gender-photo'" +
"style='background-image: url(../Content/Images/#:data.Gender#.jpg);'></div>"
}
]
});
var dropDown = grid.find("#category").kendoDropDownList({
dataTextField: "Gender",
dataValueField: "CustomerID",
autoBind: false,
optionLabel: "All",
dataSource: {
severFiltering: true,
transport: {
read: {
url: 'http://localhost:52738/Default1/KendoDataAjaxHandle',
type: "post",
dataType: "json"
}
},
schema: {
data:"Data"
}
},
change: function () {
var value = this.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "CustomerID", operator: "eq", value: parseInt(value) });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
});
});
</script>
</div>
I don't know what the problem is and its been hours that I am unable to figure out the solution for it.
I am using the following versions- Jquery v-3.1 and Jquery UI-1.12
Another possibility as mentioned in this github issue is to include <script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script> in html. This worked for me.
The problem is likely due to using jQuery v3.1
Kendo does not currently work with jQuery v3, officially. But it apparently can work if you also include jquery-migrate.
http://www.telerik.com/forums/jquery-3-0
The officially supported versions of jQuery are listed here:
http://docs.telerik.com/kendo-ui/intro/installation/prerequisites#supported-jquery-versions
Note that it states that Kendo R3 2016 SP2 should also work with jQuery 3.1.1.
So, you can:
use the version of jQuery that ships with/is supported by whatever
version of Kendo you use
OR use jQuery 3.1 with jquery-migrate
OR use Kendo R3 2016 SP2 and jQuery 3.1.1
I have the following code. The aim is to style a select2 box with textbox as the searchbox. So I have implemented it as multiselect , but I only want one option to be selected.
One option is to restrict using maximumSelectionLength: 1. But in this case the limit message will be shown which i do not want to happen. (Even if i hide it some space will be taken up ).
Other option is to hide everything other than last-child , in that case multiple values will be send to backend when form is submitted.
So is there a way to remove the currently selected value when the new value is selected in multiselect ?
I'm using select2 version 3.5.2
$('#placeSelect').select2({
width: '100%',
allowClear: true,
multiple: true,
placeholder: "Click here and start typing to search.",
data: [
{ id: 1, text: "Honolulu" },
{ id: 2, text: "Tokyo" },
{ id: 3, text: "Delhi" },
{ id: 4, text: "Zurich" }
]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script>
<link href="http://cdn.jsdelivr.net/select2/3.4.8/select2.css" rel="stylesheet"/>
<h3>Select a value</h3>
<input type="text" id="placeSelect"/>
You can only keep the last selected item and remove all other. Like this way :
$('#placeSelect').click(function () {
var t = $("#placeSelect").val().substr($("#placeSelect").val().length - 1);
$("#placeSelect").val(t).trigger("change");
});
$('#placeSelect').select2({
width: '100%',
allowClear: true,
multiple: true,
placeholder: "Click here and start typing to search.",
data: [
{ id: 1, text: "Honolulu" },
{ id: 2, text: "Tokyo" },
{ id: 3, text: "Delhi" },
{ id: 4, text: "Zurich" }
]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script>
<link href="http://cdn.jsdelivr.net/select2/3.4.8/select2.css" rel="stylesheet"/>
<h3>Select a value</h3>
<input type="text" id="placeSelect"/>
$('#placeSelect').select2({
width: '100%',
allowClear: true,
multiple: false,
placeholder: "Click here and start typing to search.",
data: [
{ id: 1, text: "Honolulu" },
{ id: 2, text: "Tokyo" },
{ id: 3, text: "Delhi" },
{ id: 4, text: "Zurich" }
]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script>
<link href="http://cdn.jsdelivr.net/select2/3.4.8/select2.css" rel="stylesheet"/>
<h3>Select a value</h3>
<input type="text" id="placeSelect"/>
You are using a multi option select, I suggest you to do the following:
multiple: false,
just add the following code in your query and it will work as you need it
$('ul.select2-choices').on("click", function() {
$("ul.select2-choices li .select2-search-choice-close").click();
});
I'm evaluating the Kendo UI Gantt chart to see if it fits our project requirements.
One particular requirement is to display a status column which would be a drop down in edit mode and has three statuses
Red 2. Green 3. Yellow, along with an image indicator something like what is shown in the image below
I am able to achieve the above effect when i edit a cell after using a custom editor for the drop down
function statusDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "Status",
dataValueField: "StatusId",
valueTemplate: '<img class="selected-value" src="#:data.Url#" alt="#:data.Status#" /><span>#:data.Status#</span>',
template: '<img class="selected-value" src="#:data.Url#" alt="#:data.Status#" /><span>#:data.Status#</span>',
dataSource: {
transport: {
read: function (e) {
// on success
e.success([{ Status: 'Not Started', StatusId: '0', Url: 'Image/red.png' }, { Status: 'Red', StatusId: '1', Url: 'Image/red.png' }, { Status: 'Green', StatusId: '2', Url: 'Image/red.png' }, { Status: 'Yellow', StatusId: '3', Url: 'Image/red.png' }]);
// on failure
//e.error("XHR response", "status code", "error message");
}
}
}
})
}
The Gantt Column for Status looks like the below snippet
{ field: "status", title: "Status", editable: true, width: 150, editor: statusDropDownEditor, template: '<img class="selected-value" src="#:data.Url#" alt="#:data.Status#" /><span>#:data.Status#</span>' }
However when done with selecting a particular item from drop down and on exiting the edit mode this is how the cell looks like
Seems like the default cell template in read only mode does not render html and the invokes the toString of the object bound to the cell, is there a way to fix this in the kendo UI Gantt
I have been trying to solve the same issue today and it looks like gantt columns do not support the template properties.
I have created a new feature suggestion on the Kendo user feedback site. If enough people vote for it maybe they will implement this.
The only work around I found was to prepend an image tag onto the field column like this. But this solution is not conditional.
<div id="gantt"></div>
<script>
$(document).ready(function() {
var gantt = $("#gantt").kendoGantt({
dataSource: [
{
id: 1,
title: "apples",
orderId: 0,
parentId: null,
start: new Date("2015/1/17"),
end: new Date("2015/10/17"),
summary:false,
expanded:false
},
{
id: 2,
orderId: 1,
parentId: null,
title: "banana",
start: new Date("2015/1/17"),
end: new Date("2015/3/17"),
summary:false,
expanded:true
}
],
views: [
{ type: "year", selected: true }
],
columns: [
{ field: "title", title: "fruit", width: 220 },
{ field: "start", title: "start", width: 80 }
],
}).data("kendoGantt");
$(".k-grid-content tbody[role='rowgroup'] tr[role='row'] td:first-child").prepend("<img href='#' alt='image here'></img>");
});
</script>
The sample page is on git.
I'm working with Kendo UI and Knockout JS libraries and have a strange problem.
I'm trying to display kendo grid within kendo window, but the rows inside the grid get duplicated.
Here's a piece of code:
JS:
$(document).ready(function () {
var clients = { FilteredClients: [{ ClientName: '1', ClientCode: 'Value 1' }, { ClientName: '2', ClientCode: 'Value 2'}], Header: 'TEST' };
var viewModel = ko.mapping.fromJS(clients);
ko.applyBindings(viewModel);
var showClientLookupWindow = function () {
var window = $("#clientLookupWindow").data("kendoWindow");
window.center();
window.open();
}
$('#btnClientLookup').bind('click', showClientLookupWindow);
});
HTML:
<div>
<a id="btnClientLookup" href="#" class="k-button k-button-icontext k-grid-search"><span
class="k-icon k-search"></span>Client Lookup</a>
<span data-bind="text: Header"></span>
<div id="clientLookupWindow" data-bind="kendoWindow: { isOpen: false, visible: false, width: '600px', height: '230px', modal: true, resizable: false, title: 'Client Lookup'}">
<div id="gridClients" data-bind="kendoGrid: { data: FilteredClients, columns: [ { field: 'ClientName', title : 'Client Name' }, { field: 'ClientCode', title: 'Client Code' } ], scrollable: false, sortable: true, pageable: false }">
</div>
</div>
<div id="gridClientsOutside" data-bind="kendoGrid: { data: FilteredClients, columns: [ { field: 'ClientName', title : 'Client Name' }, { field: 'ClientCode', title: 'Client Code' } ], scrollable: false, sortable: true, pageable: false }">
</div>
</div>
Running it in the browser, we see that there are 2 rows in gridClientsOutside, but after clicking btnClientLookup, the window pops up with the gridClients, which consists of 4 rows.
Did anyone encounter this issue or have a workaround for this?
Thanks in advance,
Ihor
At a quick glance, it looks like the bindings inside the kendoWindow section are getting bound twice, which is causing the issue.
There bindings can run in an async mode and that is probably how kendoWindow should be set in the knockout-kendo library.
For the moment, you can do this:
<div id="clientLookupWindow" data-bind="kendoWindow: { async: true, isOpen: false, visible: false, width: '600px', height: '230px', modal: true, resizable: false, title: 'Client Lookup'}">
This adds async: true in the kendoWindow binding options. Otherwise, you could do ko.bindingHandlers.kendoWindow.options.async = true; to set it globally, before calling applyBindings.
Here is a sample: http://jsfiddle.net/rniemeyer/2MexC/