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
Related
new Vue({
el: "#app",
data: {
getQuestionAnswers: [
{
name: 'foo',
checked: false,
status: 'ok'
},
{
name: 'bar',
checked: false,
status: 'notok'
},
{
name: 'baz',
checked: false,
status: 'medium'
},
{
name: 'oo',
checked: false,
status: 'medium'
}
]
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
width:100%
}
.red {
color: red;
}
.bcom {
width: 100%;
display: flex;
}
.container1 {
width: 50px;
}
.container2 {
width: calc(100% - 105px);
padding: 8px 0;
height: 30px;
box-sizing: border-box;
}
.h-line {
height: 1px;
margin-bottom: 18px;
width: 100%;
background-color: black;
}
.container3{
margin-left: 5px;
width: 50px;
}
.point:hover {
width: 200px;
}
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<div class="bcom"
v-for="(group, index) in getQuestionAnswers"
:key="index + group.name"
:group="group"
>
<div>
<input type="checkbox" v-model="group.checked"/>
{{ group.name }}
</div>
<div class="container2">
<div class="h-line" v-if="group.checked"></div>
</div>
<div>
<input type="checkbox"/>
{{ group.status }}
</div>
</div>
</div>
Onclick of checkbox, how to add multiple lines from one point in Vuejs?
As seen in the image, On click of the checkbox, Based on the status, I need to match from one point to three multiple status. like "ok, notok, medium"
i have taken v-model in the checkbox,to check and perfome two way data binding But not sure....what to do further. Do I need to take computed property and write condition to check and draw three multiple lines???
there are som positioning issues here, but this sample should be enough for you to get it working:
template
<div id="demo" :ref="'plane'">
<canvas :ref="'canvas'"></canvas>
<div
class="bcom"
v-for="(group, index) in getQuestionAnswers"
:key="index + group.name"
:group="group"
>
<div>
<input
type="checkbox"
v-on:click="() => onToggleCheckbox(group)"
v-model="group.checked"
:ref="'checkbox_' + group.name"
/>
<span>{{ group.name }}</span>
</div>
<div>
<span>{{ group.status }}</span>
<input type="checkbox" :ref="'status_' + group.name" />
</div>
</div>
</div>
script:
export default {
name: 'App',
data: () => ({
ctx: undefined,
draw(begin, end, stroke = 'black', width = 1) {
if (!this.ctx) {
const canvas = this.$refs['canvas'];
if (!canvas?.getContext) return;
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
this.ctx = canvas.getContext('2d');
}
if (stroke) {
this.ctx.strokeStyle = stroke;
}
if (width) {
this.ctx.lineWidth = width;
}
this.ctx.beginPath();
this.ctx.moveTo(...begin);
this.ctx.lineTo(...end);
this.ctx.stroke();
},
onToggleCheckbox(group) {
const planeEl = this.$refs['plane'];
const planeRect = planeEl.getBoundingClientRect();
const fromEl = this.$refs['checkbox_' + group.name];
const fromRect = fromEl.getBoundingClientRect();
const from = {
x: fromRect.right - planeRect.left,
y: fromRect.top + fromRect.height / 2 - planeRect.top,
};
const toEl = this.$refs['status_' + group.name];
const toRect = toEl.getBoundingClientRect();
const to = {
x: toRect.left - planeRect.left,
y: toRect.top + toRect.height / 2 - planeRect.top,
};
console.log(planeRect, from, to);
this.draw(
Object.values(from),
Object.values(to),
group.checked ? 'white' : 'black',
group.checked ? 3 : 2
);
},
getQuestionAnswers: [
{
name: 'foo',
checked: false,
status: 'ok',
},
{
name: 'bar',
checked: false,
status: 'notok',
},
{
name: 'baz',
checked: false,
status: 'medium',
},
{
name: 'oo',
checked: false,
status: 'medium',
},
],
}),
};
style
body {
background: #20262e;
padding: 20px;
font-family: Helvetica;
}
#demo {
position: relative;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
canvas {
position: absolute;
background: red;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #fff;
z-index: -1;
}
.bcom {
width: 100%;
display: flex;
justify-content: space-between;
z-index: 2;
}
this only draws one line but you could easily add the others. I figured you might change your data schema to something like:
getQuestions() {
{
name: string,
checked: boolean,
statuses: [string...],
},
getStatuses() {
{
name: string
}
but not knowing about your requirements here, I decided to post the above before making further changes. (here is the sort of refactor I was referring to: https://stackblitz.com/edit/vue-yuvsxa )
addressing first comment:
in app.vue only there is one data called[((questions))], inside question we are looping and setting the status.
this is easy to address with a bit of preprocessing:
questionsAndStatusesMixed: // such as [{...question, ...statuses}],
questions: [],
statuses: [],
mounted() {
const statusesSet = new Set()
this.questionsAndStatusesMixed.forEach(item => {
const question = {
name: item.name,
checked: item.checked,
answer: item.status // is this the answer or .. these never made sense to me,
statuses: this.statuses // assuming each question should admit all statuses/that is, draw a line to each
}
const status = {
name: item.name
}
this.questions.push(question)
statusesSet.add(status)
})
Array.from(statusesSet).forEach(item => this.statuses.push(item))
}
I want to create a popout menu that is flush with the edge of the screen. It seems like popper doesn't like this because it always forces a margin of 5px. I've tried setting offset and padding values to 0, but it doesn't seem to work. Is there a way to do this without forcing it like
margin-left: -5px !important
Here are the tippy options ive included and a JSFiddle:
https://jsfiddle.net/tbgwknpf/1/
<div class="button">
click me!
<div id="menu-content">
this is a tippy!
</div>
</div>
</div>
body {
margin: 0;
}
.bar {
height: 100px;
width: 100%;
background: coral;
}
.button {
background: aquamarine;
height: 100%;
width: 200px;
display: flex;
align-items: center;
justify-content: center;
}
const menu = document.getElementById("menu-content");
menu.style.display = 'block';
tippy('.button',
{
content: menu,
allowHTML: true,
interactive: true,
trigger: 'click',
hideOnClick: 'toggle',
placement: 'bottom-start',
offset: [0, 0],
popperOptions: {
modifiers: [
{
name: 'offset',
options: {
offset: [0, 0]
}
},
{
name: 'flip',
options: {
padding: 0,
flipVariations: false
}
}
]
},
});
If I add a margin to the button element, the tippy will align flush against the edge like I want it to. It is only when I ask it to be flush against the screen that it adds the translationX of 5px
You can do it using a theme.
JS:
tippy(targets, {
theme: "your-theme",
});
CSS:
.tippy-box[data-theme~="your-theme"] .tippy-content {
padding: 0;
}
Note the extra .tippy-content as the padding is in the child of .tippy-box.
You don't have to change any CSS styles. You just need to pass the right options to the underlying Popper.js:
popperOptions: {
modifiers: [
{
name: 'preventOverflow',
options: {
padding: 0,
},
},
],
},
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.
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