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.