Any idea why the icons are not shown in this tree?
this is the HTML:
<div kendo-tree-view="tree" k-data-source="treeData" k-options="treeOptions"></div>
this is the CSS:
#tree .k-sprite {
background-image: url("http://demos.telerik.com/kendo-ui/content/web/treeview/coloricons-sprite.png");
}
.rootfolder { background-position: 0 0; }
.folder { background-position: 0 -16px; }
and this is the javascript;
$scope.treeData = new kendo.data.HierarchicalDataSource({
data: [
{ text: "Furniture", icon: "folder", items: [
{ text: "Tables & Chairs", icon: "folder" },
{ text: "Occasional Furniture", icon: "folder" }
] },
{ text: "Decor", icon: "folder", items: [
{ text: "Bed Linen", icon: "folder" },
{ text: "Carpets", icon: "folder" }
] }
]
});
$scope.treeOptions = {
dataSpriteCssClassField: "icon"
};
There's nothing with the ID of tree in your DOM.
Try switching #tree to .k-treeview and the icons will show:
Plunker illustrating this here
Related
I have Vue.js app where use DevExtreme's DxDataGrid and DxPopup components. The datagrid contains a list of records (rows). When I double click particular row, the popup modal dialog opens and shows appropriate fields. That's fine.
The issue is I'm not able to change the style of popup modal dialog using CSS selectors in my component. I need to change all - border, colors, size of fields, fonts and so on.
The code looks as following:
The list:
<template>
<div>
<DxDataGrid
:data-source="testArray"
:row-alternation-enabled="true"
:show-borders="true"
:columns="columns"
#row-dbl-click="rowDblClick"
>
</DxDataGrid>
<v-app-types-by-product-modal ref="appTypesByProductModal" />
</div>
</template>
<script>
import "devextreme/dist/css/dx.light.css";
import { DxDataGrid } from "devextreme-vue/data-grid";
import VAppTypesByProductModal from "./v-app-types-by-product-modal.vue";
export default {
components: {
DxDataGrid,
VAppTypesByProductModal,
},
data() {
return {
testArray: [
{ Id: 1, ProductName: "Product 1", Status: "Yes", StageName: "Begin", SignDate: "11.07.2022" },
{ Id: 2, ProductName: "Product 2", Status: "Yes", StageName: "Middle", SignDate: "12.07.2022" },
{ Id: 3, ProductName: "Product 3", Status: "No", StageName: "End", SignDate: "13.07.2022" },
],
columns: [
{ dataField: "Id", caption: "ID", dataType: "number", width: "50px" },
{ dataField: "ProductName", caption: "PRODUCT", dataType: "string", width: "150px" },
{ dataField: "Status", caption: "STATUS", dataType: "string", width: "150px" },
{ dataField: "StageName", caption: "STAGE", dataType: "string", width: "150px"},
{ dataField: "SignDate", caption: "DATA", dataType: "string",width: "150px"},
{
type: "buttons",
width: "150px",
buttons: [
{
hint: "Edit",
icon: "edit",
visible(e) {
return !e.row.isEditing;
},
onClick: (e) => {
this.$refs.appTypesByProductModal.showModal(e.row.data);
},
},
{
hint: "Remove",
icon: "remove",
visible(e) {
return !e.row.isEditing;
},
},
],
},
],
selectedElement: {},
};
},
methods: {
rowDblClick(e) {
this.$refs.appTypesByProductModal.showModal(e.data);
},
},
};
</script>
<style scoped>
</style>
The modal dialog:
<template>
<v-modal-dialog
:visible="isModalVisible"
title="Title"
:width="500"
:height="500"
#hiding="onHiding"
>
<DxForm :form-data="selectedItem" label-mode="static">
<DxSimpleItem data-field="Id" :is-required="true" />
<DxSimpleItem data-field="ProductName" :is-required="true" :editor-options="{disabled: true}" />
<DxSimpleItem data-field="Status" />
<DxSimpleItem data-field="StageName" />
<DxSimpleItem data-field="SignDate" />
</DxForm>
<DxToolbarItem
widget="dxButton"
toolbar="bottom"
:options="okButtonOptions"
/>
<DxToolbarItem
widget="dxButton"
toolbar="bottom"
:options="closeButtonOptions"
/>
</v-modal-dialog>
</template>
<script>
import "devextreme/dist/css/dx.light.css";
import { DxForm, DxSimpleItem } from "devextreme-vue/form";
import { DxToolbarItem } from "devextreme-vue/popup";
import VModalDialog from "./v-modal-dialog.vue";
export default {
components: {
VModalDialog,
DxForm,
DxSimpleItem,
DxToolbarItem,
},
data() {
return {
isModalVisible: false,
selectedItem: {},
okButtonOptions: {
text: "Ok",
onClick: () => {
this.clearFormData();
this.isModalVisible = false;
},
},
closeButtonOptions: {
text: "Close",
onClick: () => {
this.clearFormData();
this.isModalVisible = false;
},
},
};
},
methods: {
showModal(item) {
this.selectedItem = {...item};
this.isModalVisible = true;
},
clearFormData() {
this.selectedItem = null;
},
onHiding() {
this.clearFormData();
this.isModalVisible = false;
},
},
};
</script>
<style scoped>
</style>
The modal dialog base:
<template>
<DxPopup
v-bind="$attrs"
v-on="$listeners"
:hide-on-outside-click="false"
:drag-enabled="true"
position="center"
#hiding="onHiding"
>
<slot v-for="(_, name) in $slots" :name="name" :slot="name" />
</DxPopup>
</template>
<script>
import "devextreme/dist/css/dx.light.css";
import { DxPopup } from "devextreme-vue/popup";
export default {
inheritAttrs: false,
components: {
DxPopup,
},
data() {
return {}
},
methods: {
onHiding() {
this.$emit("hiding");
},
},
};
</script>
<style scoped>
/* ::v-deep .dx-popup-normal {
border-radius: 20px !important;
}
::v-deep .dx-popup-title {
border-bottom: 0px !important;
} */
/* #dxPopupContainer .dx-popup-normal {
border-radius: 20px !important;
}
#dxPopupContainer .dx-toolbar {
border-bottom: 0px;
} */
/* #dxPopupContainer {
color: red;
background-color: green;
} */
/* ::v-deep .dx-overlay-content .dx-popup-normal .dx-popup-draggable .dx-resizable {
border-radius: 20px;
}
::v-deep .dx-toolbar > .dx-widget > dx-visibility-change-handler > dx-collection > dx-popup-title dx-has-close-button {
border-bottom: 0px;
} */
/* #dxPopupContainer .dx-popup-normal {
border-radius: 20px !important;
}
#dxPopupContainer .dx-popup-title {
border-bottom: 0px !important;
} */
</style>
Here's the CodeSandbox demo:
https://codesandbox.io/s/overview-devextreme-data-grid-forked-5cegqw
As you can see I've tried something, but nothing helped.
How to overcome this issue?
Replace
::v-deep .dx-popup-normal {
border-radius: 20px !important;
}
with
:global(.dx-popup-normal) {
border-radius: 20px !important;
}
I'm trying to give a background colour to my ApexCharts polarArea chart (I want the areas marked by red dots in the image to be grey/white):
I can't find a way to do this. I've tried adding fill to the various options, but nothing. I thought it might be possible with polygons like the radar chart, but no.
The closest I have come is by adding a CSS class to the chart on the containing Vue component:
<Chart class="chart" :myValues='this.myValues' :key="componentKey" />
.chart {
width: 320px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border-radius: 50%;
margin: auto;
padding-top: 3px;
padding-right: 4px;
}
But annoyingly it's not centred on the chart origin and even with pixel precise increments to padding it's not quite right! Also, if possible I'd like alternating colours for each of the rings, like is possible with the radar chart.
My full chart Vue component:
<template>
<div class="polarChart">
<apexcharts height="360" type="polarArea" :options="chartOptions" :series="series"></apexcharts>
</div>
</template>
<style scoped>
.polarChart {
align-items: center;
}
</style>
<script>
import VueApexCharts from 'vue-apexcharts'
export default {
name: 'Chart',
components: {
apexcharts: VueApexCharts,
},
props: ['myValues'],
data: function() {
return {
series: this.myValues,
plotOptions: {
polarArea: {
dataLabels: {
offset: 30
},
}
},
chartOptions: {
labels: ['A', 'B', 'C', 'D', 'E', 'F'],
colors:['#403d39', '#ffbe0b', '#00b4d8', '#e73265', '#90be6d', '#ada7c9'],
legend: {
show: false
},
yaxis: {
max: 100,
show: false
},
xaxis: {
categories: ['A.', 'B.', 'C.', 'D.', 'E.', 'F.']
},
dataLabels: {
enabled: true,
formatter: function (val, opts) {
return Math.round(opts.w.globals.series[opts.seriesIndex]) + "% " + opts.w.globals.labels[opts.seriesIndex]
},
background: {
enabled: true,
borderRadius:2,
},
style: {
colors: ['#403d39', '#ffbe0b', '#00b4d8', '#e73265', '#90be6d', '#ada7c9'],
}
},
tooltip: {
// enabled: false
},
chart: {
type: 'polarArea',
},
stroke: {
colors: ['#fff']
},
fill: {
opacity: 1
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: '100%'
},
legend: {
position: 'bottom'
}
}
}]
},
}
},
methods: {
addData(){
this.updateChart();
},
updateChart() {
this.series = [{
data: this.freshnessValues
}]
}
},
}
</script>
I have installed tailwind successfully and I have implemented when I put inside class. The problem is that I wanted to put it in #apply. I don't have any idea why isnt it working
https://i.stack.imgur.com/8dOg2.png
.active {
#apply border-r-4 border-green-400;
}
tailwind config
module.exports = {
purge: ["./pages/**/*.{js,ts,jsx,tsx}"],
darkMode: "class",
theme: {
colors: {
transparent: "transparent",
black: {
light: "#1D1D1F",
DEFAULT: "#000000",
},
white: "#fff",
},
extend: {
animation: {
// If you are using Toast component
left: "left 0.3s",
right: "right 0.3s",
// if you are using the animate variant of the modal
modal: "modal 0.3s",
// if you are using drawer variant right
"drawer-right": "drawer-right 0.3s",
// if you are using drawer variant left
"drawer-left": "drawer-left 0.3s",
// if you are using drawer variant top
"drawer-top": "drawer-top 0.3s",
// if you are using drawer variant bottom
"drawer-bottom": "drawer-bottom 0.3s",
},
keyframes: {
// if you are using drawer variant right
"drawer-right": {
"0%, 100%": { right: "-500px" },
"100%": { right: "0" },
},
// if you are using drawer variant left
"drawer-left": {
"0%, 100%": { left: "-500px" },
"100%": { left: "0" },
},
// if you are using drawer variant top
"drawer-top": {
"0%, 100%": { top: "-500px" },
"100%": { top: "0" },
},
// if you are using drawer variant bottom
"drawer-bottom": {
"0%, 100%": { bottom: "-500px" },
"100%": { bottom: "0" },
},
// if you are using the animate variant of the modal
modal: {
"0%, 100%": { top: "-500px" },
"100%": { top: "0" },
},
/* If you are using Toast component*/
left: {
"0%, 100%": { transform: "translateX(-100%)" },
"100%": { transform: "translateX(0)" },
},
right: {
"0%, 100%": { transform: "translateX(100%)" },
"100%": { transform: "translateX(0)" },
},
},
},
variants: {
/* If you are using Collapse or Accordion component*/
transitionProperty: {
height: "height",
},
},
},
variants: {
extend: {
backgroundColor: ["active", "checked"],
inset: ["checked"],
opacity: ["disabled"],
textColor: ["active"],
},
},
plugins: [],
};
I am using cytoscape.js to display a directed graph and I display 2 properties in a label.
I want to wrap the text and this is said to be possbile in the documentation but I cant get it to work. Can anyone help with the syntax?
'label': 'data(name)',
'font-size' : 14
'text-wrap': 'wrap/n'
text-wrap does not seem to work, it hangs up the graph display.
Do I need to set 'text-max-width'?
thanks in advance
You can't add the \n in the text-wrap css property, you are looking for the label property:
{
"selector": ".multiline-manual",
"style": {
"text-wrap": "wrap"
}
},
{
"selector": ".multiline-auto",
"style": {
"text-wrap": "wrap",
"text-max-width": 80
}
},
One of these classes should be added to the node you want your label to be wrapped. You can do it like this:
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: "node",
css: {
content: "data(name)",
height: "60px",
width: "60px"
}
},
{
selector: "edge",
css: {
"target-arrow-shape": "triangle"
}
},
{
selector: ".multiline-manual",
style: {
"text-wrap": "wrap"
}
},
{
selector: ".multiline-auto",
style: {
"text-wrap": "wrap",
"text-max-width": 80
}
}
],
elements: {
nodes: [{
data: {
id: "n0",
name: "This is a very long name and all I have to do is to add a class!"
},
classes: "multiline-auto"
},
{
data: {
id: "n1",
name: "Shorter"
},
classes: "multiline-auto"
},
{
data: {
id: "n2",
name: "This shouldn't wrap"
},
classes: "multiline-manual"
},
{
data: {
id: "n3",
name: "This should\nwrap"
},
classes: "multiline-manual"
}
],
edges: [{
data: {
source: "n0",
target: "n1"
}
},
{
data: {
source: "n1",
target: "n2"
}
},
{
data: {
source: "n1",
target: "n3"
}
}
]
},
layout: {
name: "dagre",
padding: 5
}
}));
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
left: 0;
top: 0;
float: left;
position: absolute;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://unpkg.com/cytoscape#3.3.0/dist/cytoscape.min.js">
</script>
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.js"></script>
<!-- cyposcape dagre -->
<script src="https://unpkg.com/dagre#0.7.4/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
I have a grid with very small columns with row filter, which cause them to have very small text-box. so I used
field: "OrderID",
width: 100,
filterable: {
cell: {
inputWidth: 65
}
}
but when I define inputWidth to enlarge the text field the filter operator does not move over and in fact cover up the partial space of the text-box. Therefore, I was wondering if there is a way to move the filter operator over or preferably over to the title header, like the columnMenu filter icon. Any help would be greatly appreciated, thanks.
I took the following example from: http://demos.telerik.com/kendo-ui/grid/filter-row
and modified width and inputwidth of orderID
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read:"http://demos.telerik.com/kendo- ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
},
height: 550,
filterable: {
mode: "row"
},
pageable: true,
columns:
[{
field: "OrderID",
width: 100,
filterable: {
cell: {
inputWidth: 65
}
}
},
{
field: "ShipName",
width: 500,
title: "Ship Name",
filterable: {
cell: {
operator: "contains"
}
}
},{
field: "Freight",
width: 255,
filterable: {
cell: {
operator: "gte"
}
}
},{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
}]
});
});