This is my first time using this website. Today is my debut into Kendo UI. My boss has bought it, and set me on it with high hopes! I absolutely love it if I'm honest but I have got stuck on an issue, I have Googled every possible search phrase but can't seem find a resolve. So I'm going to post this request and go to bed, hoping for the best. I'd have had my first task done in a day if it wasn't for this niggle :/
I'm looking to add the date to a PDF export in Kendo UI.
Here is my code...
$("#grid").kendoGrid({
toolbar: ["excel", "pdf"],
excel: {
fileName: "FlexibleSalesReport-"+ fileNameDate + ".xlsx",
proxyURL: "//demos.telerik.com/kendo-ui/service/export",
filterable: true
},
pdf: {
allPages: true,
avoidLinks: true,
paperSize: "A4",
margin: { top: "2cm", left: "0.5cm", right: "0.5cm", bottom: "1cm" },
landscape: true,
repeatHeaders: true,
template: $("#page-template").html(),
scale: 0.6,
date: new Date(),
title: 'My Title',
subject: 'My subject'
},
dataSource: {
//type: "odata",
// transport: {
// read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
// },
data: products,
schema: {
model: {
fields: {
Name: { type: "string" },
WebName: { type: "string" },
Code: { type: "string" },
Icing: { type: "string" },
Filling: { type: "string" },
AssociatedOrderingPage: { type: "string" },
Sold: { type: "number" },
TotalValue: { type: "string "}
}
}
},
pageSize: 10,
serverPaging: false,
serverFiltering: false,
},
height: 980,
filterable: {
mode: "row"
},
pageable: true,
sortable: true,
columns:
['Data removed for brevity']
});
I have added the date option, I'm not sure where to pull that option out of in the template. Below is my code for the template. Because it is in script tags, I cannot call functions or inject data into the span tags to add a date to the end of the of the pdf title.
<script type="x/kendo-template" id="page-template">
<div class="page-template">
<div class="header">
<div style="float: right">Page #: pageNum # of #: totalPages #</div>
########### Sales Report - <span id="thisOne"></span><!-- I'd like to inject into this span, even this comment isn't commented out in my IDE {VS Code}
</div>
<div class="watermark">#####</div>
<div class="footer">
Page #: pageNum # of #: totalPages #
</div>
</div>
</script>
The intended result
Thanks in advance and though I've read through the do's and don'ts. I'm open to constructive criticism on my addition
Okay. So after more research. I found the solution which I'll share with you guys.
To define any custom Javascript in the template, you must add it between hash tags (pound signs to some people).
For example:
# var foo = "bar"; #
Then to print the variable to the report, you use the following syntax:
#= foo #
The solution to my problem was replacing the template section with
<script type="x/kendo-template" id="page-template">
#
var theDate = new Date();
#
<div class="page-template">
<div class="header">
<div style="float: right">Page #: pageNum # of #: totalPages #</div>
[Obfuscated for client privacy] Flexible Sales Report - <span>#=theDate#</span>
</div>
<div class="watermark">[Obfuscated for client privacy]</div>
<div class="footer">
Page #: pageNum # of #: totalPages #:
</div>
</div>
</script>
I sincerely hope this helps someone.
Related
This is my code for my html in App.vue file.
<b-form #submit="onSubmit">
<b-form-group>
**nested v-model binding**
<div v-for="(question, index) in questionsList" :key="question.question">
<h4>{{question.question}}</h4>
<div v-for="options in question.responses" :key="options.options">
<input
type="radio"
:name="'question'+index"
:value="options.options"
v-model="responses['question'+index]"
/>
{{options.options}}
<br />
</div>
</div>
<b-button variant="outline-primary" type="submit">Submit</b-button>
</b-form-group>
</b-form>
*** script ***
export default {
data() {
return {
responses: {},
questionsList: [
{
id: "1",
question: "What is the full form of HTTP?",
responses: [
{ options: "Hyper text transfer package" },
{ options: "Hyper text transfer protocol" }
],
},
{
id: "2",
question: "HTML document start and end with which tag pairs?",
responses: [
{ options: "HTML" },
{ options: "WEB" }
],
},
answersheet: {
q1: "Hyper text transfer protocol",
q2: "HTML"
},
methods: {
onSubmit(event) {
event.preventDefault();
var score = 0;
for (var key of Object.keys(this.responses)) {
console.log(key + " -> " + this.responses[key]);
//displays the answers of the users
**trying to compare the answers from my answersheet but keeps saying undefined**
if (this.responses[key] == this.answersheet[key]) {
score = score + 1;
}
}
displays score to console
console.log(score);
}
}
What I'm trying to do here is to calculate the number of correct answers and then send the result to an api, but my code won't work.
I'm still a noob with vuejs and this is my first project for my class.
I've made some points and made some changes on your code
You needed to make sure opening and closing brackets written
Check indexes and make sure you are comparing right values
Read documentation carefully and try to follow getting started instructions. It gives you quite good orientation.
Have fun
new Vue({
el: '#app',
data() {
return {
isSubmitted: false,
score: 0,
responses: {},
questionsList: [
{
id: "1",
question: "What is the full form of HTTP?",
responses: [
{ options: "Hyper text transfer package" },
{ options: "Hyper text transfer protocol" }
],
},
{
id: "2",
question: "HTML document start and end with which tag pairs?",
responses: [
{ options: "HTML" },
{ options: "WEB" }
],
},
],
answersheet: {
question0: "Hyper text transfer protocol",
question1: "HTML"
},
};
},
methods: {
tryAgain() {
this.responses = {};
this.score = 0;
this.isSubmitted = !this.isSubmitted;
},
onSubmit() {
for (var key of Object.keys(this.responses)) {
console.log(key + " -> " + this.responses[key]);
if (this.responses[key] == this.answersheet[key]) {
this.score++;
}
}
this.isSubmitted = !this.isSubmitted
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/bootstrap#4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue#2.16.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://unpkg.com/bootstrap-vue#2.16.0/dist/bootstrap-vue.js"></script>
<div id="app">
<b-form #submit.prevent="onSubmit">
<b-form-group v-if="!isSubmitted">
<!-- nested v-model binding** -->
<div v-for="(question, index) in questionsList" :key="question.question">
<h4>{{question.question}}</h4>
<div v-for="options in question.responses" :key="options.options">
<input
type="radio"
:name="'question'+index"
:value="options.options"
v-model="responses['question'+index]"
/>
{{options.options}}
<br />
</div>
</div>
<b-button variant="outline-primary" type="submit">Submit</b-button>
</b-form-group>
<div v-else>
Your score: {{ score}}
<br>
<b-button variant="outline-primary" #click="tryAgain">Try Again</b-button>
</div>
</b-form>
</div>
I want to have the image be shown in my project; however, I wasn't able to work it out.
I did search for a solution, and I tried it but it didn't work out for me.
What could be the solution here? Thank you in advance for your help.
Here is the html part:
<template>
<div id="app">
<div class="productListing">
<div class="box effect1" :key="product.id" v-for="product in ProductFilter.slice(0,3)">
<h1>{{product.title}}</h1>
<img :src="product.img" alt="dd">
</div>
</div>
</div>
</template>
vue js part
<script>
export default {
data: function () {
return {
userFilterKey: 'all',
products:[
{
id: 1,
title: "Google Pixel - Black",
price: 10,
company: "GOOGLE",
status : "TopSell",
img: "../../bg.jpeg"
}
],
}
},
computed: {
ProductFilter() {
return this[this.userFilterKey]
},
all() {
return this.products
},
TopSell() {
return this.products.filter((product) => product.status === "TopSell")
},
highRated() {
return this.products.filter((product) => product.status === "HighRated")
},
}
}
// # is an alias to /src
</script>
Thanks again in advance for your help.
Assuming the image path you provided is correct, use the require function instead.
products: [
{
id: 1,
title: "Google Pixel - Black",
price: 10,
company: "GOOGLE",
status : "TopSell",
img: require("../../bg.jpeg")
}
],
I have a page with a search box on it using Vue. What I want to do is this: when a user comes from another page with a parameter in the URL (e.g., myurl.com/?windows), I capture the parameter and populate the search field to run the search on that string when the page loads. If there's no parameter, nothing happens.
I'm capturing the string from the URL with JavaScript, but don't see how to get it in the input to run the search.... I created a method but don't see how to apply it.
<div id="app">
<input type="text" v-model="search" placeholder="Search Articles" />
<div v-for="article in filteredArticles" v-bind:key="article.id" class="container-fluid to-edges section1">
<div class="row">
<div class="col-md-4 col-sm-12 section0">
<div class="section0">
<a v-bind:href="article.url" v-bind:title="toUppercase(article.title)">
<img class="resp-img expand section0"
v-bind:src="article.src"
v-bind:alt="article.alt"/>
</a>
</div>
<div>
<h3 class="title-sec">{{ article.title }}</h3>
<p>{{ article.description }}</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var pgURL = window.location.href;
var newURL = pgURL.split("?")[1];
console.log(newURL);
</script>
// Filters
Vue.filter('to-uppercase', function(value){
return value.toUpperCase();
});
new Vue({
el: "#app",
data: {
articles: [
{ id: 1, title: 'Trend Alert: Black Windows', category: 'Windows', description: 'Timeless, elegant, and universally flattering, black is an excellent color to add to any wardrobe – or any window. Get in the black with this chic design trend.', src: 'http://i1.adis.ws/i/stock/Trending_Polaroid_Black_Windows_2018_1?$trending-mobile$', url: '/{StorefrontContextRoot}/s/trending/trend-alert-black-windows', alt: 'Pantone Colors image' },
{ id: 2, title: 'Benefits of a Pass-Through Window', category: 'Windows', description: 'Whether you’re adding a pass-through window in order to enjoy an al fresco aperitif or for easier access to appetizers in the kitchen, we’re big fans of bringing the outdoors in.', src: 'http://i1.adis.ws/i/stock/polaroid_benefitsofapassthroughwindow655x536?$trending-mobile$', url: '/{StorefrontContextRoot}/s/trending/kitchen-pass-through-bar-window', alt: 'Benefits of a Pass-Through Window image' }, etc....
],
search: ''
},
methods: {
toUppercase: function(title){
return title.toUpperCase();
},
urlSearch: function(newURL) {
if (newURL) {
return this.search = newURL;
}
}
},
computed: {
filteredArticles: function() {
// returning updated array based on search term
return this.articles.filter((article) => {
return article.category.match(new RegExp(this.search, "i"));
});
}
}
})
You can call the urlSearch method during the mounted hook:
mounted() {
this.urlSearch(newURL)
},
methods: {
urlSearch(url) {
return this.search = url
}
},
Suppose I want to display a List of Questions. For each question, there is a list of answers, none of which are right or wrong. For each question, the user can choose an answer. I'm wondering how to create two-way binding on the selected answer.
The Vue:
new Vue(
{
el: "#app",
data:
{
questions: [{}]
}
}
Example Question Model:
{
id: 1,
name: "Which color is your favorite?",
selectedAnswerId: null,
selectedAnswerName: null,
answers:
[
{id: 1, name: red, photoUrl: ".../red", selected: false},
{id: 2, name: green, photoUrl: ".../green", selected: false},
{id: 3, name: blue, photoUrl: ".../blue", selected: false},
]
}
Components:
var myAnswer =
{
props: ["id", "name", "url", "selected"],
template:
`
<div class="answer" v-bind:class="{selected: selected}">
<img class="answer-photo" v-bind:src="url">
<div class="answer-name">{{name}}</div>
</div>
`
};
Vue.component("my-question",
{
props: ["id", "name", "answers"],
components:
{
"my-answer": myAnswer
},
template:
`
<div class ="question">
<div class="question-name">{{name}}</div>
<div class="question-answers">
<my-answer v-for="answer in answers" v-bind:id="answer.id" v-bind:name="answer.name" v-bind:url="answer.photoUrl" v-bind:selected="answer.selected"></my-answer>
</div>
</div>
`
});
When the user selects an answer to a question by clicking on the div, I want the Question model's selectedAnswerId/selectedAnswerName along with the answers selected property to be set accordingly. Therefore, what do I need to add to my components in order to accomplish this two-way binding? I believe it requires input elements and v-model, but I couldn't quite figure it out. Also, I am only one day into Vue.js and have no experience with related frameworks. So if I am doing anything blatantly wrong or against best practice, that would be good to know as well. Thanks in advance!
The answer will handle a click event and emit a (custom) selected-answer event. The question will have its own data item to store the selected answer ID; the answer component's selected prop will be based on that. The question will handle the selected-answer event by setting its selectedId.
var myAnswer = {
props: ["id", "name", "url", "selected"],
template: `
<div class="answer" v-bind:class="{selected: selected}"
#click="setSelection()"
>
<img class="answer-photo" :src="url">
<div class="answer-name">{{name}}</div>
</div>
`,
methods: {
setSelection() {
this.$emit('selected-answer', this.id);
}
}
};
Vue.component("my-question", {
props: ["id", "name", "answers"],
data() {
return {
selectedId: null
};
},
components: {
"my-answer": myAnswer
},
template: `
<div class ="question">
<div class="question-name">{{name}}</div>
<div class="question-answers">
<my-answer v-for="answer in answers"
:id="answer.id" :name="answer.name" :url="answer.photoUrl"
:selected="answer.id === selectedId" #selected-answer="selectAnswer"></my-answer>
</div>
</div>
`,
methods: {
selectAnswer(answerId) {
this.selectedId = answerId;
}
}
});
new Vue({
el: '#app',
data: {
questions: [{
id: 1,
name: "Which color is your favorite?",
answers: [{
id: 1,
name: 'red',
photoUrl: ".../red"
},
{
id: 2,
name: 'green',
photoUrl: ".../green"
},
{
id: 3,
name: 'blue',
photoUrl: ".../blue"
},
]
}]
}
});
.answer {
cursor: pointer;
}
.selected {
background-color: #f0f0f0;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<div id="app">
<my-question v-for="q in questions" :name="q.name" :answers="q.answers"></my-question>
</div>
I am building an app using MVC using Jquery(KendoGrid) for displaying data, everything was working fine as per requirement, later we planned to add extra column with button present on each row of the grid, sounds simple, but tried number of ways to add into the application, getting error message "undefined 'node' ..... ", so i had no other options rather than posting here, if any one could able to help me in this will be appreciative, and i used column template on jquery kendo grid thanks
scenario
onclick of that button in specified row it should carry "ID(as shown below)" and redirect to "ActionResult" Controller, where I can further code as per my requirement
code(part of the code)
columns: [
{ field: "ID", Title: "ID", filterable: false, sortable: false, hidden: true },
{ field: "RowID", Title: "RowID", filterable: false, sortable: false, hidden: true },
{ field: "BillNumber", Title: "BillNumber", filterable: false, sortable: false,hidden:true },
{ field: "ServiceName", Title: "ServiceName",width:600 },
{ field: "ServiceStatus", Title: "ServiceStatus", width: 150 }
// Creating template column
, {
field: "Action", title: "Is Action", template: "<input type=\"checkbox\" #= Action ? checked='checked' : '' # class=\"check_row\"/> ", editable: false,
// field: "Action",title: "Preview ", template: '<input type="button" class="info" name="info" value="Info" style="height: 26px; margin: 0px 2px; min-width: 64px;" />',
headerTemplate: '<label> <input type="checkbox" id="checkAll"/>Print All</label>', filterable: false, sortable: false, width: 100,
}
currently I am able to generate checkbox in column, what i need is one more column with button(same as checkbox in each row)
Manjuboyz
Defining a button in a cell is pretty simple... basically you were doing it right.
Example: Define a column as:
columns: [
...
{
title: "Preview ",
template: '<input type="button" class="k-button info" name="info" value="Info" />',
headerTemplate: '<label> <input type="checkbox" id="checkAll"/>Print All</label>',
filterable: false,
sortable: false,
width: 100
}
]
Define the template as an input of type button. If you want it to look like a Kendo UI button add k-button class to it.
Then, you can bind a click handler doing:
$(".info").on("click", function() {
var row = $(this).closest("tr");
var item = grid.dataItem(row);
...
});
Where item contains all the data corresponding to the row that you clicked the button.
Running example here : http://jsfiddle.net/m8fsv/1/
EDIT: If what you need is to control / decide showing one or the other, you should change the template to something like:
<script id="template" type="text/kendo-template">
# if (showButton) { #
<input type="checkbox" #= data.Action ? checked="checked" : "" # class=\"check_row\"/>
# } else { #
<input type="button" class="k-button info" name="info" value="Info" />
# } #
</script>
You can check it here: http://jsfiddle.net/OnaBai/m8fsv/12/