I am using vuetable-2 and somehow the formatter for my fields does not work. The frontend for my isCoach field still shows as 1 but based on the formatter set, it should instead return Active.
Template
<vuetable
ref="vuetable"
api-url=""
:query-params="makeQueryParams"
:per-page="perPage"
pagination-path
data-path="Data"
:reactive-api-url="true"
:fields="fields"
:row-class="onRowClass"
#vuetable:pagination-data="onPaginationData"
#vuetable:cell-rightclicked="rightClicked"
>
Data
fields:[
{
name: "isCoach",
sortField: "isCoach",
title: "Coach",
titleClass: "",
dataClass: "text-muted",
width: "5%",
formatter: (value) => {
return value === '1' ? 'Active' : 'Disable'
}
},
]
Documentation: https://www.vuetable.com/guide/fields-definition.html#field-options
I found the solution. Apparently formatter doesn't work. Changing it to callback solved my issue.
Related
I've been trying to pass a prop in a component's template.
I think I'm missing some points here, and I didn't start to include my components in single files yet.
app.js
Vue.component('chat-response', {
props: ['response', 'senderClass'],
template: '<div>From {{ senderClass }} : {{ response.text }}</div>'
})
var app = new Vue({
el: '#app_chat',
data: {
responseList: [
{ id: 0, text: 'Response 1', type: 'Owner' },
{ id: 1, text: 'Response 2', type: 'Other' },
{ id: 2, text: 'Response 3', type: 'None' }
]
}
})
page.html
...
<chat-response v-for="response in responseList"
v-bind:key="response.id"
v-bind:response="response"
v-bind:senderClass="response.type"></chat-response>
...
Output :
From : Response 1
From : Response 2
From : Response 3
As we see, senderClass won't show up. I've tried different methods and only got errors that I could understand after reading around.
I don't wish to use response.type instead of senderClass because in the meantime, I'm setting senderClass after mounted with a real css class.
Maybe it's my approach that's completely wrong, could you give me some hints ?
I think the name of your property is wrong. Just change in page.html v-bind:senderClass="response.type" to v-bind:sender-class="response.type"
http://jsfiddle.net/eywraw8t/310360/
HTML attribute names are case-insensitive. Any uppercase character will be interpreted as lowercase. So camelCased prop names need to use their kebab-cased equivalents.
Apart from what Jns said You could get rid of v-bind altogether and just use :varibaleName for bindings.
Link to fiddle
https://jsfiddle.net/50wL7mdz/654614/#&togetherjs=J9vgbNaR7m
I'm trying to migrate my application which currently uses react-bootstrap-table to react-bootstrap-table-next but I'm having a problem.
What I am trying to do:
is to get the object of the selected line.
My code
const selectRow = {
mode: 'radio',
hideSelectColumn: true,
clickToSelect: true,
bgColor: 'red',
onSelect: (row) => {
console.log(row)
}
};
<div className="col-lg-12">
<BootstrapTable keyField='id' data={ products } columns={ columns } selectRow={ selectRow } />
</div>
result obtained
When I click on the line, it assigns the color red and prints the object to the selected line
but when I try to put the object in the state:
const selectRow = {
mode: 'radio',
hideSelectColumn: true,
clickToSelect: true,
bgColor: 'red',
onSelect: (row) => {
console.log(row)
this.setState({banco: row});
}
};
The selected line object is assigned to {banco} property as expected, but the line does not turn red.
I think you need to check this. As the above link mention, right now there's only one workaround is when you need to call setState in selectRow.onSelect, please also manage the selection by yourself via selectRow.selected I'm the creator of react-bootstrap-table and we will improve this issue in the future. Please follow above link to have a workaround, thanks
I'm using the pdf button from jquery datatables which is essentially the pdfmake library. The problem that I'm having is that I would like to add an additional paragraph right above my table when the user clicks the button to export the table. I have tried using the "message" parameter but for the life of me I cannot retrieve additional information right before the pdf will download. I tried doing this.
buttons: [
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
title: 'Entry',
header:true,
message:function() { $("#HeaderDesc").text()}
}
]
But I have been unsuccessful in my attempts. Does anyone have any ideas on how to accomplish this?
There is another easy solution to this.
I accomplished this by using splice property. You can do like this inside customize function.
doc.content.splice(0, 1, {
text: [
{ text: 'I am loving dataTable and PdfMake \n',bold:true,fontSize:15 },
{ text: 'You can control everything.',italics:true,fontSize:12 }
],
margin: [0, 0, 0, 12],
alignment: 'center'
});
This will splice at the first position [0 index] as well as replace 1 value with the above content.
Happy coding!!!!
You cannot. The config literal for the button is read once, and message does not support function type.
However, you can change the message in the not so well documented customize() callback. This is called just before dataTables pass the generated document to pdfmake. If you have defined a message, then there will exists message section(s) in the content nodes, and those nodes have a text attribute holding the actual message :
customize: function ( doc ) {
doc.content.forEach(function(content) {
if (content.style == 'message') {
content.text = 'this is a late created message'
}
})
}
As mentioned, you must define message before this will work. If you have not defined message, there will be no styles of type message you can manipulate. Your pdfhtml5 settings could look like this :
buttons: [
{
message: '__MESSAGE__',
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
title: 'Entry',
header:true,
customize: function ( doc ) {
doc.content.forEach(function(content) {
if (content.style == 'message') {
content.text = $("#HeaderDesc").text()
}
})
}
}
]
demo -> https://jsfiddle.net/xx5f5z6x/
I've this requirement of giving user provision of subscribing to certain categories. The layout which is to be designed is having -
checkbox => at top toggling automatic subscription setting.
dataview => at middle, having list of subscriptions and checkbox field.
button => allowing user to update the subscription list.
I've setup the dataview correctly. Dataview is added as fallows -
xtype: 'dataview',
itemTpl:'<div style="color:#fff;margin-left: 20px;background: transparent;" class="x-field-checkbox x-field">' +
'<span style="float:left">{name}</span>' +
'<span style="float:right">' +
'<input type="checkbox" class="x-input-el x-input-checkbox" style="display: inline;top:10px">'+
'</span>'+
'</div>',
fields:['name'],
data:[
{
name :'A'
},
{
name :'B'
},
{
name :'C'
}
When I try to add component no 1 and 3 ( specified above in question ) , dataview is not getting displayed. I'm getting checkbox and button only. When I inspect the rendered html, I realize that dataview is not even populating with data config. The code I used to add these three components is as fallows -
Ext.define("PApp.view.home.Subscription", {
extend:'Ext.Container',
xtype:'subscription',
config: {
layout:'fit',
fullscreen:true,
scrollable:false,
items: [
{
xtype:'container',
fullscreen:true,
items:[
{
xtype:'checkboxfield',
name : 'subscriber-setting',
label: 'Subscriber',
value: 'yes',
checked: true
},
{
xtype: 'dataview',
itemTpl:'<div style="color:#fff;margin-left: 20px;background: transparent;" class="x-field-checkbox x-field">' +
'<span style="float:left">{name}</span>' +
'<span style="float:right">' +
'<input type="checkbox" class="x-input-el x-input-checkbox" style="display: inline;top:10px">'+
'</span>'+
'</div>',
fields:['name'],
data:[
{
name :'A'
},
{
name :'B'
},
{
name :'C'
}
},
{
xtype:'button',
text:'Update',
ui:'action'
}
}
]
}
});
I can't figure out why dataview is not getting displayed ( not even populated with data ). When dataview is not breaded between the checkbox and button, it gets rendered as expected.
and when dataview is breaded ,it looks like this -
Please try giving some height in css of template or dataview config with hbox layout of container
Tried few things and managed to solve this problem. Mostly, list or dataview are used to display fullscreen content. But in my case, I needed it between two other components.
To make this work, I added following config to parent container -
layout: {
type: 'vbox',
align : 'stretch'
},
This was not sufficient though. Need to add flex config in each component. Without this config, dataview was not being seen. And I was wrong about data not populating indeed it was ( missed it first time since html is deeply nested ). Here's the preview how it looks.
How to show a checkbox in a dojo datagrid?
I would suggest setting cellType to dojox.grid.cells.Bool, instead of the formatter.The formatter gives you much freedom, but also the responsibility of gathering the data from all the checkboxes (for all the rows) afterwards. Something like this as a structure-entry should do the trick:
{
name: "is awesome?",
width: "auto",
styles: "text-align: center",
type: dojox.grid.cells.Bool, editable: true
}
Please make sure to use a write-store (like ItemFileWriteStore) and not just a read-store, otherwise you will be disabled to actually check the checkbox :)
Use formatter function as described in Widgets Inside dojo.DataGrid
You can return new dijit.form.Checkbox from formatter function in dojo 1.4
You need the IndirectSelection plugin for the EnhancedGrid, here's a fiddle: http://jsfiddle.net/raybr/w3XpA/5/
You can use something like this, with Json
HTML
<table id="myGrid" dojoType="dojox.grid.DataGrid"
clientSort="true" autoHeight="true" autoWidth="true">
<script type="dojo/method">
showFields();
</script>
</table>
DOJO
showFields:function () {
dojo.xhrPost({
url:"/getFields.do",
timeout:2000,
handleAs:"json",
load:dojo.hitch(this, "displayInGrid")
});
},
displayInGrid:function (jsonResult) {
var dataStore = new dojo.data.ItemFileReadStore(
{ data:jsonResult }
);
var checkboxLayout = [
[
{name:'ID', field:"id" },
{name:'Value', field:"id", formatter:this.addCheckBox}
]
];
var grid = dijit.byId("myGrid");
grid.setStructure(checkboxLayout);
grid.setStore(dataStore);
},
addCheckBox:function (val) {
var checkbox = "<input type='checkbox' name='myfields' value='" + val + "/>";
return checkbox;
},
If you are trying to show a checkbox selector on each row of the grid you can follow this tutorial
http://dojotoolkit.org/documentation/tutorials/1.8/working_grid/demo/selector.php
If the type of the cell is a boolean, then its value is displayed as either the string true or false. If a check box is desired, setting the cellType to be dojox.grid.cells.Bool and marking it as editable will make a checkbox appear.
http://dojotoolkit.org/reference-guide/1.9/dojox/grid/DataGrid.html#editing-cells
From markup, do like this for the desired result:
<th field="booleanField" cellType="dojox.grid.cells.Bool" editable="true">Checkbox field</th>