The follwing code is an extended version of an example of a built in command in the Kendo documentation
<!DOCTYPE html5>
<html>
<head>
<title>Untitled Page</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ command: ["edit", "destroy"]} // displays the built-in "edit" and "destroy" commands
],
editable: "inline",
dataSource: new kendo.data.DataSource ({
data: [{ name: "Jane Doe" }, { name: "Joe Soap" }, { name: "Fred Blogs"}]
})
});
});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
Clicking on any of the "Edit" buttons works fine. If you now click on another "Edit" button without cancelling the first, then the original edit row is cancelled but now all of the edit buttons fail to open a row in edit mode. This behaviour is not demonstrated when a remote datasource is used by the grid.
Do Kendo know about this problem?
Does anyone know a work-around?
This is a frequent problem when there is not id defined in the model (it is not actually a problem with Kendo UI, maybe a not a clearly documented behavior).
Use this grid definition instead:
$("#grid").kendoGrid({
columns : [
{ field: "name" },
{ command: ["edit", "destroy"]} // displays the built-in "edit" and "destroy" commands
],
editable : "inline",
dataSource: new kendo.data.DataSource({
data : [
{ id: 1, name: "Jane Doe" },
{ id: 1, name: "Joe Soap" },
{ id: 2, name: "Fred Blogs"}
],
schema: {
model: {
id: "id"
}
}
})
});
I've added and id field to each row and then I define that schema.model.id is id. See it running here
Related
I am using Tabulator version 4.3 and trying to print a table (which has columnCalcs: both) using print function. I have set printCopyStyle:true, but the output of print does not include footer row (column calculation at the bottom of the table); also alignment of numbers which is set to right does not appear right aligned. The footer and alignment both appear correctly in the Tabulator table, but not in print copy.
Please check jsfiddle here.
Are these features not available or am I missing something?
const tabledata = [{
dep: "A",
name: "Oli Bob",
score: 100
},
{
dep: "A",
name: "Jamie Newhart",
score: 120
},
{
dep: "D",
name: "Gemma Jane",
score: 90
},
{
dep: "D",
name: "James Newman",
score: 100
},
];
const table = new Tabulator("#example-table", {
height: "250px",
data: tabledata,
groupBy: "dep",
columnCalcs: "both",
printAsHtml: true,
printCopyStyle: true,
columns: [{
title: "Name",
field: "name",
width: 200
},
{
title: "Score",
field: "score",
align: "right",
bottomCalc: "sum"
},
],
});
<head>
<link href="https://unpkg.com/tabulator-tables#4.3.0/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.3.0/dist/js/tabulator.min.js"></script>
</head>
<body>
<button type="button" id="report-print" onclick="table.print();">Print </button>
<div id="example-table"></div>
</body>
I'm testing this markup https://developers.google.com/gmail/markup/reference/invoice on https://script.google.com/, so I discard all the SPF problems.
This is the JS:
function testSchemas() {
var htmlBody = HtmlService.createHtmlOutputFromFile('mail_template').getContent();
MailApp.sendEmail({
to: Session.getActiveUser().getEmail(),
subject: 'Test Email markup - ' + new Date(),
htmlBody: htmlBody,
});
}
And this is the HTML
<html>
<head>
<script type='application/ld+json'>
{
"#context": "http://schema.org",
"#type": "Invoice",
"accountId": "123-456-789",
"minimumPaymentDue": {
"#type": "PriceSpecification",
"price": "$70.00"
},
"paymentDue": "2015-11-22T08:00:00+00:00",
"paymentStatus": "PaymentAutomaticallyApplied",
"provider": {
"#type": "Organization",
"name": "Mountain View Utilities"
},
"totalPaymentDue": {
"#type": "PriceSpecification",
"price": "$70.00"
}
}
</script>
</head>
<body>
<p>
This a test for a Go-To action in Gmail.
</p>
</body>
</html>
As you may see, the code should be fine. Ok, I execute the code and I receive this (please, add "h" at beggining, stackoverflow dont let me add more than 2 links):
https://i.stack.imgur.com/bg8S2.png
https://i.stack.imgur.com/ituM0.png
What I'm doing wrong? one-click actions on http://gmail-actions.appspot.com/ works fine, but I can't get working invoices.
My extension is intended to inject some HTML elements using local JavaScript libraries such PrimeUI, jQueryUI and its correspondent CSS stylesheets.
The best way I have found to do so, is to inject the HTML as follows:
// test.js
$.get(chrome.extension.getURL('/overlay.html'), function(data) {
$($.parseHTML(data)).appendTo('body');
}
// manifest.json
{
"name": "Test",
"version": "1.0",
"manifest_version": 2,
"options_page": "",
"description": "Test",
"browser_action": {
"default_title": "Test",
"default_popup": ""
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"js/jquery-3.1.1.min.js",
"js/test.js"
]
}
],
"permissions": [
"tabs"
],
"web_accessible_resources": [
"overlay.html",
"css/font-awesome.min.css",
"css/jquery-ui.min.css",
"css/primeui-all.min.css",
"js/jquery-3.1.1.min.js",
"js/jquery-ui.min.js",
"js/primeelements.min.js",
"js/primeui-all.min.js",
"js/main.js"
]
}
I have the required JavaScript libraries inside "js" folder in the root directory, for security reasons I do not retrieve them from a CDN.
My HTML contains CSS and JS on <head> section, but the styles nor the scripts applies in any way.
<html>
<head>
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<link rel="stylesheet" href="css/jquery-ui.min.css"/>
<link rel="stylesheet" href="css/primeui-all.min.css"/>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/primeui-all.min.js"></script>
<script type="text/javascript" src="js/x-tag-core.min.js"></script>
<script type="text/javascript" src="js/primeelements.min.js"></script>
</head>
<body>
<button id="btn-show" type="button">Show</button>
<div id="dlg" title="Godfather I">
<p>The story begins as Don Vito Corleone, ...</p>
</div>
</body>
</html>
// main.js
$(function() {
$('#dlg').puidialog({
showEffect: 'fade',
hideEffect: 'fade',
minimizable: true,
maximizable: true,
responsive: true,
minWidth: 200,
modal: true,
buttons: [{
text: 'Yes',
icon: 'fa-check',
click: function() {
$('#dlg').puidialog('hide');
}
},
{
text: 'No',
icon: 'fa-close',
click: function() {
$('#dlg').puidialog('hide');
}
}
]
});
$('#btn-show').puibutton({
icon: 'fa-external-link-square',
click: function() {
$('#dlg').puidialog('show');
}
});
}
The button is successfully displayed but with no events are attached nor styles.
i.e: if I inject this code on StackOverflow my button get the styles from SO and not mine.
I want to avoid as much as possible JavaScript for creating elements, or injecting tags programmatically, to separate the View from the Controller.
How can I manage to use my styles and scripts with my injected HTML as we do ordinarily? I have tried adding them to web_accessible_resources, and other manifest fields unsuccessfully.
Makyen explained:
It is not possible to parse HTML with <head> elements hardcoded such <script> and <link>. Instead it should be injected in other way.
The ways I have chosen to inject the files are:
For the CSS:
// Test.js
/** CSS Injection */
var link = document.createElement("link");
link.href = chrome.extension.getURL("css/jquery-ui.min.css");
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);
For the JS:
// Test.js
/** JavaScript Injection */
var s = document.createElement('script');
s.src = chrome.extension.getURL('js/jquery-3.1.1.min.js');
// "When an inline script is inserted in the document, it's immediately executed
// and the <script> tag can safely be removed". – Rob W.
s.onload = s.remove;
(document.head || document.documentElement).appendChild(s);
Trying to insert large amounts of code/libraries as into the page context using tags has a significant chance of interfering with the current contents/JavaScript of the page. Is there a reason that you are inserting scripts into the page context? Normally, you would have these inserted scripts (and CSS) as content scripts (manifest.json
content_scripts, or chrome.tabs.executeScript()/chrome.tabs.insertCSS(). not in the page context. – Makyen
With the above code I have successfully injected the files, but the styles and functions are applied only sometimes, I will edit when I fix this.
I am getting error "resource view/View1.view.xml could not be loaded from resources/view/View1.view.xml" when I try to load a view from folder "view".
Folder structure in WebIDE is as in below picture.
index.html
<!DOCTYPE HTML>
<html>
<head>
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal" >
</script>
<script>
sap.ui.localResources("webapp");
var app = new sap.m.App("idApp");
var view1 = sap.ui.view({id:"idView1",
viewName:"view.View1",type:sap.ui.core.mvc.ViewType.XML});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content" ></div>
</body>
</html>
View1.xml
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Text id="idbtn" text="Text from" />
</mvc:View>
View1.controller
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("View1");
});
neo-app.json
{
"routes": [
{
"path": "/webapp/resources",
"target": {
"type": "service",
"name": "sapui5",
"entryPath": "/resources"
},
"description": "SAPUI5 Resources"
}
]
}
error in browser
I tried several ways and could not find a way to point to View1.xml
Thanks in Advance,
Srini.
Please use data-sap-ui-resourceroots'{"webapp": "./" }' inside the script tag and the view name should be webapp.view.View1 in index.html.
sap.ui.localResources("webapp"); registers the webapp folder for the webapp namespace. You can see that in the console too.
So it should be viewName: "webapp.view.View1".
Please also note that your controller is then known as webapp.controller.View1:
return Controller.extend("webapp.controller.View1", {
...
I'm building a little Spotify app that displays tweets from the current Artist playing. I'm using Bocoup's jQuery Twitter plugin to grab and display the tweets: http://code.bocoup.com/jquery-twitter-plugin/
MANIFEST.JSON
{
"BundleType": "Application",
"AppIcon": {
"18x18": "tutorial.png"
},
"AppName": {
"en": "News"
},
"SupportedLanguages": [
"en"
],
"RequiredPermissions": [
"http://twitter.com"
"http://*.twitter.com"
"http://*.twimg.com"
],
"VendorIdentifier": "com.News",
"RequiredInterface": "1",
"BundleVersion": "0.2",
"BundleIdentifier": "News",
"AppName": "News",
"AppDescription": "Twitter updates from the Artist playing."
}
From the Index file:
<script type="text/javascript">
$(document).ready(function() {
$('#tweets').twitter({from: 'mediatemple', replies: false})
launch();
});
</script>
</head>
<body>
<div id="info">
</div>
<div id="news">
</div>
<div id="tweets">
</div>
</body>
Nothing displays in Spotify when I open my app, but if I open the index.html file in a browser, the tweets appear. What am I missing?
The RequiredPermissions JSON needs commas.
try:
"RequiredPermissions": [
"http://twitter.com",
"http://*.twitter.com",
"http://*.twimg.com"
],
Things fail silently if there is a problem in the manifest. Always use a JSON linter (http://jsonlint.com/) to verify at least the format is proper JSON.
UPDATE: After any changes to manifest.json you must restart Spotify.