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
Related
I'm using quill with vue 3 and can't find a way to autofocus the editor input field in their docs.
I've tried targeting parent elements with:
document.getElementById(...).focus()
which did nothing. This is how I've implemented quill, text-editor.vue:
<template>
<div id="text-editor" class="text-editor">
<quill-editor :modules="modules" :toolbar="toolbar"/>
</div>
</template>
<script setup>
import BlotFormatter from 'quill-blot-formatter'
const modules = {
module: BlotFormatter,
}
const toolbar = [
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'size': ['small', false, 'large', 'huge'] }],
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'align': [] }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
['link', 'image', 'video'],
['clean']
];
</script>
and import it in component.vue:
<template>
<div id="component">
<text-editor/>
</div>
</template>
<script setup>
import textEditor from './text-editor'
</script>
Any idea how to autofocus quill?
I found the solution. Just use the #onReady event. As simple as this:
<QuillEditor
theme="snow"
#ready="onReady"
/>
Then add the method:
methods: {
onReady(editor) {
editor.focus();
},
},
You can access the quill instance with getQuill() API and then use quill.focus() to focus the quill editor, here is an example:
<template>
<QuillEditor
ref="quillEditor"
theme="snow"
:options="options"
#ready="onQuillReady"
/>
</template>
<script setup>
import { ref } from "vue";
import { QuillEditor } from "#vueup/vue-quill";
import "#vueup/vue-quill/dist/vue-quill.snow.css";
const quillEditor = ref(); // editor ref
const options = {
// ... options for quill editor ...
}
function onQuillReady() {
// focus editor when it is ready
quillEditor.value.getQuill().focus();
}
</script>
Ref: https://vueup.github.io/vue-quill/api/methods.html#getquill
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 am trying to create a lock on a column on treelist in kendo UI. If user clicks on a button it will lock a column in the treelist, I tried like this :
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/treelist/frozen-columns">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
</head>
<body>
<button>click me</button>
<div id="example">
<div id="treelist"></div>
<script>
$(document).ready(function () {
$("button").click(function(){
var treelist = $("#treelist").data("kendoTreeList");
treelist.lockColumn("LastName");
});
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service";
var dataSource = new kendo.data.TreeListDataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/EmployeeDirectory",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeId",
fields: {
EmployeeId: { type: "number", nullable: false },
parentId: { field: "ReportsTo", nullable: true }
}
}
}
});
$("#treelist").kendoTreeList({
dataSource: dataSource,
reorderable: true,
resizable: true,
sortable: true,
filterable: true,
columnMenu: true,
columns: [
{
field: "FirstName",
expandable: true,
title: "First Name",
lockable: true,
width: 250
},
{
field: "LastName",
title: "Last Name",
lockable: true,
width: 200
},
{
field: "Position",
width: 400,
lockable: true
},
{
field: "Extension",
title: "Ext",
format: "{0:#}",
width: 150,
}
]
});
});
</script>
<style>
#treelist {
width: 950px;
}
</style>
</div>
</body>
</html>
lockColumn function gives the error on console and its not producing any lock on treelist :
TypeError: d is undefined kendo.all.min.js:53:29331
http://dojo.telerik.com/elipA
lockColumn API : http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist
Telerik Kendo UIs TreeList has a limitation in the column locking, which is that at least one column must be locked in the initialization phase for the programmatical column locking to work as per the documentation: "In order to use this method, the treelist must be initialized with at least one locked column, and should have unlocked columns left after the target column is locked.", source http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#methods-lockColumn.
See corrected Dojo example here: http://dojo.telerik.com/#mrtaunus/iYeGI.
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"}
]
}