I'm listing a survey. First, all the students on the list are listed. When a student chooses from the combobox, the answers of that student are listed. When I list all of them, when I transfer to pdf, it transfers beautifully. But when the student chooses, the Turkish characters change when transferring the pdf.
#(Html.Kendo().ComboBox()
.Name("ogrenciyeGoreComboBox")
.Filter("contains")
.AutoBind(true)
.DataTextField("AdSoyad")
.DataValueField("Id")
.Events(e =>
{
e.Change("onChangeOgrSecimi");
})
.HtmlAttributes(new
{ required = "required",
id = "OgrenciyeGoreCombo",
style = "background:#f7dcd4;"
})
.SelectedIndex(0)
.DataSource(sourceag =>
{
sourceag.Read(read =>
{
read.Action("AnketOgrenciSec", "Anket", new
{
ViewBag.AnketId
});
});
})
)
$("#exportAnket").click(function () {
kendo.drawing.drawDOM($("#divAnketSonucc"), {
paperSize: "A4",
landscape: true,
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },
template: $("#page-template").html()
})
.then(function (group) {
console.log(group);
return kendo.drawing.exportPDF(group);
})
.done(function (data) {
kendo.saveAs({
dataURI: data,
fileName: "AnketSonucu.pdf"
});
});
});
Related
I use this code to have two custom textfields (TodTextfield) and a button (TodButton).
Padding(
padding: const EdgeInsets.only(top: 20),
child: TodTextField.formField(
key: _dayKeys[1],
controller: _facebookController,
labelText: localizations.hintFacebook,
textInputAction: TextInputAction.next,
),
),
Padding(
padding: const EdgeInsets.only(top: 20),
child: TodTextField.formField(
key: _dayKeys[2],
controller: _siteController,
labelText: localizations.hintSite,
textInputAction: TextInputAction.done,
),
),
TodButton.elevated(
label: localizations.btnConfirm,
replaceOnPressed: true,
onPressed: () async {
final patch = await Connection()
.accessoryData(
unitId: widget.connectedUnit.id.toString(),
contactEmail: _emailController.text,
contactPhone: _phone,
//socialAccount: SocialAccount?,/// I NEED HELP HERE
)
},
),
class SocialAccount {
SocialAccount({
required this.type,
required this.link,
});
factory SocialAccount.fromJson(Map<String, dynamic> json) {
try {
return SocialAccount(
type: AccountType.fromName(json.get('type') as String),
link: json.get('link') as String,
);
} catch (e, stack) {
logger.e('Failed to deserialize SocialAccount', e, stack);
rethrow;
}
}
Map<String, dynamic> toJson() => {
'type': type.toString(),
'link': link,
};
final AccountType type;
final String link;
}
now I need to take the data entered by the user in the two Textfields to make a Patch, this one:
"social_accounts": [{
"type": "facebook" | "instagram" | "website" | "twitter"
"link": "string"
}]
SocialAccount is the class I made myself as a Model to manage that data.
The problem is that I don't know how to take those two texts I have, to put them in the call which is a list ..
Can you help me try to correct this code ?
I would like to make sure I have a list of customer orders. Each order must be able to be unrolled so that we can access the details of the number of items, their detail and the price of the order.
I wanted to try to do this with react-native-paper and the list component of this package.
However, I get an error on the key of each item. How can I solve it?
Thanks for your help.
> Warning: Each child in a list should have a unique "key" prop.
import * as React from 'react';
import { ScrollView } from 'react-native';
import { List } from 'react-native-paper';
const Completed = () => {
const [expanded, setExpanded] = React.useState(true);
const handlePress = () => setExpanded(!expanded);
const list = [
{
title: 'Commande 1',
date:'01/01/2020',
icon: 'av-timer'
},
{
title: 'Commande 2',
icon: 'flight-takeoff'
},
{
title: 'Commande 3',
date:'01/01/2020',
icon: 'av-timer'
},
{
title: 'Commande 4',
date:'01/01/2020',
icon: 'flight-takeoff'
},
{
title: 'Commande 5',
date:'01/01/2020',
icon: 'av-timer'
},
{
title: 'Commande 6',
date:'01/01/2020',
icon: 'flight-takeoff'
},
]
return (
<ScrollView>
{
list.map((item, i) => (
<List.Section title={item.date}>
<List.Accordion
title={item.title}
left={props => <List.Icon {...props} icon="folder" />}>
<List.Item title="Nombre d'articles : ..." />
<List.Item title="Prix total : ...€" />
</List.Accordion>
</List.Section>
))
}
</ScrollView>
);
}
export default Completed;
Add key prop like
list.map((item, i) => (
<List.Section title={item.date} key={i.toString()}> // Like here
....
</List.Section>
))
Make sure to provide a key to the first item in any loop.
In your case add the key to List.Section
<List.Section key={item.title} title={item.date}>
........
</List.Section>
Key can be any unique string in your data
The best example to illustrate what I am trying to develop is a desktop email application.
On the left there is a vertical menu (on a quasar q-drawer).
Next, also on the left, there is a mailing list (on a quasar q-list within a q-drawer).
When each item is selected, the corresponding content is displayed on the right (on a quasar q-page).
Expected operation:
The list is loaded once and when I successively select the various items in the list, only the content on the right should be used and the content updated according to the id sent as a parameter in the request.
Note that the list component is only rendered once; that is, it is not rendered again each time a item is selected from the list and remains visible while the content is displayed on the right
The problem:
When I select the first item in the mailing list it works correctly and as expected, the mail content is displayed on the q-page.
When I select a second item from the list it doesn't work anymore and the following error is displayed on the console:
Uncaught (in promise) NavigationDuplicated {_name:
"NavigationDuplicated", name: "NavigationDuplicated", message:
"Navigating to current location ("/mailcontent") is not allowed",
stack: "Error at new NavigationDuplicated
(webpack-int…node_modules/vue/dist/vue.runtime.esm.js:1853:26)"}
I would appreciate suggestions on how to resolve this issue.
The following code is intended to illustrate the problem in the main part:
Routes: secondlayout is the child of another layout
const routes = [
{
path: "/index",
component: () => import("layouts/AppLayout.vue"),
children: [
{ path: "/home", component: () => import("pages/Home.vue") },
{
path: "secondlayout",
component: () => import("Layouts/MailsPlace.vue"),
children: [
{ path: "/mailcontent", name: 'mailcontent', component: () => import("pages/MailContent.vue") },
]
}
]
}
];
Second layout where the email application (list and content) is rendered with q-drawer and router-view
<template>
<q-layout view="lhh LpR lff" container class=" myclass shadow-2 window-height" >
<q-drawer
style="full-height"
v-model="drawerLeft"
:width="500"
:breakpoint="700"
elevated
content-class="bg-grey-1"
>
<q-scroll-area
class="fit"
style="margin-top:80px">
<q-list separator padding>
<q-separator />
<list-mails
v-for="(mail, index) in mails"
:mail="mail"
:key="mail.id_mail"
:id="index">
</list-mails>
<q-separator />
</q-list>
</q-scroll-area>
</q-drawer>
<q-page-container>
<router-view></router-view>
</q-page-container>
</template>
<script>
export default {
data () {
return {
mails: {},
drawerRight: false,
}
},
/* watch: {
$route(to, from) {
console.log('after', this.$route.path);
}
},
beforeRouteUpdate(to, from, next) {
console.log('before', this.$route.path);
next();
},*/
components: {
'list-mails': require("pages/ListMails.vue").default,
},
created: function() {
this.listMails()
},
methods: {
listMails(){
this.$axios.get("/listmails")
.then(response => {
if (response.data.success) {
this.mails = response.data.mails.data;
} else {
showErrorNotify('msg');
}
})
.catch(error => {
showErrorMessage(error.message);
});
}
}
</script>
Mail list item with mailitemclick method
<template>
<q-item
clickable
v-ripple
exact
#click="mailitemclick(mail.id_mail)"
>
<q-item-section>
<q-item-label side lines="2"> {{ mail.title_mail }}</q-item-label>
</q-item-section>
</q-item>
</template>
<script>
export default {
props: ["mail"],
methods:{
mailitemclick(id){
this.$router.push({
name: 'mailcontent',
params: {id:id}
});
}
}
}
</script>
Mail content
<template>
<q-page class="fit row wrap justify-center tems-start content-start" style="overflow: hidden;">
<div style="padding:5px; margin:0px 0px 20px 0px; min-width: 650px; max-width: 700px;" >
<q-item>
<q-item-label class="titulo"> {{ mail.title_mail }} </q-item-label>
<div v-html="mail.content_mail"></div>
</q-item>
</div>
</q-page>
</template>
<script>
export default {
name: 'mailcontent',
data() {
return {
mail: {},
};
},
created() {
this.$axios.get(`/mailcontent/${this.$route.params.id}`)
.then(response => {
if (response.data.success) {
this.mail = response.data.mail[0])
} else {
showErrorNotify('msg');
}
})
.catch(error => {
showErrorMessage(error.message);
});
}
}
</script>
This happened to me when I had a router-link pointing to the same route. e.g. /products/1.
The user is able to click on the products, but if a product was
already clicked (and the component view was already loaded) and the
user attempts to click it again, the error/warning shows in the
console.
You can solve this by adding catch block.
methods: {
mailitemclick(id) {
this.$router.push({
name: 'mailcontent',
params: {'id': id}
}).catch(err => {});
}
},
But in the mail-content, you need to use watch for calling function and in mounted for first-time calling.
Temp Example -
data() {
return {
mail: {},
test_mails: {
12: {
content_mail: '<div>test 12<div>'
},
122:{
content_mail: '<div>test 122<div>'
}
}
}
},
mounted() {
this.mail = this.test_mails[this.$route.params.id]
},
watch:{
'$route':function () {
this.mail = this.test_mails[this.$route.params.id]
}
}
OR
You can use :to in list-mail to avoild click and catch -
<q-item
clickable
v-ripple
exact
:to="'/mailcontent/'+mail.id_mail"
>
<q-item-section>
<q-item-label side lines="2"> {{ mail.title_mail }}</q-item-label>
</q-item-section>
</q-item>
children: [
{ path: '', component: () => import('pages/Index.vue') },
{
path: "secondlayout",
component: () => import("layouts/mail-place.vue"),
children: [
{ path: "/mailcontent/:id", name: 'mailcontent', component: () => import("pages/mail-content.vue") },
]
}
]
I have this code
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script>
<script type="text/javascript" src="js/chart-js/Chart.js"></script>
<script type="text/javascript">
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
];
$(document).ready(
function () {
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Pie(data);
document.getElementById("canvas_link").src = document.getElementById("myChart").toDataURL();
}
);
</script>
</head>
<body>
<p>save as image</p>
<canvas id="myChart" width="400" height="400"></canvas>
<p>export to pdf</p>
</body>
I need create pdf export and add into image with gener graph. Berofe I must save render image. I try use method .toBase64Image() but I dont know have can I start.
My proceed
create canvas_link (.toDataUrl). After click save as image I can greate and upload image to server. Then I can generate pdf export (across mPDF) and to add imageto into export. This i can create, but I dont know create and upload image of graph to server.
I need more examples from http://www.chartjs.org/docs/
in that case you don't need to upload as an image.
you could put the result of the call to toDataUrl function in the value of a hidden field and send it in a form (with an iframe as target) or by an ajax call
use the following options in the chart
//new options var
var options = {
bezierCurve : false,
//animation: false
onAnimationComplete: done
};
//your code with a little modification
$(document).ready(
function () {
var ctx = document.getElementById("myChart").getContext("2d");
//use the previously defined "options" here!!!
var myNewChart = new Chart(ctx).Pie(data, options);
}
);
//callback function, called when the pie ends his animation
function done(){
//this part of your code was moved here to avoid that store an empty image
document.getElementById("canvas_link").src = document.getElementById("myChart").toDataURL();
var postdata={
file: document.getElementById("myChart").toDataURL()
}
$.post( "store.php", postdata)
.done(function( ret ) {
console.log( "Data status: Loaded successfully ");
})
.fail(function( ret ) {
console.log( "Data status: error ");
})
;
}
Reference: http://api.jquery.com/jquery.post/
in php you can handle the content in this way
// file: store.php
// Interpret data uri
$uriPhp = 'data://' . substr($file, 5);
// Get content
$binary = file_get_contents($uriPhp);
$file = 'uploads/charts/'. time() .'.png';
// Save image
file_put_contents($file, $binary);
Reference: https://github.com/nnnick/Chart.js/issues/99#issuecomment-75359927
As per the documentation, you can print or save graph by API calls;
Example
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",
title:{
text: "Print Chart using print() method"
},
data: [
{
type: "column",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}
]
});
chart.render();
document.getElementById("printChart").addEventListener("click",function(){
chart.print();
//chart.exportChart({format: "jpg"});
});
I try to get an editable list with this code:
var isEditing = false;
new Ext.Application({
launch: function(){
new Ext.Panel({
//layout: 'card',
fullscreen: true,
items: new Ext.List({
id: 'myList',
store: new Ext.data.Store({
fields: ['myName'],
data: [{ myName: 1 }, { myName: 2 }, { myName: 3}]
}),
itemSelector: '.x-list-item',
multiSelect: true,
itemTpl: '<span class="name">{myName}</span>',
tpl: new Ext.XTemplate(
'<tpl for=".">' +
'<div class="x-list-item">' +
'<tpl if="this.isEditing()">' +
'<img src="images/delete.gif" ' +
'onclick="Ext.getCmp(\'myList\').myDeleteItem({[xindex-1]})" ' +
'style="vertical-align: middle; margin-right: 15px;"/>' +
'</tpl>' +
'{myName}</div>' +
'</tpl>',
{
compiled: true,
isEditing: function () {
console.log('isEditing (tpl):' + isEditing)
return isEditing;
}
}),
myDeleteItem: function (index) {
var store = this.getStore();
var record = store.getAt(index);
console.log('removing ' + record.data.myName);
store.remove(record);
},
listeners: {
itemtap: function () {
if (isEditing){
console.log('isEditing: ' + isEditing);
return;
}
},
beforeselect: function () {
console.log('isEditing: before ' + !isEditing);
return !isEditing;
}
}
}),
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
layout: { pack: 'right' },
items: [
{
xtype: 'button',
text: 'Edit',
handler: function () {
var list = Ext.getCmp('myList');
if (!isEditing)
list.mySelectedRecords = list.getSelectedRecords();
isEditing = !isEditing;
this.setText(isEditing ? 'Save' : 'Edit');
list.refresh();
if (!isEditing)
list.getSelectionModel().select(list.mySelectedRecords);
}
}]
}]
});
}
});
but its not working like it should. If I press the EDIT button there is no delete-image and so there is no deleted item....
There are 3 things that I can see:
The Template is rendered once, you will need to call .refresh() or .refreshNode() on the list to update any item templates. The better way to accomplish this would be to hide the delete button via CSS and display it when the 'edit' button is clicked.
There is probably a naming conflict between the isEditing variable declared at the top and the isEditing function reference. It is very confusing to have these two things named the same, and can lead to problems with variable scoping.
The click event that you are looking for may be intercepted by the parent list item and Sencha Touch is turning it into a 'itemtap' event on the list item.
I was not able to delete until I added an id field without a datatype to my model. I don't know why as it should know which record to delete via the index.
Ext.regModel('Setting', {
fields: [
{name: 'id'}, // delete works after adding
{name: 'name', type: 'string'}
],
proxy: {
type: 'localstorage',
id: 'settings'
}
Kevin