I want to use ag-grid to display incoming data as a table and also provide an option to export as CSV. I used the reference from here and here to insert code into the template node.
This is my template code:
<script src="https://unpkg.com/ag-grid/dist/ag-grid.min.noStyle.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-theme-balham.css">
<div id="myGrid" style="height: 600px;width:500px;" class="ag-theme-balham"></div>
<script>
(funtion(scope) {
var columnDefs = [
{headerName: "Make", field: "make"},
{headerName: "Model", field: "model"},
{headerName: "Price", field: "price"}
];
//
var rowData = [
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxter", price: 72000}
];
//
var gridOptions = {
columnDefs: columnDefs,
rowData: rowData
};
//
var eGridDiv = document.querySelector('#myGrid');
var testGrid = new agGrid.Grid(gridOptions);
//
scope.$watch('msg', function(msg) {
if (msg) {
row = [
{make: "Toyota", model: "Celica", price: 35000}
];
testGrid.setRowData(row);
}
}
)
}
)(scope);
</script>
But, I keep getting this error:
Uncaught SyntaxError: Unexpected token {
at m (app.min.js:20)
at Re (app.min.js:20)
at w.fn.init.append (app.min.js:20)
at w.fn.init.<anonymous> (app.min.js:20)
at z (app.min.js:20)
at w.fn.init.html (app.min.js:20)
at app.min.js:565
at m.$digest (app.min.js:165)
at m.$apply (app.min.js:168)
at app.min.js:181
How do I get past this error and show MQTT payload as a table?
Related
How do clear the search value after deleting the associated filter?
For example. I added filter: {gender: 'female'}. After this type in the search Mar.
After this clear filter in column name.
I want to clear the search value. For this, I listen to the event of the filter. And if the value of the filter is equal to the search value then clear this.
Maybe exists a more better approach.
How to avoid clear all filters after the clearing search value?
const dataSource = kendo.data.DataSource.create({
data: [{
name: 'Harry',
gender: 'male'
},
{
name: 'Marry',
gender: 'female'
},
{
name: 'Lora',
gender: 'female'
}
]
});
const gridConfig = {
toolbar: [
'search'
],
search: {
fields: ['name']
},
filterable: true,
dataSource: dataSource,
columns: [{
field: 'name'
}, {
field: 'gender'
}]
};
$('#grid').kendoGrid(gridConfig);
$('#grid').data('kendoGrid').bind('filter', onFilter);
const searchElement = $('#grid input.k-input');
function onFilter(e) {
const searchValue = searchElement.val();
if (e.filter) {
const isExistsFilter = e.filter.filters.some(filter => {
return gridConfig.search.fields.some(field => {
return filter.field === field && filter.value === searchValue;
});
});
if (!isExistsFilter && searchValue) {
searchElement.val('');
}
} else {
searchElement.val('');
}
}
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/kendo.all.min.js"></script>
<div id="grid"></div>
I want to create a column chart, I find CanvasJS.Chart to create a chart but it accepts a single element for creating a chart, so my question is how can I use my string[] in CanvasJS.Chart for creating chart
value and Nvalue received from checkbox selection option
#RequestParam(value = "value", required = false) String[] value)
#RequestParam(value = "Nvalue", required = false) String[] Nvalue)
String names[] = value;
String number[] = Nvalue;
model.addAttribute("names", names);
model.addAttribute("umber", number);
<!DOCTYPE HTML>
<html>
<head>
<title>Basic HTML5 Column Chart </title>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Top Oil Reserves"
},
animationEnabled: true,
axisY: {
title: "Reserves(MMbbl)"
},
legend: {
verticalAlign: "bottom",
horizontalAlign: "center"
},
theme: "theme2",
data: [
{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "MMbbl = one million barrels",
dataPoints: [
{y: 297571, label: "Venezuela"}
]
}
]
});
chart.render();
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>
var names=["one"," two"," tree"];
var values=[10, 20, 30];
var result=names.map(function(name,id){
return {y:values[id]||0, label:name};
});
The result is your dataPoints array.
Example:
<html>
<head>
<title>Basic HTML5 Column Chart </title>
<script type="text/javascript">
window.onload = function() {
var names = ["one", " two", " tree"];
var values = [10, 20, 30];
var result = names.map(function(name, id) {
return {
y: values[id] || 0,
label: name
};
});
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Top Oil Reserves"
},
animationEnabled: true,
axisY: {
title: "Reserves(MMbbl)"
},
legend: {
verticalAlign: "bottom",
horizontalAlign: "center"
},
theme: "theme2",
data: [
{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "MMbbl = one million barrels",
dataPoints: result
}
]
});
chart.render();
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>
Create a class for holding values pairs, I used Gson to transform java objects into json strings.
class DataPoint {
private String y;
private String label;
public DataPoint(String y, String label) {
super();
this.y = y;
this.label = label;
}
}
Create an helper class with a static method which converts the pair of arrays into a jsonString
public class MyHelperClass {
public static String toJson(String[] labels, String[] nums) {
Gson gson = new Gson();
List<DataPoint> data = new ArrayList<DataPoint>();
for (int i = 0; i < nums.length; i++) {
DataPoint dp = new DataPoint(nums[i], labels[i]);
data.add(dp);
}
String jsonData = gson.toJson(data);
return jsonData;
}
}
Insert the jsonString into the jsp
{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "MMbbl = one million barrels",
dataPoints: <%= MyHelperClass.toJson(arrayA,arrayB) %>
}
Eventually you will want to create some RESTful web service instead of putting logic insde the JSP.
I am trying to generate a bar graph using data from MYSQL through ajax by taking two input date fields from the user and returning the results using ajax.The problem is that when i select the date range, it doesn't show me anything.
I am new to Ajax as well, so any help will be appreciated.
Below is the code i have tried so far;
Thanks
<?php
$cakeDescription = "Highcharts Pie Chart";
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><?php echo $cakeDescription ?></title>
<link href="../webroot/css/cake.generic.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//default
var startdate = document.getElementById('startdate').value;
var enddate = document.getElementById('enddate').value;
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Highcharts Chart PHP with MySQL Example',
x: -20 //center
},
subtitle: {
text: 'Sumber : Jabatan XYZ',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Jumlah Pelawat'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>:<b>{point.y}</b> of total<br/>'
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
shadow: true
},
series: []
};
function getAjaxData(startdate,enddate) {
$.getJSON("data.php", function(json) {
options.xAxis.categories = json[0]['data']; //xAxis: {categories: []}
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
}
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<a class="link_header" href="/highcharts/"><< Back to index</a>
<div class="menu_top" >
<input type="date" id="startdate" name="startddate">
<input type="date" id="enddate" name="enddate">
</div>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>
</body>
</html>
Below is my data.phpfile,
<?php
#Basic Line
require '../../conn/connection.php';
$id = $_GET['id'];
$startdate = $_GET['startdate'];
$enddate = $_GET['enddate'];
$result = mysql_query("SELECT DISTINCT(membername), COUNT(membername)
AS member
FROM responses WHERE timerecorded>=" . $startdate . " AND timerecorded<=" . $enddate . " GROUP BY membername");
$bln = array();
$bln['name'] = 'Bulan';
$rows['name'] = 'Jumlah Pelawat';
while ($r = mysql_fetch_array($result)) {
$bln['data'][] = $r['membername'];
$rows['data'][] = $r['member'];
}
$rslt = array();
array_push($rslt, $bln);
array_push($rslt, $rows);
print json_encode($rslt, JSON_NUMERIC_CHECK);
mysql_close($con);
I wanted to filter UnitPrice and ProductID. This is the sample, you want more using the jsfiddle link. Check this jsfiddle for more detail & work my program in that
//change event
$("#category").keyup(function () {
var selecteditem = $('#category').val();
var kgrid = $("#grid").data("kendoGrid");
selecteditem = selecteditem.toUpperCase();
var selectedArray = selecteditem.split(" ");
if (selecteditem) {
});
var orfilter = { logic: "or", filters: [] };
var andfilter = { logic: "and", filters: [] };
$.each(selectedArray, function (i, v) {
if (v.trim() == "") {
}
else {
$.each(selectedArray, function (i, v1) {
if (v1.trim() == "") {
}
else {
orfilter.filters.push({ field: "ProductName", operator: "contains", value:v1 },
{ field: "QuantityPerUnit", operator: "contains", value:v1});
andfilter.filters.push(orfilter);
orfilter = { logic: "or", filters: [] };
}
});
}
});
kgrid.dataSource.filter(andfilter);
}
else {
kgrid.dataSource.filter({});
}
});
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="grid"></div>
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<input type="search" id="category" style="width: 230px" />
<input id="reset" type="button" value="Reset" />
<input id="reset1" type="button" value="ORLOGIC" />
</div>
</div>
<script>
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Products"
},
pageSize: 7,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
sortable: true,
pageable: true,
columns: [
{
field: "ProductID",
width: 100
},
{
field: "ProductName",
title: "Product Name"
},
{
field: "UnitPrice",
title: "Unit Price",
width: 100
},
{
field: "QuantityPerUnit",
title: "Quantity Per Unit"
}
]
});
//change event
$("#category").keyup(function () {
var selecteditem = $('#category').val();
var kgrid = $("#grid").data("kendoGrid");
var gridListFilter = { filters: [] };
var gridDataSource = kgrid.dataSource;
gridListFilter.logic = "or"; // a different logic 'and' can be selected
gridListFilter.filters.push({ field: "ProductID", operator: "eq", value: parseInt(selecteditem) });
gridListFilter.filters.push({ field: "UnitPrice", operator: "eq", value: parseInt(selecteditem) });
gridDataSource.filter(gridListFilter);
gridDataSource.read();
});
$('#reset').click(function () {
//not working yet
$('#category').val('');
$("#grid").data("kendoGrid").dataSource.filter([]);
});
//Or LOGIC HERE... DOESN'T WORK
$('#reset1').click(function () {
$("#grid").data("kendoGrid").dataSource.filter({
logic: "or",
filters: [
{
field: "ProductName",
operator: "eq",
value: "Chang"
},
{
field: "QuantityPerUnit",
operator: "contains",
value: "box"
}
]
});
});
});
</script>
</body>
</html>
Let me know if any concern.
List item
I have a page which loads a kendo TreeList by pressing a button. The data is for the moment statically defined in a variable where it stays as a basis for the Kendo TreeList datasource.
I have a datasource definition which I mostly copied from Telerik Website.
I have a treelist with a couple of requirements in terms of CRUD.
level1 - nothing
level2 - add new childnodes only
level3 - edit and delete
Edit should be doubleclick on a level3 item
CRUD command buttons need to be icon-only (no text in the buttons)
I could not achieve this with the buildin CRUD controls unfortunately so I used a Template column where the buttons are placed based on their "Type" field.
Now this has worked but after some changes which I can't undo somehow the add function does not work anymore. It works but new childnode is only visible after a edit ordelete of another node. (as if the change event is not triggered during add). The Add button in the treeList calls a function addProduct where at the end I try to pushCreate directly to the datasource. However the Transport.create is never invoked. It only gets invoked after another Crud action triggers it
Can anybody see what's wrong and couldn't this all be achieve with much easier approach?
Here's the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Grid - CRUD operations with local data</title>
<style>
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="Scripts/jquery-2.1.3.min.js"></script>
<!--<script src="Scripts/kendo.all.min.js"></script>-->
<script src="Scripts/kendo.all.js"></script>
</head>
<body>
<style>
.hidden {
display: none;
}
.k-grid tbody .k-button, .k-ie8 .k-grid tbody button.k-button {
min-width: 0px;
padding-left: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
}
</style>
<div id="buttons">
<br />
<p>
<button name="clear" id="clear" onclick="myclear()">Clear grid</button>
<button name="load" id="load" onclick="loadLocal()">Load from local DB</button>
</p>
<br />
version 1.01<br />
<br />
</div>
<div id="treelist"></div>
<script id="btn-template" type="text/x-kendo-template">
# if (Code == "Product") { #
<a id="btnupdate" class="k-button k-button-icontext k-grid-update column hidden" title="Update product" onclick="update(this)" href="\#"><span class="k-icon k-update"></span></a>
<a id="btndelete" class="k-button k-button-icontext k-grid-delete column" title="Delete product" data-command="destroy" href="\#"><span class="k-icon k-delete"></span></a>
# } else if (Code == "Requirement") { #
<a class="k-button k-button-icontext k-grid-add column" title="Add a product to this requirement" onclick="addProduct(this)" href="\#"><span class="k-icon k-add"></span></a>
# } #
</script>
<script>
var EPDdata // For holding the data of the TreeList
function loadLocal() {
EPDdata = [
{ Id: 1, Description: "Item1", Code: "Category", parentId: null },
{ Id: 2, Description: "Item2", Code: "Requirement", parentId: 1 },
{ Id: 3, Description: "Item3", Code: "Product", parentId: 2 },
{ Id: 4, Description: "Item4", Code: "Requirement", parentId: 1 },
{ Id: 5, Description: "Item5", Code: "Product", parentId: 4 },
{ Id: 6, Description: "Item6", Code: "Product", parentId: 4 },
{ Id: 7, Description: "Item7", Code: "Requirement", parentId: 1 },
{ Id: 8, Description: "Item8", Code: "Requirement", parentId: 1 },
{ Id: 9, Description: "Item9", Code: "Product", parentId: 8 },
{ Id: 10, Description: "Item10", Code: "Product", parentId: 8 }
]
LoadTree();
};
function LoadTree() {
var EPDdataNextID = EPDdata.length + 1;
var LocaldataSource = new kendo.data.TreeListDataSource({
transport: {
read: function (e) {
// on success
e.success(EPDdata);
},
create: function (e) {
// assign an ID to the new item
e.data.Id = EPDdataNextID++;
// save data item to the original datasource
EPDdata.push(e.data);
// on success
e.success(e.data);
},
update: function (e) {
// locate item in original datasource and update it
EPDdata[getIndexById(e.data.Id)] = e.data;
// on success
e.success();
},
destroy: function (e) {
// locate item in original datasource and remove it
EPDdata.splice(getIndexById(e.data.Id), 1);
// on success
e.success();
}
},
error: function (e) {
// handle data operation error
alert("Status: " + e.status + "; Error message: " + e.errorThrown);
},
pageSize: 10,
expanded: true,
batch: false,
schema: {
model: {
id: "Id",
expanded: true,
fields: {
Id: { type: "number", editable: false, nullable: true },
Description: { type: "string", validation: { required: true } },
Code: { type: "string" },
parentId: { type: "number", editable: true, nullable: true }
}
}
}
});
$("#treelist").empty(); // only 1 treelist on the page please
$("#treelist").kendoTreeList({
dataSource: LocaldataSource,
pageable: false,
edit: onEdit,
columns: [
{ field: "Description", title: "Description", width: "400px" },
{ field: "Code", width: "120px" },
{ field: "Id", title: "ID", width: "30px" },
{ field: "parentId", title: "PID", width: "30px" },
{ width: "35px", template: $("#btn-template").html() },
{ command: ["create", "edit", "destroy"] }
],
editable: "inline"
});
var treeList = $("#treelist").on("dblclick", function (e) {
var treeList = $("#treelist").data("kendoTreeList");
var rowindex = e.target.parentNode.rowIndex; // get rowindex
var tr = $(e.target).closest("tr"); // get the current table row (tr)
var dataItem = $("#treelist").data("kendoTreeList").dataItem(tr);
if (dataItem.Code == "Product") {
$("#treelist").find(".edit").addClass("hidden");
$("#treelist").find(".edit").removeClass("edit");
$("#treelist").find(".delete").removeClass("hidden");
$("#treelist").find(".delete").removeClass("delete");
treeList.saveRow(); // first save all other rows
treeList.editRow(tr[0]);
};
}); // double click function
}; // Function CreatetreeList
function onEdit(arg) {
var tr = $(arg.container);//.closest("tr"); // get the current table row (tr)
tr.find("#btndelete").addClass("hidden"); //remove btndelete from commandcolumn
tr.find("#btndelete").addClass("delete"); //put class to select the btn later on
tr.find("#btnupdate").removeClass("hidden"); //make btnupdate visible in commandcolumn
tr.find("#btnupdate").addClass("edit"); //put class to select the btn later on
};
function update(e) { // update the edited row
var tr = $(e).closest("tr"); // get the current table row (tr)
var treeList = $("#treelist").data("kendoTreeList");
treeList.saveRow();
tr.find("#btndelete").removeClass("hidden");
tr.find("#btndelete").removeClass("delete");
tr.find("#btnupdate").addClass("hidden");
tr.find("#btnupdate").removeClass("edit");
};
function addProduct(e) {
var treeList = $("#treelist").data("kendoTreeList");
var dataSource = treeList.dataSource;
var data = dataSource.data;
var tr = $(e).closest("tr"); // get the current table row (tr)
var dataItem = treeList.dataItem(tr);
dataSource.pushCreate({ Id: 15, Description: "New", Code: "Product", parentId: dataItem.Id });
alert("Done");
};
function getIndexById(id) {
var idx,
l = EPDdata.length;
for (var j; j < l; j++) {
if (EPDdata[j].Id == id) {
return j;
}
}
return null;
}
</script>
</body>
</html>
I found the answer !!!
The datasource pagesize is set to 10 and the TreeList was set to paging: false. In all my tests I started with sample data of 10 nodes. All the time I was adding an 11th and 12th record which wasn't showing up until I deleted another node...
Do these things only happen to me?