Could someone provide the proper implementation method for utilizing the jqxDropDownList with checkboxes enabled as a grid column?
The following code is modified from the jqwidgets grid demo code ‘cellediting.htm’.
I've implemented an independent dropdownlist with checkboxes with no problems.
I've implemented a grid with dropdownlist (with out checkboxes) with no problems.
however, as soon as i put checkboxes: true in the initeditor i get the following error:
Uncaught TypeError: Cannot read property ‘instance’ of undefined jqxlistbox.js:7
In certain ‘more complicated’ scenarios, the checkboxes property will succeed with ‘createeditor’, but fail with initeditor.
This leads me to believe there is probably some asynchronous loading going on and im building the editor too quickly.
The following code fails because of the ‘checkboxes: true’ property. remove that and it works great.
<head>
<title id='Description'>In order to enter in edit mode, select a grid cell and start typing, "Click" or press the "F2" key. You
can also navigate through the cells using the keyboard arrows or with the "Tab" and "Shift + Tab" key combinations. To cancel the cell editing, press the "Esc" key. To save
the changes press the "Enter" key or select another Grid cell. Pressing the 'Space' key when a checkbox cell is selected will toggle the check state.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="../../scripts/gettheme.js"></script>
<script type="text/javascript" src="generatedata.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var data =
[
{ firstname: 'joe', lastname: 'smith', sex: 'm' },
{ firstname: 'john', lastname: 'doe', sex: 'm' },
{ firstname: 'jane', lastname: 'doe', sex: 'f' }
];
var source =
{
localdata: data,
datatype: "array",
updaterow: function (rowid, rowdata, commit) {
commit(true);
},
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'sex', type: 'string' }
]
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 685,
source: dataAdapter,
editable: true,
selectionmode: 'multiplecellsadvanced',
columns: [
{ text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80 },
{ text: 'Last Name', columntype: 'textbox', datafield: 'lastname', width: 80 },
{ text: 'Sex', columntype: 'dropdownlist', datafield: 'sex', width: 195,
createeditor: function(row, cellvalue, editor)
{
var mydata =
[
{ value: "m", label: "Male" },
{ value: "f", label: "Female" }
];
var mysource =
{
datatype: "array",
datafields:
[
{ name: 'label', type: 'string' },
{ name: 'value', type: 'string' }
],
localdata: mydata
};
var myadapter = new $.jqx.dataAdapter(mysource, { autoBind: true });
editor.jqxDropDownList({ checkboxes: true, source: myadapter, displayMember: 'label', valueMember: 'value' });
}
}
]
});
// events
$("#jqxgrid").on('cellbeginedit', function (event) {
var args = event.args;
$("#cellbegineditevent").text("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
});
$("#jqxgrid").on('cellendedit', function (event) {
var args = event.args;
$("#cellendeditevent").text("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
});
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div id="jqxgrid"></div>
<div style="font-size: 12px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif; margin-top: 30px;">
<div id="cellbegineditevent"></div>
<div style="margin-top: 10px;" id="cellendeditevent"></div>
</div>
</div>
</body>
</html>
Can anyone offer assistance?
Extra help!!
Additionally, it seems like once i select a value in the dropdown, the actual ‘value’ gets changed to the display ‘label’. i.e., (“Male” or “Female”), but in this example, the only valid data for the sex field would be ‘m’ or ‘f’.
I've asked the same question on the jqwidgets official forums (here: http://www.jqwidgets.com/community/topic/dropdownlist-with-checkboxes-as-grid-column-editor/), and will post any answer they send here if they beat the community to it.
As far as I know, there is no DropDownList with Checkboxes Editor in the jQwidgets Grid. If there was such, I think that jQWidgets would at least have a sample about it so I suppose that you cannot use the DropDownList in such way in the jqxGrid widget.
I know that this is a rather old post, but still...
I'm surprised to see the response from the JQWidgets team, since they themselves have such an example on their website, using a dropdownlist with checkboxes as a grid editor.
It is available at http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/cellcustomediting.htm
where the editor is used in the Products column.
Mihai
Related
I use the select2 jQuery module to create a multiple choice select box. I did this in an early version (3.4.5) and it worked fine. But after upgrade to 4.1.0 pre-selection of an option does not work.
My code looks like below,
HTML - part:
<input type="text" id="accessories" />
JS:
jQuery(document).ready(function() {
var acceArray2 = [{id:0,text:"textA"},{id:1,text:"textB"},{id:2,text:"textC"}];
jQuery("#accessories").select2({
data: acceArray2,
multiple: true,
placeholder: "",
width: 200
});
jQuery("#accessories").val("1");
jQuery("#accessories").trigger("change");
});
My options show up when I click in the box. I can also select one or more option. But I expect "textB" should be selected when I open the page. This works fine with the original select2 version, but not with 4.1.0. The box is just empty.
I have spent hours trying to figure what's wrong, but I can't....
Alternatively, you can change the input tag to select. It seems to work below:
jQuery(document).ready(function() {
const acceArray2 = [{
id: 0,
text: "textA"
}, {
id: 1,
text: "textB"
}, {
id: 2,
text: "textC"
}];
jQuery("#accessories").select2({
data: acceArray2,
multiple: true,
placeholder: "",
width: 200
});
jQuery("#accessories").val("1");
jQuery("#accessories").trigger("change");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<select id="accessories"></select>
You can add selected option in array object like:
jQuery(document).ready(function() {
var acceArray2 = [{
id: 0,
text: "textA"
}, {
id: 1,
text: "textB",
selected: true
}, {
id: 2,
text: "textC",
selected: true
}];
jQuery("#accessories").select2({
data: acceArray2,
multiple: true,
placeholder: "",
width: 200
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<input type="text" id="accessories" />
What I'd like to do is add a radio button next to the Search Bar on my datatable to allow searching by just one column, Store Number.
I was referred to drawCallback but I don't believe this does what I expect it to do. All the answers I find seem to be appending elements to rows/cols in the datatable, but not the header itself.
The selector for this header is #store-table_wrapper.
$('#store-table').DataTable({
"columnDefs": [{
"targets": [7, 8],
"visible": false,
"drawCallback": function() {
$('<input type="radio" name="store-number-filter-selector" />').appendTo('#store-table_wrapper');
}
}]
});
I believe, getting your radio button displayed you're half-way through, the really challenging part is to disable default search bar, since you're unlikely to override its default behavior (to search through the entire table).
However, you may use your own, custom searchbar, like on the following DEMO:
//define source data
const srcData = [
{id: 1, name: 'apple', category: 'fruit'},
{id: 2, name: 'raspberry', category: 'berry'},
{id: 3, name: 'carrot', category: 'vegie'}
];
//define dataTable object
const dataTable = $('#mytable').DataTable({
sDom: 't',
data: srcData,
columns: [
{data: 'id', title: 'id'},
{data: 'name', title: 'name'},
{data: 'category', title: 'category'}
],
//modify header nodes, by appending radios
initComplete: function() {
const table = this.api();
[1,2].forEach(column => table.column(column).header().innerHTML += `<input type="radio" name="searchflag" value="${column}" class="searchflag"></input>`);
}
});
//prevent sorting change upon radio click
$('input.searchflag').on('click', function(event) {
//clear search upon choosing the other radio
$('#searchfield').val('');
dataTable.search('').columns().search('').draw();
event.stopPropagation();
});
//searchbar keyup callback
$('#searchfield').on('keyup', function() {
//grab checked radio button value or search the entire table by default
let targetColumn = null;
targetColumn = $('input.searchflag:checked').val();
if(!targetColumn){
dataTable.search($(this).val()).draw();
}
else {
dataTable.column(targetColumn).search($(this).val()).draw();
}
})
input.searchflag {
float: left;
}
<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<input id="searchfield"></input>
<table id="mytable"></table>
</body>
</html>
Having the DataTable below, I would like to display a dynamic popup or modal whenever a button is clicked which will serve as a confirmation modal.
The modal should contain data coming from the columns in the respected row in which the button was clicked.
#section scripts
{
<script>
$(document).ready(function() {
var table = $('#visitorsTable').DataTable({
"ajax": {
...
},
"columns": [
{ "data": "FirstName" },
{ "data": "LastName" },
{ "data": "Email" },
{ "data": "PhoneNumber" },
{ "data": "WifiCode" },
],
columnDefs: [
{
targets: [4],
render: function(wifiCode, b, data, d) {
if (wifiCode) {
var content = '<span>' + wifiCode + '</span>';
if (data.Email && data.PhoneNumber) {
content +=
'<button type="button" class="btnResendByMail>Email</button>'
return content;
}
}
}
]
});
$(document).on('click',
'.btnResendByMail',
function() {
$.ajax({
....
});
});
});
</script>
}
I've seen on DataTables site the "responsive" plugin.
However, on their example the modal is triggered always by clicking on the first column, and they display all the data of the row, not specific columns.
Any idea ?
...if I got your question properly, I believe, that's what you're trying to achieve:
srcData = [
{name: 'Albert', lastname: 'Einstein', email: 'emc2#gmail.com', code: 'XOIUE#WL'},
{name: 'Nikola', lastname: 'Tesla', email: 'firebolt#hotmail.com', code: 'OUWelks'},
{name: 'Rudolf', lastname: 'Hertz', email: 'radiohead#yahoo.com', code: 'joi23.xs'},
{name: 'James', lastname: 'Maxwell', email: 'magneto#gmail.com', code: 'Moiu23s'},
];
var dataTable = $('#mytable').DataTable({
sDom: 't',
data: srcData,
columns: [
{title: 'Name', data: 'name'},
{title: 'Lastname', data: 'lastname'},
{title: 'e-mail', data: 'email'},
{
title: 'Wi-Fi code',
data: 'code',
render: (data) => data+'<button style="float:right">e-mail</button>'
}
]
});
$('#mytable').on('click', 'button', event => {
let rowData = dataTable.row($(event.target).closest('tr')).data();
alert(`Are you sure you wanna send wi-fi code "${rowData.code}" to that sneaky bastard ${rowData.name} on his e-mail (${rowData.email})?`);
});
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="mytable"></table>
</body>
</html>
I have uploaded a page where the error occurs. It´s displayed in the console (please use F12 in Firefox or Chrome Browser).
http://preventdefault.lima-city.de/index.php
This line is wrong: "kendo.stringify(grid.getOptions())"
My Question: How must i change this code so that i could store the changed table settings?
I also insert the html code here, Thx for answer !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<style type="text/css">
.button-center {
text-align: center; /* button position in grid */
}
</style>
</head>
<body role="document">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">one</li>
<li>two</li>
</ul>
</div>
</div>
</nav>
<div class="container theme-showcase" id="main" role="main">
<div class="container">
<h1>Page<small> one</small></h1>
</div>
<div class="row-fluid">
<div id="grid_one"></div>
</div> <!-- row -->
<div class="row-fluid">
<div id="log"></div>
</div> <!-- row -->
</div> <!-- container -->
<script>
<!-- --------------------------------------------------------------------------------- -->
var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven",
"Michael", "Robert", "Laura", "Anne", "Nige"],
lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan",
"Suyama", "King", "Callahan", "Dodsworth", "White"],
cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London",
"Philadelphia", "New York", "Seattle", "London", "Boston"],
titles = ["Accountant", "Vice President, Sales", "Sales Representative",
"Technical Support", "Sales Manager", "Web Designer",
"Software Developer", "Inside Sales Coordinator", "Chief Techical Officer",
"Chief Execute Officer"],
birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"),
new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"),
new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"),
new Date("1966/03/27")];
function createRandomData(count) {
var data = [], now = new Date();
for (var i = 0; i < count; i++) {
var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
city = cities[Math.floor(Math.random() * cities.length)],
title = titles[Math.floor(Math.random() * titles.length)],
birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
age = now.getFullYear() - birthDate.getFullYear();
data.push({
Id: i + 1,
FirstName: firstName,
LastName: lastName,
City: city,
Title: title,
BirthDate: birthDate,
Age: age
});
}
return data;
}
<!-- --------------------------------------------------------------------------------- -->
function onChangeSelection() {
var selectedItem = this.dataItem(this.select());
var Text = '<h1><small>row name=</small>' + selectedItem.FirstName + " " + selectedItem.LastName + "</h1>";
console.log(Text);
$("#log").html(Text);
$("#ordernumber").val(selectedItem.ordernumber);
}
<!-- --------------------------------------------------------------------------------- -->
function startbuttonclick(e) {
var data = this.dataItem($(e.currentTarget).closest("tr"));
var Text = "<h1><small>Button click name=</small> " + data.FirstName + " " + data.LastName + "</h1>";
console.log(Text);
$("#log").html(Text);
e.preventDefault();
}
<!-- --------------------------------------------------------------------------------- -->
$(document).ready(function() {
$("#grid_one").kendoGrid({
dataSource: {
data: createRandomData(10),
schema: {
model: {
fields: {
FirstName: { type: "string" },
LastName: { type: "string" },
City: { type: "string" },
Title: { type: "string" },
BirthDate: { type: "date" },
Age: { type: "number" }
}
}
},
pageSize: 10
},
height: 500,
dataBound: saveState,
columnResize: saveState,
columnShow: saveState,
columnHide: saveState,
columnReorder: saveState,
columnLock: saveState,
columnUnlock: saveState,
selectable: true,
resizable: true,
columnMenu: true,
scrollable: true,
sortable: true,
filterable: true,
change: onChangeSelection,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5,
pageSizes: [5, 10, 20, 250]
},
columns: [
{
field: "FirstName",
title: "First Name",
width: "150px",
},
{
field: "LastName",
title: "Last Name",
width: "150px",
},
{
field: "City",
hidden: true
},
{
field: "Title",
hidden: true
},
{
field: "BirthDate",
title: "Birth Date",
template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #',
width: "175px",
},
{
field: "Age",
width: "150px",
},
{
command: {
text: "Start",
click: startbuttonclick },
title: "Start",
width: "65px",
attributes:{
"class":"button-center"}
}
]
});
<!-- ------------------------------------------------------------------------------ -->
var grid = $("#grid_one").data("kendoGrid");
function saveState(e) {
e.preventDefault();
localStorage["kendo-grid-one"] = kendo.stringify(grid.getOptions());
};
$(function (e) {
var options = localStorage["kendo-grid-one"];
if (options) {
grid.setOptions(JSON.parse(options));
} else {
grid.dataSource.read();
}
});
});
<!-- --------------------------------------------------------------------------------- -->
</script>
</body>
</html>
Edited for:
Your var grid = $("#grid_one").data("kendoGrid"); only defined once, and it may not have data upon defined, it maybe insert by your kendogrid after.
Domready Part should also need to have reference to it, you can either put it at origin location or move it into the function
From your and dfsq's replies, the problem is that json CANNOT store a function, so you have to add it back to when retrieved from the localstorage
In your current code, saveState will always be called before the setOptions one, which means the saveState just erased by your saveState function, so you have to move the setoptions code forward.
Changes a lot
$(document).ready(function() {
// Get options first
var options = localStorage["kendo-grid-one"];
if (options) {
options = JSON.parse(options);
// Workaround to addback event
options.columns[6].command.click = startbuttonclick;
}
$("#grid_one").kendoGrid({
dataSource: {
data: createRandomData(10),
schema: {
.....
});
if (options) {
$("#grid_one").data("kendoGrid").setOptions(options);
}
<!-- ------------------------------------------------------------------------------ -->
function saveState(e) {
var grid = $("#grid_one").data("kendoGrid");
e.preventDefault();
localStorage["kendo-grid-one"] = kendo.stringify(grid.getOptions());
};
See Demo Here, now it works.
saveState part use dfsq's may be better
options.columns[6].command.click = startbuttonclick; may be can write in a more elegant style, but here I just want to show why the issues come out and how to apply a basic solution.
I don't know kendo but the issue must be that the saveState function is called before the grid is declared.
JSFiddle: http://jsfiddle.net/8x7v7mga/1/
So somewhere in the construction of the kendo object, one of the saveState handlers is called.
You can avoid this by declaring the grid variable first and then in the saveState simply check if grid is defined or not:
var grid = null;
$("#grid_one").kendoGrid({ ... });
grid = $("#grid_one").data("kendoGrid");
function saveState(e) {
e.preventDefault();
grid && localStorage["kendo-grid-one"] = kendo.stringify(grid.getOptions());
};
The problem is that saveState function is called before grid is initialzed. you cantually don't need grid reference since saveState s called in grid context so you can simply use this instead:
function saveState(e) {
e.preventDefault();
localStorage["kendo-grid-one"] = kendo.stringify(this.getOptions());
};
I have a selectize-ng menu:
<input type="text" selectize="usersSelect.options" options="users" ng-model="users.selected" />
"users" is my array of objects. This menu works perfectly, I can select from the menu, type-ahead, and get tokenized names. My controller options are:
$scope.usersSelect = {
options: {
valueField: 'full_name',
labelField: 'full_name',
searchField: ['full_name'],
plugins: ['remove_button']
}
};
Except now I have another array of 6 "full_name" strings I need to be IN the menu at the start. I can't find any docs on how to pre-populate these menus. I'm using Angular 1.3.
You can set values to your model:
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/brianreavis/selectize.js/master/dist/js/standalone/selectize.min.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/kbanman/selectize-ng/master/dist/selectize-ng.js"></script>
</head>
<body data-ng-app="app" data-ng-controller="MainController">
<input type="text" selectize="config" options="suggestions" ng-model="selected"/>
<script>
var app = angular.module('app', ['selectize-ng']);
app.controller("MainController", function($scope, $timeout) {
$scope.config = {valueField: 'value',
labelField: 'text'};
$scope.suggestions = [{ value: 1, text: 'One' },
{ value: 2, text: 'Two' },
{ value: 3, text: 'Three' },
{ value: 4, text: 'Four' }];
$scope.selected = [$scope.suggestions[0]['value'], $scope.suggestions[3]['value']];
});
</script>
</body>
</html>
Looking at the other answer posted gave me the idea of assigning an array to selected, but the syntax in that answer gave me errors both in execution as in JSHINT.
So, I experimented until I got this:
_this.roleMenu = {
config: {
valueField: 'name',
labelField: 'name',
plugins: ['remove_button']
},
suggestions: _this.roles,
selected: []
};
_this.roleMenu.selected = [
_this.roleMenu.suggestions[2].name
];
For this menu in html:
<select selectize="invite.roleMenu.config" options="invite.roleMenu.suggestions" ng-model="invite.roleMenu.selected" />
This assumes my page controller to be InviteController as invite