So I have tried two methods:
<div id = "team-search-container">
<label for="team-search" class = "text-center">
<input type = "text" id = "team-search">
</label>
</div>
If I do this:
$( "#team-search" ).catcomplete({
delay: 0,
source: teamdata,
appendTo: '#team-search-container'
});
It will expand the div to show the elements, like this:
(Ignore where it says ComboBox elements, I meant to write Autocomplete elements)
But if I do something like this, without the appendTo option,
$( "#team-search" ).catcomplete({
delay: 0,
source: teamdata
});
It will work fine, but at the end of the body, it will make the empty space equivalent to the height of the autocomplete. Here is my CSS:
.ui-autocomplete{
position: relative;
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 20px;
}
.ui-autocomplete-category{
font-size: 18px;
list-style: none;
width: 200px;
}
.ui-menu-item{
list-style: none;
width: 200px;
cursor: default;
background-color: #565656;
}
.ui-helper-hidden-accessible {
display: none;
}
So since I have a max-height of 600px, it will create 600px of empty space at the bottom of the page if I don't append it to anything, even though it shows the autocomplete right under my search bar.
With the example you have provided, I have been unable to replicate the issue as you described it. Please review:
$(function() {
$.widget("custom.catcomplete", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
},
_renderMenu: function(ul, items) {
var that = this,
currentCategory = "";
$.each(items, function(index, item) {
var li;
if (item.category != currentCategory) {
ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
currentCategory = item.category;
}
li = that._renderItemData(ul, item);
if (item.category) {
li.attr("aria-label", item.category + " : " + item.label);
}
});
}
});
var data = [{
label: "anders",
category: ""
},
{
label: "andreas",
category: ""
},
{
label: "antal",
category: ""
},
{
label: "annhhx10",
category: "Products"
},
{
label: "annk K12",
category: "Products"
},
{
label: "annttop C13",
category: "Products"
},
{
label: "anders andersson",
category: "People"
},
{
label: "andreas andersson",
category: "People"
},
{
label: "andreas johnson",
category: "People"
}
];
$("#team-search").catcomplete({
delay: 0,
source: data,
appendTo: '#team-search-container'
});
});
.ui-autocomplete {
position: relative;
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 20px;
}
.ui-autocomplete-category {
font-size: 18px;
list-style: none;
width: 200px;
}
.ui-menu-item {
list-style: none;
width: 200px;
cursor: default;
background-color: #565656;
}
.ui-helper-hidden-accessible {
display: none;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="team-search-container">
<label for="team-search" class="text-center"><input type = "text" id = "team-search" /> </label>
</div>
Data and Categories are loading as expected. If you need further assistance, please review your code, check for any Console errors, and provide a Minimal, Reproducible Example. Your example did not include any sample data.
Related
This is my goal:
Before anything clicked || After user select the item that they want
After i done some research, i was able to make this with vue.js
https://jsfiddle.net/Hanstopz/Lcnxtg51/10/
But, when i trid to create this with Plain javascript, i was stuck
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form pesanan</title>
<style>
#import url(https://fonts.googleapis.com/css?family=Cookie);
[v-cloak] {
display: none;
}
*{
margin:0;
padding:0;
}
body{
font:15px/1.3 'Open Sans', sans-serif;
color: #5e5b64;
text-align:center;
}
a, a:visited {
outline:none;
color:#389dc1;
}
a:hover{
text-decoration:none;
}
section, footer, header, aside, nav{
display: block;
}
form{
background-color: #61a1bc;
border-radius: 2px;
box-shadow: 0 1px 1px #ccc;
width: 400px;
padding: 35px 60px;
margin: 50px auto;
}
form h1{
color:#fff;
font-size:64px;
font-family:'Cookie', cursive;
font-weight: normal;
line-height:1;
text-shadow:0 3px 0 rgba(0,0,0,0.1);
}
form ul{
list-style:none;
font-size:20px;
font-weight:bold;
text-align: left;
margin:20px 0 15px;
}
form ul li{
padding:20px 30px;
background-color:#f0f0f0;
margin-bottom:8px;
box-shadow:0 1px 1px rgba(0,0,0,0.1);
cursor:pointer;
}
form ul li span{
float:right;
}
/* ini bagian v-bind 'active' (menambahkan class ini ke li) */
.active{
color: white;
background-color: darkgreen;
}
div.total{
border-top:1px solid rgba(255,255,255,0.5);
padding:15px 30px;
font-size:20px;
font-weight:bold;
text-align: left;
color:#fff;
}
div.total span{
float:right;
}
</style>
</head>
<body>
<form id="main">
<h1>Menu kami</h1>
<ul id="menu">
<!-- {{service.name}} <span>{{service.price | currency}}</span> -->
</ul>
<div class="total">
Total harga:
<!-- Total: <span>{{total() | currency}}</span> -->
</div>
</form>
<script>
const menu = [
{ name: 'Cappucino', price: 35000, active: true },
{ name: 'Green tea latte', price: 40000, active: false },
{ name: 'Fish and chips', price: 50000, active: false },
{ name: 'Tuna sandwich', price: 30000, active: false },
{ name: 'Mineral water', price: 8000, active: false },
{ name: 'French fries', price: 18000, active: false }
]
menu.forEach((menu, price) => {
document.getElementById('menu').innerHTML += "<li>" + menu.name + "<span>" + "Rp " + menu.price + "</span>" + "</li>"
});
</script>
</body>
</html>
i managed to create the display from array, but i get confused on how do i add an active class when i click on the list and a function to calculate all active element... Anyone please help me.
{UPDATE}
after i combined the answer from Nabir Abbas, i can select and toggle between active and not active element. But i wanna make a total that can be counted whenever it has an active element. The price would be taken from the array based on active link... so i tried this
function totalCount() {
if ($("li").hasClass("active")) {
document.getElementById("subtotal").innerHTML = 0 + $(menu.price);
}}
but it does not seems right, can anyone help me?
This should work:
const menu = [{
id: 1,
name: 'Cappucino',
price: 35000,
active: true
},
{
id: 2,
name: 'Green tea latte',
price: 40000,
active: false
},
{
id: 3,
name: 'Fish and chips',
price: 50000,
active: false
},
{
id: 4,
name: 'Tuna sandwich',
price: 30000,
active: false
},
{
id: 5,
name: 'Mineral water',
price: 8000,
active: false
},
{
id: 6,
name: 'French fries',
price: 18000,
active: false
}
]
menu.forEach((menu, price) => {
const li = document.createElement('li')
li.innerHTML = `${menu.name}<span>Rp ${menu.price}</span>`
li.addEventListener('click', e => {
li.classList.toggle('active')
console.log('Active lements', getActiveCount())
})
document.getElementById('menu').append(li)
});
function getActiveCount() {
const activeListItems = document.querySelectorAll('#menu li.active')
return activeListItems.length
}
Here we are adding the event listener to per element on the go before appending them to the parent. Also, notice we are using classList.toggle which removes the active class if it exists on the list item and adds it if it doesn't
Edit 10/7/2020
To get the total price of the active elements, first you have to add the item price as an attribute to per li, you can use the following function:
so the above code becomes:
menu.forEach(item => {
const li = document.createElement('li')
li.innerHTML = `${menu.name}<span>Rp ${menu.price}</span>`
li.setAttribute('data-price', item.price)
li.addEventListener('click', e => {
li.classList.toggle('active')
console.log('Active lements', getActiveCount())
})
document.getElementById('menu').append(li)
});
Then:
function getTotalPrice() {
const activeItems = document.querySelectorAll('#menu li.active')
return activeItems.length ? Array.from(activeItems).reduce((acc, elem) => acc+=elem.getAttribute('data-price'), 0): 0
}
I'm trying to display this array of objects based on highest to lowest rating of each item. It works fine using the method on the v-for, but I would really like to display the list of objects in the order they appear initially and THEN call a function that displays them by highest to lowest rating.
When I have it set as v-for="item in items" and then try to call the method on a button, such as #click="rated(items)", nothing happens. Why would I be able to display the array initially on the v-for with the method attached, but not on a click event?
const items = [
{
name: "Bert",
rating: 2.25
},
{
name: "Ernie",
rating: 4.6
},
{
name: "Elmo",
rating: 8.75
},
{
name: "Rosita",
rating: 2.75
},
{
name: "Abby",
rating: 9.5
},
{
name: "Cookie Monster",
rating: 5.75
},
{
name: "Oscar",
rating: 6.75
}
]
new Vue({
el: "#app",
data: {
items: items
},
methods: {
rated: function(items) {
return items.slice().sort(function(a, b) {
return b.rating - a.rating;
});
},
sortByRating: function(items) {
return items.slice().sort(function(a, b) {
return b.rating - a.rating;
});
}
}
});
#app {
display: flex;
flex-flow: row wrap;
margin-top: 3rem;
}
.item {
flex: 1;
margin: .5rem;
background: #eee;
box-shadow: 0px 2px 4px rgba(0,0,0,.5);
padding: 1rem;
min-width: 20vw;
}
.toggle {
position: absolute;
top: 10px;
left: 10px;
padding: .5rem 1rem;
background: DarkOrchid;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="item in rated(items)"
class="item">
<p>{{item.name}}</p>
<p>{{item.rating}}</p>
</div>
</div>
Try to rewrite the array for the result returned by the method, like this.
#click="items = rated(items)
and, inside v-for you can keep using items.
I am working on a prototype that uses AngularJS to filter JSON data. A working sandbox is here:
https://codepen.io/ixdarchitects/pen/BaypxrW
I need your help to solve 2 Problems:
How to use the "Check All" and "Uncheck All" button to activate/deactivate all of the checkbox filters?
Filter by default: How to make the webpage only show gray bird when the page is initialized?
Thank you
Image
HTML:
<div ng-app="petSelector" ng-controller="PetCtrl" class="wrapper">
<h1>Pet Picker!</h1>
<hr>
<h3>Problems to solve:</h3>
<ol>
<li>How to use the "Check All" and "Uncheck All" button to activate/deactivate all of the checkbox filters?</li>
<li>Filter by default: How to make the webpage only show gray bird when the page is initialized?</li>
</ol>
<hr>
<div class="attr" ng-repeat="(prop, ignoredValue) in pets[0].FilterAttributes" ng-init="filter[prop]={}" ng-class="prop">
<b>{{prop}}:</b><br />
<span class="checkbox" ng-repeat="opt in getOptionsFor(prop)">
<label><input type="checkbox" ng-model="filter[prop][opt]" /> {{opt}}</label>
</span>
</div>
<button ng-click="checkAll()" style="margin-right: 10px">Check all</button>
<button ng-click="uncheckAll()" style="margin-right: 10px">Uncheck all</button>
<div class="results">Number of results: {{filtered.length}}</div>
<div class="pet" ng-repeat="p in filtered=(pets | filter:filterByProp | orderBy:order)">
<img ng-src="{{p.img}}">
<p>{{p.name}}</p>
</div>
<div ng-if="filtered.length == 0">Sorry, nothing matches your selection</div>
</div>
JS:
var petSelector = angular.module("petSelector", []);
petSelector.controller("PetCtrl", [
"$scope",
function($scope) {
$scope.pets = [
{
name: "Finch",
FilterAttributes: { species: "bird", size: "x-small", color: "red" },
img:
"http://upload.wikimedia.org/wikipedia/commons/7/7c/Fringilla_coelebs_chaffinch_male_edit2.jpg"
},
{
name: "Cockatiel",
FilterAttributes: { species: "bird", size: "small", color: "yellow" },
img: "http://upload.wikimedia.org/wikipedia/commons/0/07/Captive.jpg"
},
{
name: "African Gray Parrot",
FilterAttributes: { species: "bird", size: "large", color: "gray" },
img:
"http://upload.wikimedia.org/wikipedia/commons/2/28/Psittacus_erithacus_-perching_on_tray-8d.jpg"
},
{
name: "Macaw",
FilterAttributes: { species: "bird", size: "x-large", color: "blue" },
img:
"http://upload.wikimedia.org/wikipedia/commons/0/00/Macaw.blueyellow.arp.750pix.jpg"
},
{
name: "Shih Tzu",
FilterAttributes: { species: "dog", size: "x-small", color: "multi" },
img: "http://upload.wikimedia.org/wikipedia/commons/3/30/Shih-Tzu.JPG"
},
{
name: "Border Collie",
FilterAttributes: { species: "dog", size: "small", color: "multi" },
img:
"http://upload.wikimedia.org/wikipedia/commons/b/b1/Border_Collie_liver_portrait.jpg"
},
{
name: "American Staffordshire Terrier",
FilterAttributes: { species: "dog", size: "large", color: "gray" },
img: "http://upload.wikimedia.org/wikipedia/commons/d/de/AmStaff2.jpg"
},
{
name: "Bullmastiff",
FilterAttributes: { species: "dog", size: "x-large", color: "brown" },
img:
"http://upload.wikimedia.org/wikipedia/commons/9/9e/Bullmastiff_Junghund_1_Jahr.jpg"
}
];
$scope.filter = {};
$scope.getOptionsFor = function(propName) {
return ($scope.pets || [])
.map(function(p) {
return p.FilterAttributes[propName];
})
.filter(function(p, idx, arr) {
return arr.indexOf(p) === idx;
});
};
$scope.filterByProp = function(pets) {
var matchesAND = true;
for (var prop in $scope.filter) {
if (noSubFilter($scope.filter[prop])) continue;
if (!$scope.filter[prop][pets.FilterAttributes[prop]]) {
matchesAND = false;
break;
}
}
return matchesAND;
};
function noSubFilter(subFilterObj) {
for (var key in subFilterObj) {
if (subFilterObj[key]) return false;
}
return true;
}
}
]);
CSS
* {
box-sizing: border-box;
}
body {
font-family: 'Helvetica', arial, sans-sarif;
color: #fff;
}
h1 {
color: #fff;
margin: 0;
}
p {
margin-top: 0;
}
b {
color: #fff;
text-transform: uppercase;
}
.wrapper {
width: 800px;
margin: 20px auto;
padding: 40px;
background: #00a5bb;
border-radius: 8px;
}
.attr {
width: 32%;
margin: 0 .5%;
padding: 20px;
display: inline-block;
vertical-align: top;
}
.checkbox {
width: 49%;
display: inline-block;
margin: 10px 0 0;
}
.results {
font-size: 12px;
margin: 10px 0 20px;
padding-bottom: 10px;
border-bottom: 1px solid white;
}
.pet {
margin-bottom: 10px;
display: inline-block;
width: 33%;
text-align: center;
}
.pet img {
max-width: 85%;
max-height: 200px;
}
.pet.ng-enter, .pet.ng-leave {
-webkit-transition: all linear 0.5s;
transition: all linear 0.5s;
}
.pet .ng-enter {
opacity: 0;
}
.pet.ng-enter-active {
opacity: 1;
height: auto;
}
.pet.ng-leave-active {
opacity: 0;
height: 0;
}
I achieve what you are asking for adding the following two $scope functions.
$scope.checkAll iterates all pets FilteredAttributes and their values and set them at true into $scopeFilter.
$scope.uncheckAll simply reset the $scopeFilter object.
For the default filter, I removed ng-init="filter[prop]={}" to initiliaze $scopeFilter in the .js file as follows :
$scope.filter = {species : {bird : true} , color : {gray: true}};
$scope.checkAll = function(){
const result = {};
$scope.pets.map(pet => pet.FilterAttributes)
.forEach( attribute => Object.keys(attribute)
.forEach( prop => {
if(result[prop]){
result[prop][attribute[prop]] = true
}
else
{
result[prop] = {};
result[prop][attribute[prop]] = true
}
})
);
$scope.filter = result;
};
$scope.uncheckAll = function(){
$scope.filter = {}
};
You can find the solution here https://codepen.io/dmnized/pen/povRQOE?editors=1010
For the life of me i can't figure out why my images are only sometimes drag/droppable. It seems like when i am unable to drop, clicking on the image once before starting to drag it works (sometimes). I had thought that it was a focus issue so i tried using jQuery to focus on the ng-drag div in the call to the drop-success function.
I also kept changing the css, and i have a feeling that may have something to do with it, but then again im unsure if its some type of broadcasting problem.
I didn't touch the ngDraggable.js file at all......
Mobile seems to be fine, but on desktop this is very strange and seems to be intermittent. Please help. Link to my github repo:
https://github.com/TransientCW/BabyBox-Angular
html:
<div class="row chest" style="text-align:center;margin: 0 auto;width:95%;">
<div style="text-align:center;" class=".col-lg-1 imageChest">
<ul style="list-style:none; width:100%; text-align:center;margin:0 auto;padding:0;" class="draggable-objects" id="theList">
<li ng-repeat="image in gameCont.images track by $index"
class="item"
ng-drag="true"
ng-drag-data="image"
ng-drag-success="gameCont.onDragSuccess($data, $event, $index)"
style="height:110px;">
<img class="thumbnail"
ng-src="{{image.imgSrc}}"
width="75" height="75"/>
<span class="itemName"><h5>{{image.name}}</h5></span>
</li>
</ul>
</div>
<div class="innerChest" style="text-align:center;margin: 0 auto;width:90%;">
<span style="color:white;"><h4>Please place your 5 preferred images below</h4></span>
<div ng-drop="true"
ng-drop-success="gameCont.onDropComplete($data, $event, $index)"
style="width: 100%; height: 100%;
border:1px solid black;position:relative;bottom:21px;">
<ul style="list-style:none;">
<li ng-repeat="image in gameCont.selectedImages track by $index"
class="item">
<img class="thumbnail"
ng-src="{{image.imgSrc}}"
width="65" height="65">
</li>
</ul>
</div>
</div>
</div>
</br>
<div class="row" style="text-align:center;position:relative;bottom:95px;">
<button type="submit" class="btn btn-default" ng-click="gameCont.submitImages()">Submit</button>
<button type="submit" class="btn btn-default" ng-click="gameCont.reset()">Reset</button>
</div>
css:
body {
padding: 0px;
margin: 0px;
}
.item {
display:inline-block;
width: 75px;
height:75px;
margin: 15px;
vertical-align:top;
}
.headline {
color: black;
}
.row.chest {
position:relative;
background-image: url('../img/Empty-Box.png');
background-repeat: no-repeat;
background-size:contain;
background-position:center;
height: 705px;
width: 534px;
position:relative;
text-align:center;
}
.col-lg-1.imageChest {
position:absolute;
top:150px;
width: 100%;
text-align:center;
}
.innerChest {
position: absolute;
top: 480px;
left:60px;
width: 200px;
height: 120px;
padding: 5px;
text-align:center;
}
.itemName {
color:purple;
text-shadow:1px 1px 10px white;
}
*{
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
[ng-drag]{
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
[ng-drag]{
width: 100px;
height: 100px;
color:white;
text-align: center;
display: inline-block;
margin:0 10px;
cursor: move;
}
ul.draggable-objects:after{
display: block;
content:"";
clear:both;
}
.draggable-objects li{
float:left;
display: block;
width: 75px;
height:75px;
}
[ng-drag].drag-over{
border:0;
}
[ng-drag].dragging{
opacity: 0.5;
}
[ng-drop]{
text-align: center;
display: block;
margin: 20px auto;
position: relative;
width: 600px;
height: 200px;
display: block;
margin:20px auto;
position: relative;
}
[ng-drop].drag-enter{
border:0;
}
[ng-drop] span.title{
display: block;
position: absolute;
top:50%;
left:50%;
width: 200px;
height: 20px;
margin-left: -100px;
margin-top: -10px;
}
[ng-drop] div{
position: relative;
z-index: 2;
}
angular controller:
/**
* Created by cdub on 9/10/2016.
*/
angular.module('gameBox', ['ngRoute', 'ngDraggable'])
.controller('gameBoxController', [
'$window',
'$location',
'imageFactory',
gbControllerFunc
]);
function gbControllerFunc($window, $location, imageFactory) {
console.log('game controller set');
var gameCont = this;
gameCont.selectedFull = false;
gameCont.imageNames = [];
gameCont.errorRefresh = imageFactory.errorRefresh;
gameCont.submitImages = imageFactory.submit;
//This is the list of selectable, draggable objects
gameCont.images = [];
loadAllFactoryImages();
//This is the empty list, which will have dragged objects pushed into it
gameCont.selectedImages = imageFactory.selectedImages;
/**
* Function for loading/reloading copy of original factory array
*/
function loadAllFactoryImages() {
for(var i = 0; i < imageFactory.images.length; i++) {
gameCont.images.push(imageFactory.images[i]);
}
}
/**
* Find the object in the array, return its index for splicing
* #param obj
* #param arr
* #returns {number}
*/
function searchImages(obj) {
console.log('looking for name: ', obj.name);
console.log('in array: ', gameCont.images);
for(var i = 0; i < gameCont.images.length; i++) {
console.log(gameCont.images[i].name);
if(gameCont.images[i].name === obj.name) {
return i;
}
}
return -1;
}
/**
* Function to send email with the images that the user selected
*/
gameCont.submitImages = function() {
console.log('images submitted');
$location.path('/success');
};
/**
* Reset all arrays and reload home view
*/
gameCont.reset = function() {
console.log('resetting');
gameCont.images = [];
loadAllFactoryImages();
gameCont.selectedImages = [];
$window.location.reload();
};
gameCont.centerAnchor = true;
gameCont.toggleCenterAnchor = function () {gameCont.centerAnchor = !gameCont.centerAnchor};
gameCont.onDropComplete=function(data,evt){
if(gameCont.selectedImages.length < 5 ) {
var index = searchImages(data, gameCont.images);
console.log('index returned is: ', index);
gameCont.images.splice(index, 1);
gameCont.selectedImages.push(data);
gameCont.imageNames.push(data.name);
console.log('images up top: ', gameCont.images);
} else {
console.log('selected images full');
}
angular.element('#theList').focus();
};
gameCont.onDragSuccess=function(data, evt, $index){
console.log("133","$scope","onDragSuccess", "", evt);
delete($index);
};
}
angular image factory:
/**
* Created by cdub on 9/10/2016.
*/
angular.module('gameBox')
.factory('imageFactory', [
'$location',
imgFactoryFunc
]);
function imgFactoryFunc($location) {
console.log('factory loaded up');
var fact = this;
//Image object array with URL's for ng-repeat
fact.imgArray = [
{
name: 'Bib',
imgSrc: 'img/Composite/Accessory - Bib.jpg'
},
{
name: 'Hat',
imgSrc: 'img/Composite/Accessory - Hat.jpg'
},
{
name: 'Mittens',
imgSrc: 'img/Composite/Accessory - Mittens.jpg'
},
{
name: 'Socks',
imgSrc: 'img/Composite/Accessory - Socks.gif'
},
{
name: 'Toy',
imgSrc: 'img/Composite/Accessory - Toy.jpg'
},
{
name: 'Short Onesie 1',
imgSrc: 'img/Composite/Onesies - Short.jpg'
},
{
name: 'Short Onesie 2',
imgSrc: 'img/Composite/Onesies - Short 2.jpg'
},
{
name: 'Long Onesie',
imgSrc: 'img/Composite/Onesies - Long.jpg'
},
{
name: 'Booties',
imgSrc: 'img/Composite/Outerwear - Booties.jpeg'
},
{
name: 'Cardigan',
imgSrc: 'img/Composite/Outerwear - Cardigan.jpg'
},
{
name: 'Jacket',
imgSrc: 'img/Composite/Outerwear - Jacket.jpg'
},
{
name: 'Romper 1',
imgSrc: 'img/Composite/Outfits - Romper 1.jpg'
},
{
name: 'Romper2',
imgSrc: 'img/Composite/Outfits - Romper 2.jpg'
},
{
name: 'Gown',
imgSrc: 'img/Composite/Outfits - Gown.jpg'
},
{
name: 'Long Sleeve Dress',
imgSrc: 'img/Composite/Outfits - Long Sleeve Dress.jpg'
},
{
name: 'Top & Bottom 1',
imgSrc: 'img/Composite/Outfits - Top & Bottom.jpg'
},
{
name: 'Top & Bottom 2',
imgSrc: 'img/Composite/Outfits - Top & Bottom 2.jpg'
},
{
name: 'Tutu',
imgSrc: 'img/Composite/Outfits - Tutu.jpg'
},
{
name: 'Tank Dress',
imgSrc: 'img/Composite/Outfits - Tank dress.jpg'
},
{
name: 'Cotton Long Pants',
imgSrc: 'img/Composite/Pants - Cotton Long.jpg'
},
{
name: 'Denim Pants',
imgSrc: 'img/Composite/Pants - Denim.jpg'
},
{
name: 'Long Pants',
imgSrc: 'img/Composite/Pants - Long.jpg'
},
{
name: 'Short Pants',
imgSrc: 'img/Composite/Pants - Shorts.jpg'
},
{
name: 'Button Down Shirt',
imgSrc: 'img/Composite/Shirts - Button Down.png'
},
{
name: 'Graphic Tee Shirt',
imgSrc: 'img/Composite/Shirts - Graphic Tee.jpg'
},
{
name: 'Kimono Shirt',
imgSrc: 'img/Composite/Shirts - Kimono.jpg'
},
{
name: 'Polo Shirt',
imgSrc: 'img/Composite/Shirts - Polo Shirt.jpg'
},
{
name: 'Tank Shirt',
imgSrc: 'img/Composite/Shirts - Tank.jpg'
}
];
// Empty array to hold dropped image objects
fact.selectedImages = [];
return {
images : fact.imgArray,
selectedImages: fact.selectedImages,
errorRefresh: function() {
console.log('Refresh button clicked after error');
$location.path('/');
}
}
}
unfortunately, it was working fine. I was on a touchscreen laptop and getting weird behavior. On a regular laptop, the drag functionality worked fine, and on a desktop, it woked fine as well.....
I have a Dgrid that shows some data, say DataDgrid. I'd like to add a select control based on another Dgrid, say SelectDgrid, inside one of the cells in the main DataDgrid.
To add the select I am following this example: http://dojofoundation.org/packages/dgrid/tutorials/drop_down/
I have prepared a JSFiddle that shows that it works:
http://jsfiddle.net/amiramix/qqezJ/
Now, when I try to add the select it shows inside the table cell instead of floating over the main DataGrid. Please check this JSFiddle (click Edit to add the select to the main DataGrid):
http://jsfiddle.net/amiramix/qqezJ/5/
I guess its down to some CSS not being set properly. I tried to fiddle with z-index but without any results. Any help would be greatly appreciated.
Adding the code below to dismiss stackoverflow's warnings:
HTML:
<button id="editButton" type="button">Edit</button>
<div id="grid"></div>
CSS:
#grid {
line-height: 30px;
}
.mySelect {
border: 1px solid #b5bcc7;
background-color: #ffffff;
height: 17px;
/* Make this position: relative so our arrow is positioned within */
position: relative;
padding: 0;
}
.mySelect .label {
line-height: 17px;
vertical-align: middle;
}
.mySelect .arrow {
/* Position the arrow on the right-hand side */
position: absolute;
top: 0;
right: 0;
/* Use claro's arrow image */
background-image: url("https://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dijit/themes/claro/form/images/commonFormArrows.png");
background-position: -35px 70%;
background-repeat: no-repeat;
/* 16x16 with a white border and a gray background */
width: 16px;
height: 16px;
border: 1px solid #ffffff;
border-top: none;
background-color: #efefef;
}
.mySelect .dgrid {
position: absolute;
top: 17px;
left: -1px;
width: 100%;
display: none;
}
.mySelect .opened {
display: block;
}
JavaScript:
require([
"dojo/_base/declare",
"dojo/on",
"dgrid/OnDemandList",
"dgrid/OnDemandGrid",
"dgrid/Selection",
"dgrid/Keyboard",
"dojo/store/Memory",
"dojo/dom",
"dojo/dom-construct",
"dojo/dom-class",
"put-selector/put",
"dojo/domReady!"
], function(declare, on, List, OnDemandGrid, Selection, Keyboard, Memory, dom, domConstruct, domClass, put) {
var store = new Memory({
identifier: "id",
data: [
{
id: 0,
name: "One",
color: "blue",
value: 1},
{
id: 1,
name: "Two",
color: "red",
value: 2},
{
id: 2,
name: "Three",
color: "green",
value: 3},
{
id: 3,
name: "Four",
color: "orange",
value: 4}
]
});
var dataStore = new Memory({
identifier: "id",
data: [
{
id: 0,
name: "OneOne",
value: "OneTwo"},
{
id: 1,
name: "TwoOne",
value: "TwoTwo"}
]
});
var DropDown = declare([List, Selection, Keyboard]);
var Grid = declare([OnDemandGrid, Keyboard]);
var newGrid = new Grid({
store: dataStore,
columns: {
name: {
label: "Name"
},
value: {
label: "Value",
renderCell: function(object, value, td, options) {
put(td, "div#id-" + object.id, object.name);
}
}
}
}, "grid");
on(dom.byId("editButton"), "click", function(e) {
var ref = dom.byId("id-0");
ref.innerHTML = "";
put(ref, "#select.mySelect");
put(ref, "div.label.button", "choose...");
put(ref, "div.arrow.button");
var dropDown = new DropDown({
selectionMode: "single",
store: store,
renderRow: function(item) {
return domConstruct.create("div", {
innerHTML: item.name,
style: {
color: item.color
}
});
}
});
domConstruct.place(dropDown.domNode, "select");
dropDown.startup();
var open = false;
on(dom.byId("select"), ".button:click", function(e) {
open = !open;
domClass[open ? "add" : "remove"](dropDown.domNode, "opened");
});
});
});
You could use the editor plugin with a FilteringSelect. See: https://github.com/SitePen/dgrid/wiki/editor