I am trying to append items to a multi-select with checkboxes. The list is prepared but with no checkboxes. this is the scenario
I have several category lists like dairy, vegetables and so on. Selected items from these lists are stored in an array. To get confirmation from the user, the selected items are displayed in another list that needs to be created dynamically similar to the one below. However, the list is prepared as in the second image.
This is the code
$.each(arr1, function(index, value){
$("#mySelect").append($("<option>",{
value: value,
text: value
}));
});
$('mySelect').multipleSelect({
isOpen: true,
keepOpen: true
});
Select with check boxes
multi select
This is a guess, I've never used multi-select. But if you wait to instantiate the plugin until the content is there it may work.
$.each(arr1, function(index, value){
$("#mySelect").append($("<option>",{
value: value,
text: value
}));
if (index == arr1.length-1) {
$('mySelect').multipleSelect({
isOpen: true,
keepOpen: true
});
}
});
Related
I have 2 Kendo Treeview; 1 without checkbox, another 1 is with checkboxes like example here.
Lets say I want to disable certain nodes on the second treeview, treeview with the checkboxes when I select a certain nodes on the first one (eg. I want to disable nodes that are not furniture when I select furniture). The process is kinda the same like example here but without the button, only from selecting the node on the first treeview. How do I achieve this?
TreeList has an event called select which can handle that behaviour for you:
select: function(e) {
let tv = $("#treeview-right").data("kendoTreeView"), // Gets the 2dn treeview reference
text = e.sender.dataItem(e.node).text; // Gets the 1st treeview selected text
// Iterates over the 2nd treeview items
tv.items().toArray().forEach(item => {
let dataItem = tv.dataItem(item), // Get the item related dataItem
disabled = (dataItem.type !== text); // Figures out if the current item is of selected type
// Gets the current item's checkbox
$(item).find('input[type="checkbox"]')
.prop('checked', false) // Uncheck it by default
.prop('disabled', disabled); // Disable/enable based on above condition
});
}
Dojo
Alternative: You can do like below to filter the second TreeView:
select: function(e) {
let tv = $("#treeview-right").data("kendoTreeView"),
text = e.sender.dataItem(e.node).text;
tv.dataSource.filter({ field: "type", operator: "eq", value: text });
}
Dojo
I am trying to create a multi checkbox filter on a column of the kendo grid with serversidefiltering set to true. In the multiselect-checkbox filter, I want to default the selection to some value. I am trying to achieve these 2 scenarios given below:
1) I would still want the multiSelect filter to show me all the values for that field and only have the default selections checked.
2) Also, have the data on the grid column filtered down to the checkbox checked in the multi-checkbox filter.
I have tried the following and I am mostly getting close to achieving either 1) or 2). But I am trying to get both of them working together.
Here's a link to the demo for 1)
With the above, I could get to only have the default checkbox checked, but the grid data on load does not show the filtered data, it shows everything.
For 2) I tried the following
Filter: [{
field: "ProductName", operator: "eq", value: "Chai"
}],
This above code filters the data on the grid correctly, but For the menu filter, the checkbox list is also narrowed down to contain only the list of filtered items sent by the server. (looking for a solution to narrow down the data in grid, but show all options in the checkbox filter).
Is there a way I could get both these requirements work together on a multi-checkbox filter with ServerSide filtering?
Any idea to resolve this issue is highly appreciated.
Thank you in advance!
When serverPaging of the Grid is enabled, dataSource should be provided for all the Filterable Multi Check widgets. It means, that you will have to implement method at your server which will return list of items to be displayed in filter.
columns: [
{
field: "FirstName",
filterable: {
multi: true,
//when serverPaging of the Grid is enabled, dataSource should be provided for all the Filterable Multi Check widgets
dataSource: {
transport: {
read: {
url: telerikWebServiceBase + "Employees/Unique",
dataType: "jsonp",
data: {
field: "FirstName"
}
}
}
}
},
},
Here is a working demo.
Here is a link to Telerik's demo.
I've doing some research about a problem I'm having with jQuery select2 plugin. The select2 sorts the selected items (no matter which order you choose them) when posting form. I know it may not be a select2 specific bug, but standard html select behaviour.
Now, how could I get the selected items IDs and then put them in a comma separated list in a hidden input so I can respect the order the items were chosen?
$("#formpacint").submit(function (event) {
var data = $('#campoprofesionales').select2('data');
$('#hidprofesionales').val(data);
});
The above code puts the selected items (in the order they were chosen) using its data property, into the hidden input, but the console.log shows them as objects (text+id I guess)..
I'd need to have: 35,14,29 (the ids of selected items as they were selected without sorting)
Thanks
Found a solution
var selections = (JSON.stringify($("#campoprofesionales").select2('data')));
var obj = $.parseJSON(selections);
$.each(obj, function() {
console.log(this.id);
// I here set a hidden field with the ids in the order they were selected
});
I want to add multiple check boxes to a column on edit/add mode. Now this column has a select box with multiple option enabled. I want to replace it with checkbox list or radio button list
My idea is: user should be able to select the relevant options as he desired by checking the check boxes which are listed in a particular cell(on add or edit mode:inline). Once the row is saved should show only the selected option user selected(without check boxes).
Below is my code snippet for the select box for particular column:
{
name: 'RoomTypes', index: 'RoomTypes', width: 300, editable: true, edittype: 'select',
editoptions: {
value: roomTypesFormatterEdit,
custom_element: function (value, options) {
return $.jgrid.createEl.call(this, "select",
$.extend(true, {}, options, { custom_element: null, custom_value: null }),
value);
},
custom_value: function ($elem, operation, value) {
if (operation === "get") {
return $elem.val();
}
},
multiple: true
},
align: 'left', formatter: roomTypesFormatter
},
Where "roomTypesFormatterEdit" return list of hotel room names which will display in select box.
Also I want to re-arrange the height of the editing(edit mode) row to fit with the height of the check boxes or to show all the items in the select box
Please Help
Thank you all
I think that you don't need to write your custom editing control (custom_element and custom_value) or custom formatter (formatter and unformat). Instead of that you need just add multiple: true property to editoptions to have base multiselect functionality. To improve visibility you can use some existing controls like jQuery UI MultiSelect Widget or Select2. The answer and this one provide demos which uses jQuery UI MultiSelect Widget. One more answer and this one provide demos which use Select2. The demos don't use multiselect functionality of Select2, but it's just an option of the control (see the documentation).
I create a dropdownlist as an editor on a grid, it works, but when I click on the dropdownlist and select an item then click somewhere else (lose the focus of dropdownlist), the selected item doesn't reflect to the grid, I see the text before the selection (but actually it is selected, when I click on the same item I see the item in the dropdownlist that I've selected)
Here is the example:
http://jsfiddle.net/uMws5/2/
How do I make the selection reflect to the grid?
The way I commonly solve this problem in the Kendo grid is to create lookups of the available selection items which I can then use to retrieve the value to be displayed in the grid by its id:
window.lookups = {};
var userTypeLookup = window.lookups["user_type"] = {};
$.each(user_type, function (idx, value) {
userTypeLookup[value.typeid] = value.typename;
});
In the column template I can reference the lookup to get the display value:
{
field: "typeid",
editor: userTypeList,
template: '#= lookups["user_type"][typeid] #'
}
Here is an updated Fiddle which implements this approach: http://jsfiddle.net/uMws5/4/