I'm new to JS and have been using JSGrid for all of my grids. I'm at a point where I need to add a custom field. The issue is that I'm unsure if I can add HTML as part of my data. What I'm trying to do is add an Audio Control to play the MP3 for each specific row. I'm able to get a grayed out control there, but can't get the file to pick up. Any help here would be greatly appreciated! Here's sample code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<body>
<div id="jsGrid">
<script>
var AudioField = function(config) {
jsGrid.Field.call(this, config);
};
AudioField.prototype = new jsGrid.Field({
itemTemplate: function(value) {
return $("<audio controls>").css({
display: "inline-block",
width: "50px",
height: "22px"
});
},
});
jsGrid.fields.audio = AudioField;
var clients = [
{ "ID": 0, "User": "Bob Jones", "Instrument": "Banjo", "Notes": "", "Listen": false, "Audio": "<audio controls><source src = 'directory/0.mp3' type = 'audio/mp3'></audio>"},
{ "ID": 1, "User": "Lindsay Wilson", "Instrument": "Banjo", "Notes": "", "Listen": false, "Audio": "" }
];
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: false,
editing: true,
sorting: true,
paging: true,
data: clients,
fields: [
{ name: "ID", type: "number", width: 50, validate: "required" , editing: false},
{ name: "User", type: "text", width: 200, editing: false },
{ name: "Instrument", type: "text", width: 200, editing: false },
{ name: "Notes", type: "text", width: 400},
{ name: "Listen", type: "checkbox", title: "Listen", sorting: false , editing: true},
{ name: "Audio", type: "audio"},
{ type: "control" }
]
});
items = $("#jsGrid").jsGrid("option", "data");
console.log(items)
</script>
</body>
</html>
A friend helped me figure this one out. The issue is a CSS issue, not JavaScript. If I remove the following code, it works properly.
itemTemplate: function(value) {
return $("<audio controls>").css({
display: "inline-block",
width: "50px",
height: "22px"
});
},
Related
I am using Kendo UI, specifically the kendo grid and the kendo dataSource.
I'm getting data from a local API. The data is retrieving correctly (checked in postman). I save (or tried to save) the result of this get result in a kendo dataSource.
Then I pass this dataSource as a parameter when creating the grid. Unfortunately, the grid doesn't show any result...
Here is the code:
<script>
var inputLe = localStorage.getItem("storageLe");
$(document).ready(function () {
var gridDataSource = new kendo.data.DataSource({
transport: {
read:{
url: "http://localhost:3000/api/reg",
dataType: "jsonp",
type: "GET",
}
},
schema:{
//data: "data",
model:{
// id: "id",
fields:{
id: { type: "number" },
Number: { type: "string" },
Date: { type: "date" },
Amout: { type: "number" },
Net: { type: "number" },
Category: { type: "string" },
Commen: { type: "string" },
Entity: { type: "string" },
Quart: { type: "string" },
Confirmed: { type: "boolean" },
Stat: { type: "boolean" }
}
}
},
//serverFiltering : true,
//filter : [
// {field: "Legal_Entity", operator: "eq", value: "3800" },
//]
});
$("#grid").kendoGrid({
dataSource: gridDataSource,
height: 700,
editable: "incell",
groupable: true,
sortable: true,
toolbar: ["excel", "pdf", "search",{name:'new', text:'Create Comment', iconClass:"k-icon k-i-plus"}],
dataBound: onDataBound,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "Number",
title: "Number"
}, {
field: "Date",
title: "Date",
format: "{0:dd/MM/yyyy}"
}, {
field: "Amout",
title: "Amount"
}, {
field: "Net",
title: "Net"
}, {
field: "Category",
title: "Category"
}, {
field: "Commen",
title: "Comment",
width: 300
}, {
field: "Entity",
title: "Entity"
}, {
field: "Quart",
title: "Quarter"
}, {
field: "Confirmed",
title: "Confirmed",
}, {
field: "Stat",
title: "Status",
}
]
});
});
window.localStorage.removeItem("storageLe");
//edit to fetch in the comment drodown the categories
function clinetCategoryEditor(container, options) {
$('<input required name="Commen">')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
data: categories
}
});
}
//function that set the boolean status of Stat and show matched or unmatched with colors
function onDataBound(e){
var grid = this;
grid.table.find("tr").each(function(){
var dataItem = grid.dataItem(this);
var themeColor = dataItem.Stat ? 'success' : 'error';
var text = dataItem.Stat ? 'Matched' : 'Unmatched';
$(this).find(".badgeTemplate").kendoBadge({
themeColor: themeColor,
text: text,
});
});
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>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">
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="js/pako_deflate.min.js"></script>
<script src="js/jszip.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/estilo.css">
<link rel="stylesheet" href="css/daterangepicker.css">
</head>
<body>
<div>
<p>
<h1>Some</h1>
</p>
</div>
<div id="container">
<div id="grid"></div>
</div>
here is a sample json return from the API:
{
"id": 512,
"Number": "00000",
"Date": "2000-05-01T03:00:00.000Z",
"Amout": -999.99,
"Net": 0,
"Category": "00",
"Commen": "Some comment",
"Entity": "1234",
"Quart": "2",
"Confirmed": 1,
"Stat": 1
}
Thanks in advance.
Edit1: Put all the functions on the code snippet.
Edit2: print screen of the console and network tabs.
Edit3: new print screen usins json instead of jsonp (CORS error)
Here's an example of a grid populated with data based on your example. As per my comment "did you try data:[...]", you replied there is no data. In this example, the grid shows the data. This means the problem isn't it your grid. It must be in transport. Is your localhost api returning an array? As your example code is unclear and not a minimum reproducible working example I hope the example below will help you pinpoint your problem. Try it in the Telerik DOJO or anywhere you like.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$(document).ready(function () {
var gridDataSource = new kendo.data.DataSource({
data: [{ "id": 512, "Number": "00000", "Date": "2000-05-01T03:00:00.000Z", "Amout": -999.99, "Net": 0, "Category": "00", "Commen": "Some comment", "Entity": "1234", "Quart": "2", "Confirmed": 1, "Stat": 1 } ],
});
$("#grid").kendoGrid({
dataSource: gridDataSource,
height: 700,
editable: "incell",
groupable: true,
sortable: true,
toolbar: ["excel", "pdf", "search",{name:'new', text:'Create Comment', iconClass:"k-icon k-i-plus"}],
//dataBound: onDataBound,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "Number",
title: "Number"
}, {
field: "Date",
title: "Date",
format: "{0:dd/MM/yyyy}"
}, {
field: "Amout",
title: "Amount"
}, {
field: "Net",
title: "Net"
}, {
field: "Category",
title: "Category"
}, {
field: "Commen",
title: "Comment",
width: 300
}, {
field: "Entity",
title: "Entity"
}, {
field: "Quart",
title: "Quarter"
}, {
field: "Confirmed",
title: "Confirmed",
}, {
field: "Stat",
title: "Status",
}]
});
});
</script>
<style>
</style>
</div>
</body>
</html>
The #jpllosa answer help me to find where the issue is. Just adding this answer to explain better how I fix this.
I'm using a node express backend to communicate with my MySQL database, and here I have to allow cors use (if you not familiar with cors, I recommend this link: https://www.section.io/engineering-education/how-to-use-cors-in-nodejs-with-express/)
So my main problem is I'm waiting for a "JSONP" when my data is a "JSON". With the "JSON" type i was receiving the CORS error message as you can see in my last image from the original post.
To allow cors I used the following code in my server.js file:
const cors = require('cors');
app.use(cors({
origin: '*'
}));
In the mentioned link you can see how to add specific domain to your API or use all domains with the "*" character.
Again, thanks to #jpllosa for his answer and time helping me here.
I face some problems with export to excel in Kendo Grid. The problem is that the headers are encoded in the excel. I use Kendo UI with JQuery
The headers are fine in the grid, if the data is fine in the grid and in the exported file, but the headers in the exported file are encoded.
My Grid:
My Expxorted file:
Very Thanks,
Boris
Try this
You can find some documentation here
var grid = $("#grid").kendoGrid({
toolbar: ["excel"],
excel: {
fileName: "Kendo UI Grid Export.xlsx",
proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
},
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
schema:{
model: {
fields: {
UnitsInStock: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsOnOrder: { type: "number" },
UnitsInStock: { type: "number" }
}
}
},
pageSize: 7,
},
sortable: true,
pageable: true,
filterable: true,
columnMenu: true,
reorderable: true,
resizable: true,
columns: [
{ width: 300, locked: true, field: "ProductName", title: "Şehir"},
{ width: 300, field: "UnitPrice", title: "Statù", },
]
}).getKendoGrid();
//set the test values
grid.one("dataBound", function(){
this.dataSource.at(0).set("ProductName", "statù 'this is \" a test");
})
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/excel-export">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.624/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.624/styles/kendo.default.min.css" />
<script src="https://kendo.cdn.telerik.com/2015.2.624/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.2.624/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
</div>
</body>
</html>
I am trying to select edges based on a passed in string. Here is a sample json:
{
"group": "edges",
"data": {
"id": "8",
"source": "Q14814",
"target": "P20393",
"direction": "|->",
"Sources": {
"dataSource": "database",
"dbId": "0",
"sourceId": "1368140",
"sourceType": "REACTION"
}
}
}
Each edge may have a single source, or an array of sources. I want to select all edges that have a sourceId of the string I pass in. So, if I pass in a string of "1368140" I want to get all edges that contain a source with a sourceId of "1368140".
I have tried a few different ways to select this including:
cy.filter('edge[reactomeId = "' + string + '"]'));
or
cy.elements('edge[reactomeId = "' + string + '"]'));
or
cy.filter('reactomeId = ' + string + ''));
and seemingly all other permutations of this. Does anyone have any idea how I can select these edges correctly?
This is my way of doing this:
// The syntax is important here!
cy.edges('[source = "' + string + '"]');
The source of this particular syntax can be found here.
Live example (output in console):
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: "node",
css: {
content: "data(id)",
"text-valign": "center",
"text-halign": "center",
height: "60px",
width: "100px",
shape: "rectangle",
"background-color": "data(faveColor)"
}
},
{
selector: "edge",
css: {
"curve-style": "bezier",
"control-point-step-size": 40,
"target-arrow-shape": "triangle"
}
}
],
elements: {
nodes: [{
data: {
id: "Top",
faveColor: "#2763c4"
}
},
{
data: {
id: "yes",
faveColor: "#37a32d"
}
},
{
data: {
id: "no",
faveColor: "#2763c4"
}
},
{
data: {
id: "Third",
faveColor: "#2763c4"
}
},
{
data: {
id: "Fourth",
faveColor: "#56a9f7"
}
}
],
edges: [{
data: {
source: "Top",
target: "yes"
}
},
{
data: {
source: "Top",
target: "no"
}
},
{
data: {
source: "no",
target: "Third"
}
},
{
data: {
source: "Third",
target: "Fourth"
}
},
{
data: {
source: "Fourth",
target: "Third"
}
}
]
},
layout: {
name: "dagre"
}
}));
cy.bind('click', 'node', function(event) {
console.log(cy.edges('[source = "' + event.target.id() + '"]'));
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 85%;
width: 100%;
float: right;
position: absolute;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://unpkg.com/cytoscape#3.3.0/dist/cytoscape.min.js">
</script>
<!-- cyposcape dagre -->
<script src="https://unpkg.com/dagre#0.7.4/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
After filtering being done, I have to select a second page/do something. How can I detect it?
Thank you!
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>
<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<script src="http://rniemeyer.github.io/knockout-kendo/js/knockout-kendo.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
filterable: true,
dataBinding: onDataBinding,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name"
}, {
field: "ShipCity",
title: "Ship City"
}
]
});
});
function onDataBinding(arg) {
if ($("#grid").data("kendoGrid").dataSource.filter()) {
alert("Filter has been applied to grid");
}
else {
alert("Filter has NOT been applied to gridNo filter");
}
}
</script>
</body>
</html>
Let me know if any concern.
I'm new on jqGrid, just got started on it last week. I'm a bit stump on why is the Column Chooser not visible. I tried 3 different Column Chooser scripts w/ no luck. Then I downloaded the latest jqGrid version this am w/ no luck. :-( It seems I do not have enough knowledge of jquery and jqgrid for it to work. Thanks...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- This force IE to use the latest version of HTML, CSS and JavaScript instead of being forced to use 1 specific IE version only -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Blah</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-v1.10.3.themes/base/minified/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="css/jqgrid-v4.5.0/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="css/jqgrid-v4.5.0/ui.multiselect.css" />
<script type="text/javascript" src="scripts/jquery-v2.0.0.min.js"></script>
<script src="scripts/jquery-ui-v1.10.3/minified/jquery-ui.min.js" type="text/javascript"></script>
<script src="scripts/jqgrid-v4.5.0/i18n/grid.locale-en.js" type="text/javascript"></script>
<!--<script src="scripts/jqgrid-v4.5.0/jquery.jqGrid.min.js" type="text/javascript"></script>-->
<script src="scripts/jqgrid-v4.5.0/jquery.jqGrid.src.js" type="text/javascript"></script>
<script src="scripts/jqgrid-v4.5.0/ui.multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var jqgridSpreadsheetId = $('#MyInventoryJqgrid_Spreadsheet');
var jqgridPagerId = $('#MyInventoryJqgrid_Pager');
////jqGrid Column Chooser / JQuery Multiselect Plugin...
////http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods&s[]=column&s[]=chooser...
//jqgridSpreadsheetId.extend({
// columnChooser: function (opts) {
// opts = $.extended({
// "title": 'Select columns',
// "width": 200,
// "height": 400,
// //classname: '',
// "done": function (parm) { if (perm) { self.jqgrid("remapColumns", perm, true); } },
// "msel": "multiselect"//,
// //dlog: '',
// //dlog_opts: '',
// //cleanup: function () { }
// });
// }
//});
//jqGrid Plugin...
//http://www.trirand.com...
jqgridSpreadsheetId.jqGrid({
url: '../websrvc/JqGrid.ashx',
datatype: 'json',
mtype: 'POST',
postData: { WhichJqgridTemplate: '<%=JqqridTools.Template.MyInventory%>', WhichAction: '<%=JqqridTools.Action.Display%>' },
colNames: ['Id','Stock Number','VIN','Year','Make','Model','Trim','Mileage','Purchase Price','Stock Date','Repair Cost','Total Cost','Days In Inventory'], //Display Text in Column Header...
colModel: [
//In this case, use "sorttype" property in "colModel" for it to work when "loadonce" is set to true...
{ name: 'Id', index: 'Id', hidden: true, sorttype: 'int', width: 0, align: 'left' },
{ name: 'StockNumber', index: 'StockNumber', sorttype: 'text', width: 100, align: 'left' },
{ name: 'Vin', index: 'Vin', sorttype: 'text', width: 140, align: 'left' },
{ name: 'Year', index: 'Year', sorttype: 'int', width: 50, align: 'left' },
{ name: 'Make', index: 'Make', sorttype: 'text', width: 80, align: 'left' },
{ name: 'Model', index: 'Model', sorttype: 'text', width: 80, align: 'left' },
{ name: 'Trim', index: 'Trim', sorttype: 'text', width: 100, align: 'left' },
{ name: 'Mileage', index: 'Mileage', sorttype: 'int', width: 60, align: 'left' },
{ name: 'PurchasePrice', index: 'PurchasePrice', sorttype: 'currency', width: 60, align: 'left' },
{ name: 'StockDate', index: 'StockDate', sorttype: 'date', width: 80, align: 'left', formatter: 'date', formatoptions: { newformat: 'm/d/Y' } }, //"formatter" and "formatoptions" is required for date sorting to works properly...
{ name: 'RepairCost', index: 'RepairCost', sorttype: 'currency', width: 60, align: 'left' },
{ name: 'TotalCost', index: 'TotalCost', sorttype: 'currency', width: 60, align: 'left' },
{ name: 'DaysInInventory', index: 'DaysInInventory', sorttype: 'int', width: 65, align: 'left' }
],
pager: jqgridPagerId,
rowNum: 10,
rowList: [5, 10, 20, 50], //Drop-down selection in footer - To show how many rows per page...
//sortname: 'StockDate',
//sortorder: 'desc',
sortname: 'Vin',
sortorder: 'desc',
viewrecords: true,
//gridview: true,
imgpath: '',
caption: 'My Inventory',
width: 1022,
shrinkToFit: false,
height: 200,
sortable: true, /* This allows both 1) Moving columns sideway to other location fields and 2) for jqGrid Column Chooser Plugin / JQuery Multiselect Plugin to work... */
loadonce: true, //In this case, use "sorttype" property in "colModel" for it to work when "loadonce" is set to true...
loadError: function (xhr, st, err) {
//alert("Type: " + st + "; Response: " + xhr.state + "; Status: " + xhr.statusTeext + "; Error: " + err);
alert("An error had occurred, please try again or notify webmaster of this error");
}
}).jqGrid('navButtonAdd', jqgridPagerId, {
caption: 'ddd',
buttonicon: 'ui-icon-calculator',
title: 'choose columns',
onClickButton: function () {
jqgridSpreadsheetId.jqGrid('columnChooser');
}
});
//Navigation Buttons...
/*
$('#' + jqgridSpreadsheetId).jqGrid('navButtonAdd', '#' + jqgridPagerId, {
caption: "dd",
buttonicon: "ui-icon-calculator",
title: "choose columns",
onclickButton: function () {
$(this).jqGrid('columnChooser', {
done: function (perm) {
if (perm) {
this.jqGrid("remapColumns", perm, true);
saveColumnState.call(this.perm);
}
}
});
}
});
*/
});
</script>
</head>
<body>
<table id="MyInventoryJqgrid_Spreadsheet" class="scroll"></table>
<div id="MyInventoryJqgrid_Pager" class="scroll" style="text-align:center;"></div>
</body>
</html>
navButtonAdd can add button in existing navigator bar. So you have to call navGrid before (see the documentation). For example
$("#MyInventoryJqgrid_Spreadsheet").jqGrid({
url: "../websrvc/JqGrid.ashx",
datatype: "json",
pager: "#MyInventoryJqgrid_Pager",
...
}).jqGrid("navGrid", "#MyInventoryJqgrid_Pager",
{add: false, edit: false, del: false, search: false, refresh: false})
.jqGrid("navButtonAdd", "#MyInventoryJqgrid_Pager", {
caption: "ddd",
buttonicon: "ui-icon-calculator",
title: "choose columns",
onClickButton: function () {
$(this).jqGrid("columnChooser");
}
});