I have a Grid and I would like to change the background color, do you know how to do it ?
Thanks for your help, have a nice day.
Here is my code :
var jsonStore = new dojo.data.ItemFileReadStore({url: "..." ?>"});
var model = new dojox.grid.data.DojoData(null,jsonStore,{jsId: 'model', rowsPerPage: 20, query: { date: '*' }});
var view1 = {
cells: [[
{name: 'x', width: "80px", field: "date"},
{name: 'y', width: "50px", field: "weight"},
{name: 'z', width: "100px", field: "nurse"}
]]
};
var layout = [ view1 ];
<div id="gridWeight" dojoType="dojox.Grid" model="model" structure="layout" autoWidth="true" style="height: 150px"></div>
You can either use the onStyleRow event or adapt the CSS directly - in your case:
.tundra #gridWeight .dojoxGridRow,
.tundra #gridWeight .dojoxGridRowOdd {
background: red;
}
Related
Tabulator does not accept header color change
Through the css below, I'm trying to change the header color of all my columns, but I'm not getting this adjustment
tried to do it this way but it's not going.
I use vue3 + vite + tabulator 5.4
<style scoped>
.tabulator {
font-size: 12px;
width: 100%;
}
.tabulator .tabulator-header,
.tabulator-col .headerBackgroundColor {
background-color: #acacac;
}
</style>
this is my tabulator
tabulator.value = new Tabulator('#tabulator', {
data: dataRelatorio.value,
layout: 'fitColumns',
autoResize: true,
pagination: 'local',
paginationSize: 20,
rowHeight: 25,
paginationSizeSelector: [10, 20, 30, 50, 100, 200, 500, 1000],
movableColumns: true,
paginationCounter: 'rows',
responsiveLayout: 'hide',
placeholder: 'No record found',
locale: 'pt-BR',
langs: {
'pt-BR': {
pagination: {
page_title: 'Show page',
first: 'First',
first_title: 'First page',
last: 'Next',
last_title: 'Next page',
prev: 'Previous',
prev_title: 'Previous page',
next: 'Next',
next_title: 'Next Page',
all: 'All',
},
},
},
columns: columns,
rowFormatter: function (row) {
//console.log(row.getData());
if (row.getData().in_delayed === 'delayed') {
const children = row.getElement().childNodes;
children.forEach((child) => {
child.style.backgroundColor = '#FFFACD';
});
}
},
});
This should work:
<style>
.tabulator .tabulator-header .tabulator-col {
background-color: #acacac;
}
</style>
Notes:
I didn't use the scoped directive on <style> tag.
you can have more than one <style> tag in a component, some scoped and some regular. The regular ones are "normal" CSS, they apply to the entire DOM.
you can also apply the above styles inside a scoped style tag. The selector would most likely be .tabulator :deep(.tabulator-header .tabulator-col), but I can't know for sure until you provide a runnable minimal example, so I could inspect it.
I'm trying to convert my jsfiddle code to VSCode, but I wasn't able to, as copy and pasting + code format editing were not working.
(jsfiddle link in question: https://jsfiddle.net/b2pLmqrj/ )
I've attempted to copy and paste it in, fix the format with tags (script, style, etc), and completely redo it from scratch, but to no avail. Does anyone know what I should fix in it to change it to VSCode format?
HTML:
<div id="map"></div>
CSS:
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
Javascript:
mapboxgl.accessToken = 'pk.eyJ1IjoiMWRyaXZlYnV5IiwiYSI6ImNsNjN1NjhjejBhZjYzaW44YXN0MzByb3YifQ.mykT1INa7Fbkk4VqIpdM_Q';
const map = new mapboxgl.Map({
container: 'map', // container ID
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/light-v11', // style URL
center: [-68.137343, 45.137451], // starting position
zoom: 5 // starting zoom
});
map.on('load', () => {
// Add a data source containing GeoJSON data.
map.addSource('maine', {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
// These coordinates outline the United States.
'coordinates': [
[
[-125.15625000000001, 48.04870994288686],
[-124.71679687499999, 43.32517767999296],
[-125.15625000000001, 39.639537564366684],
[-121.11328124999999, 34.59704151614417],
[-121.11328124999999, 34.59704151614417],
[-117.158203125, 32.47269502206151],
[-105.732421875, 31.27855085894653],
[-97.20703125, 25.64152637306577],
[-84.287109375, 29.84064389983441],
[-80.947265625, 24.84656534821976],
[-74.970703125, 35.38904996691167],
[-66.62109375, 45.02695045318546],
[-68.73046875, 47.39834920035926],
[-71.455078125, 44.84029065139799],
[-82.880859375, 41.96765920367816],
[-88.154296875, 48.22467264956519],
[-109.072265625, 49.03786794532644],
[-123.134765625, 49.15296965617042],
[-125.15625000000001, 48.04870994288686],
]
]
}
}
});
// Add a new layer to visualize the polygon.
map.addLayer({
'id': ' ',
'type': 'fill',
'source': 'maine', // reference the data source
'layout': {},
'paint': {
'fill-color': '#0080ff', // blue color fill
'fill-opacity': 0.2
}
});
// Add a black outline around the polygon.
map.addLayer({
'id': 'outline',
'type': 'line',
'source': 'maine',
'layout': {},
'paint': {
'line-color': '#000',
'line-width': 0
}
});
});
I have a use case whereby sequential numbers need to be displayed in a table of data in the UI of an app, beginning at 1. The app is built using Vue and Buefy for the UI component library. Here is a screenshot of some sample data in such a table:
This needs to have a third column added and should display 1 in the first row and 2 in the second row.
I looked in the Buefy docs to see if their table component has built-in capability to do this but didn't see anything that fit. If that is the case, the data passed to the table component will need to provide it.
Since the format of the data passed to the table component is an array of objects I was thinking there might be a way to use each object's index, incremented by 1, for this purpose. But I'm not sure how to get this:
const data = [
{ color: 'blue', size: 'large', height: 'tall' },
{ color: 'green', size: 'medium', height: 'short' },
{ color: 'purple', size: 'small', height: 'average' }
];
to be this:
const data = [
{ id: '1', color: 'blue', size: 'large', height: 'tall' },
{ id: '2', color: 'green', size: 'medium', height: 'short' },
{ id: '3', color: 'purple', size: 'small', height: 'average' }
];
I tried the following but it does not give the desired outcome:
console.log([...data, ...Object.keys(data)];
How can the desired end result be achieved? I'm looking for a simple approach, if possible.
Also, I was concerned about what happens if an element gets removed from the original array of objects...would that mess up the sequential numbering that's based on the index number? I tested that situation by executing data.splice(0,1); but examining the results in the console, the objects appear to get re-indexed and therefore it shouldn't be an issue. Unless someone knows otherwise.
If I understood you correctly try with index:
new Vue({
el: '#demo',
data() {
return {
items: [
{ color: 'blue', size: 'large', height: 'tall' },
{ color: 'green', size: 'medium', height: 'short' },
{ color: 'purple', size: 'small', height: 'average' }
]
}
},
methods: {
del(i) {
this.items.splice(i, 1)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div v-for="(item, i) in items" :key="i">
<div>{{ i+1 }} - {{ item.color }}</div>
<button #click="del(i)">delete</button>
</div>
</div>
Using Sencha Touch ver 2.3.1a
The carousel control in PassDownEntryView
{
xtype: "container",
itemId: "pageEntryItemsContainer",
layout: "fit",
items:
[
{
xtype: "carousel",
itemId: "carouselItems",
direction: "horizontal",
items:
[
]
}
]
}
I'm creating multiple instances of a view for a carousel
var data = JSON.parse(response.responseText);
var itemViewArray = [];
var index = 0;
Ext.Array.each(data.Data, function(item)
{
var itemView = Ext.create('MCConnect.view.PassDown.PassDownEntryItemView');
itemView.setItemId('EntryItemId' + index);
itemView.configureEntry(item);
itemViewArray.push(itemView);
index++;
});
if(itemViewArray.length > 0)
{
carouselControl.setItems(itemViewArray);
}
configureEntry sets the html in the PassDownEntryItemView
{
xtype: "label",
html: ""
}
Code that sets the label:
configureEntry: function(item)
{
var fieldLabel = Ext.ComponentQuery.query('label')[0];
fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>");
}
It creates the right number of carousels but only the first instance has the label set. The rest of them are blannk. I did an output of configureEntry() and
it is properly passwing each item. Seems like im missing something when setting it. Any ideas?
Update: 6/21 - A
It seems like the problem is the instance of the view. Cause When I create a hard coded view:
var item1 =
{
item: "test1"
}
var itemView = new MCConnect.view.PassDown.PassDownEntryItemView();
itemView.configureEntry(item1);
var item2 =
{
item: "test2"
}
var itemView1 = new MCConnect.view.PassDown.PassDownEntryItemView();
itemView1.configureEntry(item2);
carouselControl.setItems([itemView, itemView1]);
I still get the result that only "Test2" shows even though there are two carousel panels showing up. Except the second one is blank
Update 6/22
Ive added my PassDownEntryItemView code below:
Ext.define('MCConnect.view.PassDown.PassDownEntryItemView',
{
extend: 'Ext.form.Panel',
xtype: 'passdownEntryItemView',
requires:
[
'Ext.data.Store',
"Ext.field.Text",
"MCConnect.view.Commons.AutoHeightTextArea"
],
config:
{
itemId: '',
isReadOnly: true,
passDownEntryItemId: 0,
layout: "vbox",
items:
[
{
xtype: 'fieldset',
style: 'padding: 0; margin: 1px;',
items:
[
{
xtype: "label",
html: ""
}
]
}
],
listeners:
[
]
},
initialize: function()
{
},
configureEntry: function(item)
{
this.setPassDownEntryItemId(item.passDownEntryId);
var fieldLabel = Ext.ComponentQuery.query('label')[0];
fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>");
}
});
6/22
Thanks to Akatum suggestion. I figured it out. I labeled the itemId of the label as #labelDistrictItem-0 so in my configureEntry() i searched for it then set it and renamed the itemId:
var fieldLabel = Ext.ComponentQuery.query('passdownEntryItemView #labelDistrictItem-0')[0];
fieldLabel.setItemId('labelDistrictItem-' + item.id);
fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>");
and it works now
Problem is in your configureEntry function. var fieldLabel = Ext.ComponentQuery.query('label')[0]; will always returns first label component in your whole application. So in your case it will always returns label which is in your first carousel panel.
Instead of using Ext.ComponentQuery.query('label')[0]; you should look for specific label in specific MCConnect.view.PassDown.PassDownEntryItemView by using up() or down() methods (depends on layout of your application).
Edit
You can get your label component by looking for it only in child components of your PassDownEntryItemView. For this you can use down() method. So your configureEntry method should look like this:
configureEntry: function(item) {
this.setPassDownEntryItemId(item.passDownEntryId);
var fieldLabel = this.down('label');
fieldLabel.setHtml("<div style='text-align: center; padding-top: 5px; padding-bottom: 5px;'><span>" + item.item + "</span></div>");
}
Fiddle with working example: https://fiddle.sencha.com/#fiddle/6t4
I have the following code for adding buttons in ever row of a DataGrid:
structure: [
{field: 'msConstId', width: '0%', name: 'Milestone',hidden: true},
{field: 'edit', width: '8%', name: 'Edit',formatter: function(data, rowIndex) {
return new dijit.form.Button({style: "width: 80px;",label:"Edit", iconClass:"dijitIconEditTask",showLabel:true, onClick:function(){ updateMilestone.show(); populateUpdateControls(); }});
}},
{field: 'delete', width: '10%', name: 'Delete',formatter: function(data, rowIndex) {
return new dijit.form.Button({style: "width: 80px;",label:"Delete", iconClass:"dijitIconDelete",showLabel:true, onClick:function(){ deleteMilestoneDialog(); }});
}}
]
The problem is that I want to assign an id to each of the button as "editBtnRowIndex" and "deleteBtnRowIndex". I want to use the id's for enabling and disabling buttons in specific grid rows.
Is that possible?
I had to go with a work around for this by looking at the data in other fields and disabling the button for that row with something like this:
var rowdata = grid.getItem(rowIndex);
rowIndex is passed as param to formatter function.
var val = rowdata.myRowID;
if(val=='specific value') {
//return disabled button
} else {
//return enabled button
}