I would like to read an XML file stored in the same directory as this HTML file :
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="js/libs/yui/yui-min.js"></script>
<script type="text/javascript">
function lancement() {
alert("début fonction");
var myDS;
YUI().use("datasource-io", "datatable-base", "datasource-xmlschema", "datatabledatasource", "io", "datasource-textschema", "datasource-get", function(Y) {
myDS = new YAHOO.util.LocalDataSource('test.xml', {
responseType: YAHOO.util.DataSource.TYPE_XML,
responseSchema: {
resultNode: "Customer",
totalRecords: "TotalCount",
fields: ["Name", "Id"]
}
});
});
alert("fin fonction");
alert(myDS.size());
}
</script>
</head>
<body class="yui3-skin-sam" onload="lancement();">
<p>HELLO</p>
<div id="tab1"></div>
</body>
</html>
here is the XML file:
<?xml version="1.0"?>
<Customers>
<TotalCount>1</TotalCount>
<Customer><Name>John</Name><Id>1</Id></Customer>
</Customers>
but I never can read the number of lines.
do you know where does the error come from?
thanks
ok, I read a part of the tutorial and here is the result, which allows me to display a table but unfortunately without data inside (the XML file is the same) :
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<!--<script src="js/libs/yui/yui-min.js"></script>-->
<script src="http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js"></script>
<script >
YUI().use("datasource-io", "datatable-base", "datasource-xmlschema", "io", "datasource-textschema", "datasource-get", "datasource", "datatable", "datatable-datasource", function(Y) {
myDS2 = new Y.DataSource.IO({source: "test.xml"});
myDS2.responseType = Y.DataSource.Type_XML;
// myDS2.responseSchema = {
// resultNode: "Customer",
// totalRecords: "TotalCount",
// fields: ["Name", "Id"]
// };
myDS2.plug(Y.Plugin.DataSourceXMLSchema, {
schema: {
resultListLocator: "result",
resultFields: [
{key: "Name", locator: "*[local-name() ='Name']"},
{key: "Id", locator: "*[local-name() ='Id']"}
]
}
});
var myColumnDefs = [
{key: "Name", sortable: true, resizeable: true},
{key: "Id", sortable: true, resizeable: true}];
var myDataTable = new Y.DataTable({
columns: myColumnDefs, data: myDS2});
myDataTable.render("#tab1");
});
</script>
</head>
<body class="yui3-skin-sam">
<p>HELLO</p>
<div id="tab1"></div>
</body>
</html>
can you help me?
Try this in the DataSourceXMLSchema :
myDS2.plug(Y.Plugin.DataSourceXMLSchema, {
schema: {
resultListLocator: "Customers/Customer",
resultFields: [
{key: "Name", locator: "Name"},
{key: "Id", locator: "Id"}
]
}
Related
I'm trying to integrate Tabulator in vue.js to create some datatables screens.
To do this i'm following the official documentation of Tabulator, available via this link.
The tabulator installed package (tabulator-tables) version is 5.3.4, and I'm using Vue.js 3.2.37.
The code below contains the instantiation of the datatable as shown in the documentation inside the TheWelcome.vue file representing TheWelcome component..
<script setup lang="ts">
import WelcomeItem from "./WelcomeItem.vue";
import DocumentationIcon from "./icons/IconDocumentation.vue";
import ToolingIcon from "./icons/IconTooling.vue";
import EcosystemIcon from "./icons/IconEcosystem.vue";
import CommunityIcon from "./icons/IconCommunity.vue";
import SupportIcon from "./icons/IconSupport.vue";
import { Tabulator, FormatModule, EditModule } from "tabulator-tables";
Tabulator.registerModule([FormatModule, EditModule]);
</script>
<script lang="ts">
const columns = [
{ title: "Name", field: "name", width: 150 },
{ title: "Age", field: "age", hozAlign: "left", formatter: "progress" },
{ title: "Favourite Color", field: "col" },
{ title: "Date Of Birth", field: "dob", hozAlign: "center" },
{ title: "Rating", field: "rating", hozAlign: "center", formatter: "star" },
{
title: "Passed?",
field: "passed",
hozAlign: "center",
formatter: "tickCross",
},
];
let data = [
{ id: 1, name: "Oli Bob", age: "12", col: "red", dob: "" },
{ id: 2, name: "Mary May", age: "1", col: "blue", dob: "14/05/1982" },
];
new Tabulator("#example-table", {
data: data, //link data to table
debugInvalidOptions: false,
columns: columns,
});
</script>
<template>
<div id="example-table"></div>
</template>
This component is imported and used inside the App.vue file
relevent code:
<template>
<TheWelcome />
</template>
The index.html kept unchanged
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app">
<div id="example-table"></div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
newcomer to vue.js, any tip, explanation, orientation would be appreciated.
This should work:
<script setup lang="ts">
import { onMounted } from 'vue';
import ...
import { Tabulator, FormatModule, EditModule } from "tabulator-tables";
Tabulator.registerModule([FormatModule, EditModule]);
const columns = [...];
const data = [...];
// NOTE: the part below must be inside <script setup>
onMounted(() => {
new Tabulator("#example-table", {
data: data, //link data to table
debugInvalidOptions: false,
columns: columns,
});
})
</script>
<template>
<div id="example-table"></div>
</template>
from: https://tabulator.info/docs/5.4/frameworks#vue3-composition
I've already implemented a dropdown in a grid column according to this demo: https://demos.telerik.com/kendo-ui/grid/editing-custom
I already did a test with this custom dropdown: https://demos.telerik.com/kendo-ui/dropdownlist/addnewitem
I am wondering if it's possible to add this custom dropdown in a column of the grid to add a new category if the category is not found in the dropdown.
The column doesn't show in the column Comment.
I tried the following code without success, some tips of how to solve this?
EDIT 1: I tried the abinesh solution, and I think it is very close to solving this issue(http://dojo.telerik.com/OZIXOlUM). Still, the addNew function expects the widgetID. In the onclick of the add new button, the widgetID is passing nothing (see print screen). How did I get this ID? The script "noDataTemplate" is trying to get the id this way '#:instance.element[0].id#', but as I said, nothing returns.
<script id="noDataTemplate" type="text/x-kendo-tmpl">
<div>
No data found. Do you want to add new item - '#: instance.filterInput.val() #' ?
</div>
<br/>
<button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.filterInput.val() #')">Add new item</button>
</script>
<script>
$(document).ready(function(){
var dataSource = new kendo.data.DataSource({
data: categories
});
var gridDataSource = new kendo.data.DataSource({
data : [ {
"Commen": "-",
"Confirmed": 1,
"Stat": 1
},
{
"Commen": "-",
"Confirmed": 1,
"Stat": 1
},
{
"Commen": "-",
"Confirmed": 1,
"Stat": 1
},
{
"Commen": "Some Comment",
"Confirmed": 1,
"Stat": 1
}]
});
$("#grid").kendoGrid({
dataSource: gridDataSource,
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "Stat",
title: "Status"
}, {
field: "Confirmed",
title: "Confirmed",
template: " <input name='Confirmed' class='Confirmed' type='checkbox' data-bind='checked: Confirmed' #= Confirmed ? checked='checked' : '' #/>"
}, {
field: "Commen",
title: "Comment",
editor: commentCategoryEditor,
template: "#=Commen#",
//template: "<input id='Commen'>",
width: 450,
nullable : true
}]
});
});
var categories = [{
"CategoryName": "-"
},{
"CategoryName": "Category 1"
}, {
"CategoryName": "Category 2"
}];
function commentCategoryEditor(container, options){
$('<input name="Commen">')
.kendoDropDownList({
filter: "startswith",
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: dataSource,
noDataTemplate: $("#noDataTemplate").html()
});
}
function addNew(widgetId, value) {
var widget = $("#" + widgetId).getKendoDropDownList();
var dataSource = widget.dataSource;
if (confirm("Are you sure?")) {
dataSource.add({
CategoryID: 0,
CategoryName: value
});
dataSource.one("sync", function() {
widget.select(dataSource.view().length - 1);
});
dataSource.sync();
}
};
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vat Grid</title>
<link rel="stylesheet" href="styles/kendo.common.min.css">
<link rel="stylesheet" href="styles/kendo.default.min.css">
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css">
<link rel="stylesheet" href="styles/kendo.rtl.min.css">
<link rel="stylesheet" href="styles/kendo.silver.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/estilo.css">
<link rel="stylesheet" href="css/daterangepicker.css">
<script src="js/jquery.min.js"></script>
<script src="js/jszip.min.js"></script>
<script src="js/pako_deflate.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div id="grid"></div>
</div>
</body>
</html>
Thanks in advance
I have created a sample demo project that will help you add the category drop down:
Dojo Telerik Link
Sample Output of drop down list with add new category:
Hope this helps you out!
I want to load a json file into my Tabulator table.
The programs.json is in the same directory as the html file.
My html code is rendering the table but i couldnt manage to load the local stored .json file.
There is a lot of documentation here http://tabulator.info/docs/4.9/data and http://tabulator.info/docs/3.5#set-data
The content of programs.json is following:
[{
"name": "Stomachache",
"freq": "10000,5000,880,3000,95",
"db": "XTR",
"info": "Bauchschmerzen"
}, {
"name": "Headache",
"freq": "380,2720,2489,2170,1800,1600,1550,880,832,787,776,727,465,444,1865,146,125,95,72,20,450,440,428,660",
"db": "CAF",
"info": "Kopfschmerzen"
}, {
"name": "Toothache",
"freq": "3000,95,1550,880,787,776,727,650,625,600,28,35,28,110,100,60,428,680",
"db": "XTR",
"info": "Zahnschmerzen"
}]
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="favicon.png">
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="programs"></div>
<script type="text/javascript">
var table = new Tabulator("#programs", {
ajaxURL:"./programs.json", // http://tabulator.info/docs/4.9/data
//ajaxContentType:"json",
height: 326,
layout: "fitColumns",
pagination: "local",
paginationSize: 10,
tooltips: true,
index: "name",
columns: [{
title: "Name",
field: "name",
sorter: "string",
headerFilter: "input"
},
{
title: "Frequencies",
field: "freq",
sorter: "string",
headerFilter: "input"
},
{
title: "Database",
field: "db",
sorter: "string",
editor: "select",
width: 90,
headerFilter: true,
},
{
title: "Programm Info",
field: "info",
sorter: "string",
headerFilter: "input"
},
],
ajaxResponse:function(url, params, response){
//url - the URL of the request
//params - the parameters passed with the request
//response - the JSON object returned in the body of the response.
return response.data; //pass the data array into Tabulator
},
});
</script>
</body>
</html>
fetch() doesnt support local file access. But the browser will through the tag, so if you make your programs.json be proper JS ...
programs.json :
let setData = [ { .... } ];
programs.html :
<html>
<head>
...
<script type="text/javascript" src="programs.json"></script>
</head>
<body>
...
<script>
new Tabulator("#programs",{
data:setData,
...
});
</script>
</body>
</html>
When i upload the html and json file to a webserver it gives following error -> "Error: 'setData' is undefined". Same error as when you press the "Run Code Snippet" button
Interestingly if you open this html locally on the PC it works fine.
Any suggestions why running on a webserver doesnt work?
programs.json:
let setData = [
{
"name": "Stomachache",
"freq": "10000,5000,880,3000,95",
"db": "XTR",
"info": "Bauchschmerzen"
}, {
"name": "Headache",
"freq": "380,2720,2489,2170,1800,1600,1550,880,832,787,776,727,465,444,1865,146,125,95,72,20,450,440,428,660",
"db": "CAF",
"info": "Kopfschmerzen"
}, {
"name": "Toothache",
"freq": "3000,95,1550,880,787,776,727,650,625,600,28,35,28,110,100,60,428,680",
"db": "XTR",
"info": "Zahnschmerzen"
}];
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="programs.json"></script>
</head>
<body>
<div id="programs"></div>
<script>
var table = new Tabulator("#programs", {
data:setData,
height: 326,
layout: "fitColumns",
pagination: "local",
paginationSize: 10,
tooltips: true,
index: "name",
columns: [{
title: "Name",
field: "name",
sorter: "string",
headerFilter: "input"
},
{
title: "Frequencies",
field: "freq",
sorter: "string",
headerFilter: "input"
},
{
title: "Database",
field: "db",
sorter: "string",
editor: "select",
width: 90,
headerFilter: true,
},
{
title: "Programm Info",
field: "info",
sorter: "string",
headerFilter: "input"
},
],
});
</script>
</body>
</html>
I'm creating a "Rally Custom HTML" board using this grouped grid example.
https://help.rallydev.com/apps/2.1/doc/#!/example/groupable-grid
I'm having trouble adding a filter for a specific Milestone. I can get the code below to return user stories without a problem. It has a generic filter on name.
<!DOCTYPE html>
<html>
<head>
<title>Grouped Grid Example</title>
<script type="text/javascript" src="/apps/2.0/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomGrid', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
this.add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'ScheduleState',
'Milestones'
],
context: this.getContext(),
features: [{
ftype: 'groupingsummary',
groupHeaderTpl: '{name} ({rows.length})'
}],
storeConfig: {
model: 'UserStory',
groupField: 'Project',
groupDir: 'ASC',
filters : [
{
property : 'Name',
operator : 'contains',
value : ' '
}
],
fetch: ['Project'],
getGroupString: function(record) {
var Project = record.get('Project');
return (Project && Project._refObjectName) || 'No Project';
}
}
});
}
});
Rally.launchApp('CustomGrid', {
name: 'Custom Grid'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
When I try to change the filter to use "Milestones" it doesn't return any results. I'm able to access the Milestones property display it as a column.
<!DOCTYPE html>
<html>
<head>
<title>Grouped Grid Example</title>
<script type="text/javascript" src="/apps/2.0/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomGrid', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
this.add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'ScheduleState',
'Milestones'
],
context: this.getContext(),
features: [{
ftype: 'groupingsummary',
groupHeaderTpl: '{name} ({rows.length})'
}],
storeConfig: {
model: 'UserStory',
groupField: 'Project',
groupDir: 'ASC',
filters : [
{
property : 'Milestones',
operator : 'contains',
value : ' '
}
],
fetch: ['Project'],
getGroupString: function(record) {
var Project = record.get('Project');
return (Project && Project._refObjectName) || 'No Project';
}
}
});
}
});
Rally.launchApp('CustomGrid', {
name: 'Custom Grid'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
If you know the ObjectId of the milestone you're trying to filter by you can make a filter like this:
{
property : 'Milestones',
operator : 'contains',
value : '/milestone/12345'
}
Or, you can search by name as well:
{
property : 'Milestones.Name',
operator : 'contains',
value : 'A Milestone'
}
You can also just paste the url into your browser to test until you get the query right:
https://rally1.rallydev.com/slm/webservice/v2.0/hierarchicalrequirement?query=(Milestones contains /milestone/12345)
I am developing a small web page that uses Ext.XTemplate and have a problem with displaying view in the index.html. However, it works fine when I've created Ext.XTemplate in the items of my panel. The problem is that I have all the info in json file, so I need a store that is one of the advantages of Ext.view.View.
Help me please create a view in that panel.
P.S. I should use a class that extend panel.Panel as the task is concerned about it.
My first class
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name:'position', type:'string' },
{ name:'title', type:'string' },
{ name:'rate', type:'string' }
]
});
var store = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url: '/app/view/main/data.json',
method:'GET',
reader: {
type: 'json',
root: 'foo'
}
},
autoLoad: true
});
var notiTpl = new Ext.XTemplate(
'<h1>TIOBE rate</h1>',
'<table>',
'<tr>',
'<td>Position on 2015</td>',
'<td>Programming language</td>',
'<td>Rate</td>',
'<td>Group</td>',
'</tr>',
'<tpl for=".">',
'<tr <tpl if="values.position%2 == 1">style="background-color: silver;"</tpl>>',
'<td>{position}</td>',
'<td>{title}</td>',
'<td>{rate}</td>',
'<tpl if="values.position<3">',
'<td>A</td>',
'<tpl elseif="values.position<5">',
'<td>B</td>',
'<tpl else>',
'<td>C</td>',
'</tpl>',
'</tr>',
'</tpl>',
'</table>');
Ext.define('App.view.main.List', {
extend: 'Ext.view.View',
xtype: 'mainlist',
store: store,
tpl: notiTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'There is no text',
renderTo: Ext.getBody()
});
My view
Ext.define('App.view.main.Main', {
extend: 'Ext.panel.Panel',
requires: [
'Ext.plugin.Viewport',
'Ext.window.MessageBox',
'App.view.main.List'
],
items: [{
title: 'Some html text',
items: [{
xtype: 'mainlist'
}]
}]
});
my index.html
<!DOCTYPE HTML>
<html manifest="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>App</title>
<script type="text/javascript" src="ext/build/ext-all.js"></script>
<script type="text/javascript" src="app.js"></script>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" data-app="b0beccc4-d014-4af3-919d-fd0a75c6c656" type="text/javascript" src="bootstrap.js"></script>
</head>
<body></body>
</html>
my app
Ext.application({
name: 'App',
extend: 'App.Application',
requires: [
'App.view.main.Main'
],
//
mainView: 'App.view.main.Main'
//-------------------------------------------------------------------------
});