I have Combobox dijit/form/ComboBox and I want that when a user starts typing the combo box shows result that contains letter.
For Example combox have this value
Nebraska
South Dakota
Delaware
when users type "D"
the result should be
South Dakota
Delaware
Simple just user the queryExpr: "*${0}*" to search if the combo select item contains the search keyword .
bellow a complete sample using this last :
require([
"dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"
], function(Memory, ComboBox){
var stateStore = new Memory({
data: [
{name:"", id:""},
{name:"Nebraska", id:"NE"},
{name:"South Dakota", id:"SD"},
{name:"Delaware", id:"DE"},
{name:"Test1", id:"T1"},
{name:"Test2", id:"T2"},
{name:"Test3", id:"T3"}
]
});
var ComboBox = new ComboBox({
id: "filteringCombo",
store: stateStore,
queryExpr: "*${0}*",
searchAttr: "name"
}, "filterCombo").startup();
});
<script type="text/javascript">
dojoConfig = {isDebug: true, async: true, parseOnLoad: true}
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet"/>
<body class="claro">
<div id="filterCombo"></div>
</body>
Related
I have an ENUM like this
define({
DEFAULT:1,
DDL:2,
props:{
1:{name: 'Default', value:1, id:1},
2:{name: 'DDL', value:2, id:2}
}
});
and I want to load it into a dijit/form/FilteringSelect
this is my code
var store = new Memory({
idProperty: "id",
data: type.props
});
var os = new ObjectStore({objectStore: store});
this.unitType = new Select({
name : 'name',
label : dojoConfig.i18n.unitType,
placeHolder: dojoConfig.i18n.unitType,
required: false,
store: os,
value: type.props[1].id,
searchAttr: 'name',
labelAttr: "name",
trim: true
});
but when I expand the dropdown list ... it doesnt expand without any errors in the console ... any idea what I made wrong ? thanks
You dropdown doesn't show anything because the given data wasn't an Array , but a js object ,
The dojo/store/Memory need ana array as data,
So to fix this you can edit your object by changing the object into array , or create and object from this and set to to your select , and this using Object.values(yourObject) that return an array of values from your object .
See below Working snippet :
require(["dijit/registry", "dijit/form/FilteringSelect", "dojo/store/Memory", "dojo/data/ObjectStore"],
function(registry, FilteringSelect, Memory, ObjectStore) {
var type = {
DEFAULT: 1,
DDL: 2,
props:{
1:{name: 'Default', value:1, id:1},
2:{name: 'DDL', value:2, id:2}
}
};
type.props = Object.values(type.props);
var store = new Memory({
idProperty: "id",
data: type.props
});
var os = new ObjectStore({
objectStore: store
});
new FilteringSelect({
name: 'name',
required: false,
store: os,
value: type.props[1].id,
searchAttr: 'name',
labelAttr: "name",
trim: true
}, "select");
});
<script>
dojoConfig = {
isDebug: true,
parseOnLoad: true,
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" />
<body class="claro">
<select id="select">
</select>
</body>
I'm trying to use Select2 to replace a multi-select drop down on my site.
The plan is that a user can select a list of countries by typing the country, which will then be auto-completed and stored in a tag-like structure, similar to how StackOverflow tags work.
For some reason, nothing is happening when I call the select2 function in my code.
Below I've included my code and a link to a JSFiddle.
Head:
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
JavaScript:
$(document).ready(function() {
// Countries to choose from
var countries = [{
id: 1,
text: 'United Kingdom'
}, {
id: 2,
text: 'United States of America'
}, {
id: 3,
text: 'Germany'
}, ];
// Create countries dropdown
$('#allowedCountries').select2({
placeholder: 'Select allowed countries',
data: countries,
tags: true,
tokenSeparators: [',', ' ']
});
})
JSFiddle
https://jsfiddle.net/3ms60wkw/
just call
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
before
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
and it should work perfectly fine
Jquery should be loaded first because select 2 depends on top of JQuery
I am displaying some data in a slickgrid using ajax call which looks similar like this.
india 564
usa 45454
japan 5454
There is no column called a 'Number' which have the row number values,in the data table I am fetching. How can I set a column called 'Number' and set values? What I want is something similar like this.
1 india 564
2 usa 45454
3 japan 5454
To display the row number, you don't need a specific field/property for it. You can define a column and specify the formatter column option to return a value based on the underlying indexing of the grid which the function receives as it's first argument. Since the grid is 0 index based, adjust accordingly.
var grid;
var dataView = new Slick.Data.DataView();
var data = [{country: "usa", number: "123"},
{country: "japan", number: "456"},
{country: "india", number: "789"}];
var options = {
editable: false,
enableCellNavigation: true
};
var columns = [{name: "Row No", formatter: function(row){return row+1}},
{field: "country", name: "Country"},
{field: "number", name: "Data"}];
dataView.setItems(data, 'country')
grid = new Slick.Grid("#myGrid", dataView, columns, options);
<link rel="stylesheet" type="text/css" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
<link rel="stylesheet" href="http://mleibman.github.io/SlickGrid/examples/examples.css" type="text/css"/>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.grid.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.dataview.js"></script>
<div id="myGrid" style="width:300px;height:150px;"></div>
I am trying to get the most basic example of backgrid.js to work. In other words, an example where i can drop the source folder into my xampp/htdocs folder and run without having to do anything else.
I have tried many ways to get the code to run but i cannot get anything to show up.
Here is the html page i made to try to see an example working.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="lib/backgrid.css"/>
<script src="jquery-1.10.2.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script src="lib/backgrid.js"></script>
</head>
<body>
<div id="grid">
<script type="text/javascript">
var Territory = Backbone.Model.extend({});
var Territories = Backbone.Collection.extend({
model: Territory,
url: "territories.json"
});
var territories = new Territories();
var columns = [{
name: "id", // The key of the model attribute
label: "ID", // The name to display in the header
editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
// Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
cell: Backgrid.IntegerCell.extend({
orderSeparator: ''
})
}, {
name: "name",
label: "Name",
// The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
}, {
name: "pop",
label: "Population",
cell: "integer" // An integer cell is a number cell that displays humanized integers
}, {
name: "percentage",
label: "% of World Population",
cell: "number" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
}, {
name: "date",
label: "Date",
cell: "date"
}, {
name: "url",
label: "URL",
cell: "uri" // Renders the value in an HTML anchor element
}];
// Initialize a new Grid instance
var grid = new Backgrid.Grid({
columns: columns,
collection: territories
});
// Render the grid and attach the root to your HTML document
$("#example-1-result").append(grid.render().el);
// Fetch some countries from the url
territories.fetch({reset: true});
</script>
</div>
</body>
</html>
Thanks for your time!
You seem to be adding the grid to non-existing element:
$("#example-1-result").append(grid.render().el);
Use $("#grid") instead and you should see the result.
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