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>
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 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"}
]
}
I want to show a JSON data at my table as like here: example
I used that CSS imports:
<link rel="stylesheet" href="/css/ui.jqgrid.css"/>
<link rel="stylesheet" href="/css/ui.multiselect.css"/>
<link rel="stylesheet" href="/css/jquery-ui-1.8.1.custom.css"/>
That JS imports:
<script type=text/javascript src="/js/jquery.js"></script>
<script type=text/javascript src="/js/jquery_ui_1.8.1.js"></script>
<script type=text/javascript src="/js/jquery.layout.js"></script>
<script type=text/javascript src="/js/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="/js/ui.multiselect.js"></script>
<script type=text/javascript src="/js/jgrid_4.1.js"></script>
<script type="text/javascript" src="/js/jquery.tablednd.js"></script>
<script type="text/javascript" src="/js/jquery.contextmenu.js"></script>
(Some files has different name but they are OK)
I am getting a JSON data from an URL and when I check it it comes correctly at Firebug.
That's my HTML data:
<table id="confTable"></table>
<div id="pconfTable"></div>
That's my script to populate data:
jQuery("#confTable").jqGrid({ ajaxGridOptions : {type:"GET"}, serializeGridData : function(postdata) {
postdata.page = 1;
return postdata;
}, url:'/ui/webapp/conf', datatype: 'json', colNames:['Value','Type', 'Target Module', 'Configuration Group', 'Name', 'Description', 'Identity', 'Version', 'System Id', 'Active'],
colModel:[
{name:'value',index:'value', width:55},
{name:'type',index:'type', width:55},
{name:'targetModule',index:'targetModule', width:150},
{name:'configurationGroup',index:'configurationGroup', width:180},
{name:'name',index:'name asc', width:90},
{name:'description',index:'description', width:90},
{name:'identity',index:'identity', width:90},
{name:'version',index:'version', width:90},
{name:'systemId',index:'systemId', width:100},
{name:'active',index:'active', width:100}
], rowNum:10, width:980, rowList:[10,20,30], pager: '#pconfTable', sortname: 'name', viewrecords: true, sortorder: "desc", caption:"Configuration Information" });
jQuery("#pconfTable").jqGrid('navGrid', '#pconfTable', {edit:false,add:false,del:false});
That's JSON data that I get:
[{
"value":"10",
"type":"Tip 1",
"targetModule":"Target 1",
"configurationGroup":null,
"name":"Configuration Deneme 1",
"description":null,
"identity":"Configuration Deneme 1",
"version":0,
"systemId":0,
"active":true
},
{
"value":"50",
"type":"Tip 2",
"targetModule":"Target 2",
"configurationGroup":null,
"name":"Configuration Deneme 2",
"description":null,
"identity":"Configuration Deneme 2",
"version":0,
"systemId":0,
"active":true
},
{
"value":"100",
"type":"Tip 3",
"targetModule":"Target 3",
"configurationGroup":null,
"name":"Configuration Deneme 3",
"description":null,
"identity":"Configuration Deneme 3",
"version":0,
"systemId":0,
"active":true
}
]
I have formatted indentation to be read easiliy.
However I don't get any error from Firebug and don't have any can't imported files I still have an empty table.
Any ideas?
PS: Is there anything wrong with my JSON data, should I send a data starts as like => total: xxx, page: yyy, records: zzz, rows: or not a must?
To see the grid filled you should use the following jsonReader as additional jqGrid parameter
jsonReader: {
repeatitems: false,
id: "value",
root: function (obj) { return obj; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
}
I suppose, that the values from the 'value' column are unique, so I used id: "value" in the jsonReader above.
By the way the ajaxGridOptions : {type:"GET"} do nothing. The default mtype: 'GET' do the same. In the call of navGrid method you should use jQuery("#confTable") instead of jQuery("#pconfTable").
After the described changed you will have the following demo. In the demo I added height: 'auto' to have less empty space in the grid.