I am using Vuetify <v-data-table>.
How to add button on table header <th>?
This code is what I have tried so far.
<v-data-table v-model="selected" :headers="headers" :items="desserts">
<template slot="items" slot-scope="row">
<th><button>button</button></th>
</template>
</v-data-table>
<script>
export default {
data:() =>({
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: true,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
});
</script>
Please help.
You can use the header.<fieldname> slot template.
For example, to target the first column, name:
<v-data-table v-model="selected" :headers="headers" :items="desserts">
<template v-slot:header.name="{ header }">
{{ header.text }}
<v-btn>Button</v-btn>
</template>
</v-data-table>
Related
I'm currently usinfg Vuetify 1.5.18 and having some issues trying to create a nested menu usint the toolbar component and list-group.
The menu is working but when I click to expand it closes.
Here's the CodePen: https://codepen.io/fabiozanchi/pen/dybBmKj
And here the following code:
HTML
<div id="app">
<v-app id="inspire">
<v-toolbar>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat>Link One</v-btn>
<v-btn flat>Link Two</v-btn>
<v-btn flat>Link Three</v-btn>
<v-menu open-on-hover bottom offset-y>
<template v-slot:activator="{ on }">
<v-btn
color="primary"
dark
v-on="on"
>
Dropdown
</v-btn>
</template>
<v-list>
<v-list-group
v-for="item in items"
:key="item.title"
v-model="item.active"
:prepend-icon="item.action"
no-action
>
<template v-slot:activator>
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
<v-list-tile
v-for="subItem in item.items"
:key="subItem.title"
#click=""
>
<v-list-tile-content>
<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon>{{ subItem.action }}</v-icon>
</v-list-tile-action>
</v-list-tile>
</v-list-group>
</v-list>
</v-menu>
</v-toolbar-items>
</v-toolbar>
</v-app>
</div>
JavaScript
new Vue({
el: '#app',
data: () => ({
items: [
{
action: 'local_activity',
title: 'Attractions',
items: [
{ title: 'List Item' }
]
},
{
action: 'restaurant',
title: 'Dining',
active: true,
items: [
{ title: 'Breakfast & brunch' },
{ title: 'New American' },
{ title: 'Sushi' }
]
},
{
action: 'school',
title: 'Education',
items: [
{ title: 'List Item' }
]
},
{
action: 'directions_run',
title: 'Family',
items: [
{ title: 'List Item' }
]
},
{
action: 'healing',
title: 'Health',
items: [
{ title: 'List Item' }
]
},
{
action: 'content_cut',
title: 'Office',
items: [
{ title: 'List Item' }
]
},
{
action: 'local_offer',
title: 'Promotions',
items: [
{ title: 'List Item' }
]
}
]
})
})
Fixed. Working adding :close-on-content-click="false" on the v-menu:
<v-menu
v-model="menu"
:close-on-content-click="false"
:nudge-width="200"
offset-x
>
Codepen updated: https://codepen.io/fabiozanchi/pen/dybBmKj
You can also do this thing in v-list-group as (:close-on-content-click="true") by default in my case I solved it by this adding (#click.stop).
<v-list-group
#click.stop
v-for="item in items"
:key="item.title"
v-model="item.active"
:prepend-icon="item.action"
no-action
>
The code is almost identical from the tutorials. Here is the HTML:
<div fusioncharts
width="300"
height="100"
type="column2d"
dataSource="{{myDataSource}}" >
</div>
<div fusioncharts
width="300"
height="100"
type="column2d"
dataSource="{{myDataSource2}}" >
</div>
Here is my AngularJS code:
$scope.myDataSource = {
chart: {
caption: weekObject.week
},
data: [
{
label: "Saturday",
value: weekObject.days[0]._FE_Items_Sold.toString()
},
{
label: "Sunday",
value: weekObject.days[1]._FE_Items_Sold.toString()
},
{
label: "Monday",
value: weekObject.days[2]._FE_Items_Sold.toString()
},
{
label: "Tuesday",
value: weekObject.days[3]._FE_Items_Sold.toString()
},
{
label: "Wednesday",
value: weekObject.days[4]._FE_Items_Sold.toString()
},
{
label: "Thursday",
value: weekObject.days[5]._FE_Items_Sold.toString()
},
{
label: "Friday",
value: weekObject.days[6]._FE_Items_Sold.toString()
}
]
};
$scope.myDataSource2 = {
chart: {
caption: weekObject.week
},
data: [
{
label: "Saturday",
value: weekObject.days[0]._FE_Transactions.toString()
},
{
label: "Sunday",
value: weekObject.days[1]._FE_Transactions.toString()
},
{
label: "Monday",
value: weekObject.days[2]._FE_Transactions.toString()
},
{
label: "Tuesday",
value: weekObject.days[3]._FE_Transactions.toString()
},
{
label: "Wednesday",
value: weekObject.days[4]._FE_Transactions.toString()
},
{
label: "Thursday",
value: weekObject.days[5]._FE_Transactions.toString()
},
{
label: "Friday",
value: weekObject.days[6]._FE_Transactions.toString()
}
]
};
When I run this I get the first chart to render. The second one just has the phrase "No data to display." I noticed that even with the first graph, if I name the datasource anything but "myDataSource" it doesn't render either. That is confusing to me because how could I ever have a page with more than one graph if I can't reference multiple data variables to bind? I feel like the is more of a fix my ignorance than fix my code type question but..
Question: How can I render multiple graphs with FushionCharts with different data?
Works in my case.
var app = angular.module('dashApp', ["ng-fusioncharts"]);
app.controller('fusionController', ["$scope", function ($scope) {
$scope.myDataSource1 = {
chart: {caption: "Some week"},
data: [
{label: "Saturday", value: "100"},
{label: "Sunday", value: "300"},
{label: "Monday", value: "150"},
{label: "Tuesday", value: "240"},
{label: "Wednesday", value: "300"},
{label: "Thursday", value: "90"},
{label: "Friday", value: "170"}
]
};
$scope.myDataSource2 = {
chart: {
caption: "Some other week"
},
data: [
{label: "Saturday", value: "1100"},
{label: "Sunday", value: "1300"},
{label: "Monday", value: "1150"},
{label: "Tuesday", value: "1240"},
{label: "Wednesday", value: "1300"},
{label: "Thursday", value: "190"},
{label: "Friday", value: "1170"}
]
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<body ng-app="dashApp">
<div class="modal-body" ng-controller="fusionController">
<div fusioncharts
width="600"
height="300"
type="column2d"
dataSource="{{myDataSource1}}" >
</div>
<div fusioncharts
width="600"
height="300"
type="column2d"
dataSource="{{myDataSource2}}" >
</div>
</div>
</body>
Is it not working for any particular scenario?
If you're using a factory to try to load the data.json available for the $scope.myDataSource, this worked for me:
Factory
angular.module('myService', [])
.factory('dataLoad', ['$http', function($http){
return {
getData: function () {
return $http.get('data.json');
}
};
}])
Controller
Within controller, do this:
// within your controller
// create an empty object
$scope.myDataSource = {}; // this is kinda the trick. Without this,
// it complains of "No data to display"
dataLoad.getData()
.success(function(data) {
$scope.myDataSource = data;
});
Templates
Then as usual:
<fusioncharts width="600" height="500" type="column2d" dataSource="{{ myDataSource }}">
</fusioncharts>
Am trying to create a simple tree structure. Am trying to make the structure by using json data in the store.
Here is my view formTree.js
Ext.define('TestMVC.view.form.formTree', {
extend: 'Ext.form.FormPanel',
alias: 'widget.formTree',
itemId: 'form',
renderTo: Ext.getBody(),
requires: ['Ext.form.field.Text', '*', 'Ext.tip.*', 'Ext.tree.*','Ext.data.*','Ext.tip.*'],
layout: {
type: 'vbox',
padding: 20
}, //******************************
//bodyStyle: 'background-image:url(../images/eggplant.jpg)!important',
initComponent: function () {
// this.addEvents('create');
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
Ext.QuickTips.init();
Ext.apply(this, {
activeRecord: null,
xtype:'treepanel',
store: new Ext.data.TreeStore({
proxy: {
type: 'ajax',
url: 'DataService/tree.json',
reader: {
type: 'json'
}
},
root: {
text: 'Ext JS',
id: 'src',
expanded: true
},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}] }),
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
}
},
renderTo: Ext.getBody(),
height: 300,
width: 250,
, title: 'Files'
useArrows: true,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Expand All',
handler: function(){
tree.expandAll();
}
}, {
text: 'Collapse All',
handler: function(){
tree.collapseAll();
}
}]
}]
});
this.callParent();
}
});
And the json data in tree.json is as follows.
{ text: 'Maths', id: 'mathDept', children: [
{ text:'X1', id: 'x1', leaf: true },
{ text:'X2', id: 'x2', leaf: true}
]
},
{ text: 'Biology', id: 'bioDept', children: [
{ text: 'Y1', id: 'y1', leaf: true},
{ text: 'Y2', id: 'y2', leaf: true}
]
},
{ text: 'English', id: 'engDept', children: [
{ text: 'Z1', id: 'z1', leaf: true},
{ text: 'Z2', id: 'z2', leaf: true},
{ text: 'Z3', id: 'z3', leaf: true}
]
}
On running this I get the error cannot read property dom of null. Please help.
I think that data is incorrectly formatted. That must be an array:
[
{ text: 'Maths', id: 'mathDept', children: [
{ text:'X1', id: 'x1', leaf: true },
{ text:'X2', id: 'x2', leaf: true}
]
},
{ text: 'Biology', id: 'bioDept', children: [
{ text: 'Y1', id: 'y1', leaf: true},
{ text: 'Y2', id: 'y2', leaf: true}
]
},
{ text: 'English', id: 'engDept', children: [
{ text: 'Z1', id: 'z1', leaf: true},
{ text: 'Z2', id: 'z2', leaf: true},
{ text: 'Z3', id: 'z3', leaf: true}
]
}
]
In the following example, I would like to replace the hard-coded items array with a call to a jsonstore with with same items read dynamically. I have tried referencing the store through xtype but get an error that Object has no method 'getItemId' - please let me know what I am doing wrong and many thanks for your help
Ext.define("MyApp.view.Main", {
extend: 'Ext.ux.slidenavigation.View',
requires: [
'Ext.Container',
'Ext.MessageBox',
'Ext.Panel',
'Ext.Toolbar',
'Ext.event.publisher.Dom'
],
config: {
fullscreen: true,
slideSelector: 'x-toolbar',
selectSlideDuration: 200,
list: {
maxDrag: 400,
width: 200,
items: [{
xtype: 'toolbar',
docked: 'top',
ui: 'light',
title: {
title: 'Navigation',
centered: false,
width: 200,
left: 0
}
}]
},
/***************************************************************/
/* Want to replace this items array with dynamic call to store */
/***************************************************************/
items: [{
title: 'Item 1',
slideButton: {
selector: 'toolbar'
},
items: [{
xtype: 'toolbar',
title: 'Item 1',
docked: 'top'
},{
xtype: 'panel',
html: '<img src="resources/images/guide.jpg" width="100%" />'
}]
},{
title: 'Item 2',
slideButton: {
selector: 'toolbar'
},
items: [{
xtype: 'toolbar',
title: 'Item 2',
docked: 'top'
},{
xtype: 'panel',
html: '<img src="resources/images/guide.jpg" width="100%" />'
}]
}]
}
Store sample
Ext.define('MyApp.store.Navigation', {
extend: 'Ext.data.Store',
alias: 'widget.navstore',
requires: [
'MyApp.model.Navigation'
],
config: {
model: 'InspectionApp.model.Navigation',
storeId: 'navStore',
proxy: {
type: 'ajax',
url: '/path/to/navigation.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
grouper: {
property: 'group',
sortProperty: 'groupOrder'
}
}
});
json sample
[
{
"title": "Item 1",
"slideButton": "{selector: 'toolbar'}",
"items": "[{xtype: 'toolbar',title: 'Item 1',docked: 'top'},{xtype: 'panel',html: '<img src='resources/images/guide.jpg' width='100%' />'}]",
"handler": ""
},
{
"title": "Item 2",
"slideButton": "{selector: 'toolbar'}",
"items": "[{xtype: 'toolbar',title: 'Item 2',docked: 'top'},{xtype: 'panel',html: '<img src='resources/images/guide.jpg' width='100%' />'}]",
"handler": ""
}
]
Assuming your store is loading correctly, you can get a reference to it by calling
Ext.getStore('navStore')
or by assigning your store to a variable:
var yourStore = Ext.define('MyApp.store.Navigation', {
extend: 'Ext.data.Store',
alias: 'widget.navstore',
requires: [
'MyApp.model.Navigation'
],
config: {
model: 'InspectionApp.model.Navigation',
storeId: 'navStore',
proxy: {
type: 'ajax',
url: '/path/to/navigation.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
grouper: {
property: 'group',
sortProperty: 'groupOrder'
}
}
});
To populate the items object I would put it in a container:
{
xtype: 'container',
id: 'container_id',
}
then
for (var i = 0; Ext.getStore('navStore').getCount(); ++i){
var record = Ext.getStore('navStore').getAt(i);
var myComponent = Ext.create(...
//make the component you want to add with the data from the record
);
Ext.ComponentQuery.query('#container_id')[0].add(myComponent);
}
I am using the YUI Rich Editor (SimpleEditor) which gives an editor that has a heading that says "Text Editing Tools" and a +/- button that shows/hides the editing tools. I don't need this, how can I hide them or disable these features?
Thanks!
Add this CSS to the page:
.yui-skin-sam .yui-toolbar-container .yui-toolbar-titlebar {
display: none;
}
For future reference, YUI support is here: http://yuilibrary.com/forum/
You (I) can use a configuration like this:
var myConfig = {
height: '300px',
width: '522px',
toolbar: {
collapse: false,
titlebar: '',
draggable: false,
buttons: [
{ group: 'textstyle', label: 'Font Style',
buttons: [
{ type: 'push', label: 'Bold CTRL + SHIFT + B', value: 'bold' },
{ type: 'push', label: 'Italic CTRL + SHIFT + I', value: 'italic' },
{ type: 'push', label: 'Underline CTRL + SHIFT + U', value: 'underline' },
{ type: 'separator' },
{ type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },
{ type: 'color', label: 'Background Color', value: 'backcolor', disabled: true }
]
},
{ type: 'separator' },
{ group: 'indentlist', label: 'Lists',
buttons: [
{ type: 'push', label: 'Create an Unordered List', value: 'insertunorderedlist' },
{ type: 'push', label: 'Create an Ordered List', value: 'insertorderedlist' }
]
}
]
}
};