I am trying to display jsGrid in a Vue-cli scaffolded app. The mounted function does not seem to fire. I am trying to execute a JavaScript function through VueJs. I have done < npm install jquery --save > in the app's root folder.
The code works fine with VueJS in a single page HTML file.
<template>
<div>
<br>
<div class=" from-yellow-700 bg-gradient-to-br" id="jsGrid"><i class="fas fa-arrow-down"></i> {{ message }} <i class="fas fa-arrow-down"></i></div>
</div>
</template>
<script>
import jQuery from "jquery";
export default {
// name: "oneview",
mounted:function(){
jQuery("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
data: this.clients,
fields: [
{ name: "Name", type: "text", width: 150, validate: "required" },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Country", type: "select", items: this.countries, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ type: "control" }
]
});
},
data: function() {
return {
message: 'jsGrid says Hello Vue App!',
clients: [
{ "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
{ "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
],
countries: [
{ Name: "", Id: 0 },
{ Name: "United States", Id: 1 },
{ Name: "Canada", Id: 2 },
{ Name: "United Kingdom", Id: 3 }
],
}
},
methods: {
},
}
</script>
<style scoped></style>
Related
I have defined a Kendo grid as follows:
$(document).ready(function() {
$("#catalogGrid2").kendoGrid(catalogGridOptions);
});
let catalogGridOptions = {
pageable: true,
dataSource: {
serverPaging: true,
//serverGrouping: true,
transport: {
read: {
url: "/gliese/read",
type: "GET",
contentType: "application/json"
}
},
//pageSize: 25,
schema: {
data: "data",
total: "total",
// total: function(response) {
// return response.total;
// },
model: {
id: "catalogID",
fields: {
id: {type: "number"},
name: {type: "string"},
component: {type: "string"}
}
}
},
},
pageable: {
pageSize: 25,
//pageSizes: true,
//pageSizes: [10,25,50,100,"all"],
//input: true,
numeric: true,
refresh: true
},
columns: [
{
field: "id",
hidden: true
},
{
field: "name",
title: "Name",
width: 150
},
{
field: "component",
title: "Component",
width: 75
}
],
};
The data displays correctly in the grid, but there are no pages to navigate through, and the message "No items to display" is in the pager bar as well.
Below is an example of the results being returned:
{
"total": 3803,
"pageSize": 25,
"data": [
{
"id": 12409,
"name": "Sun",
"component": "",
"ra": "00 02 33.8",
"dec": "+00 16 42",
"properMotion": null,
"properMotionDir": null,
"radialVelocity": null,
"spectralTypeFull": "G2 V",
"spectralType": "G",
"spectralTypeSub": "2",
"luminosityClass": "V",
"visualMagnitude": -26.72,
"absoluteMagnitude": 4.85,
"parallax": null,
"bvColor": 0.65,
"hd": null
},
// 24 more results
]
}
Does anyone see any obvious reasons why the pager bar does not work?
EDIT: Added screenshot per request, updated code to newest attempt.
I'm using JSGrid and bring the data from a service to fill the table. Filter in the grid is not working. I've added filtering: true option but still it's not working. I've pasted a sample data and generated the same issue in the following code.
$(function() {
$("#grid").jsGrid({
width: "100%",
height: "400px",
filtering: true,
editing: true,
sorting: true,
paging: true,
data: friends,
fields: [
{ name: "Name", type: "text", width: 100 },
{ name: "Age", type: "number", width: 50 },
countries,
{ name: "Cool", type: "checkbox", width: 40, title: "Is Cool", sorting: false },
{ type: "control" }
]
})
})
var friends = [
{
Name: "Ada Lovelace",
Age: 36,
Country: 3,
Cool: true,
},
{
Name: "Grace Hopper",
Age: 85,
Country: 1,
Cool: true,
},
{
Name: "Alan Turing",
Age: 41,
Country: 3,
Cool: true,
},
{
Name: "Miguel Alcubierre",
Age: 53,
Country: 5,
Cool: true,
}
];
var countries = {
name: "Country",
type: "select",
items: [
{ Name: "", Id: 0 },
{ Name: "United States", Id: 1 },
{ Name: "France", Id: 2 },
{ Name: "United Kingdom", Id: 3 },
{ Name: "Spain", Id: 4 },
{ Name: "Mexico", Id: 5 }
],
valueField: "Id",
textField: "Name"
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="grid"></div>
If you are using client side filtering, then it implemented in loadData method of controller.
Server-side apparently implemented with server script that receives filtering parameters, and uses them to fetch data, and pass to client.
That's why you can use client-side and server-side filtering at the same time.
Here is how your controller.loadData method could look like in this case:
loadData: function(filter) {
var d = $.Deferred();
// server-side filtering
$.ajax({
type: "GET",
url: "/items",
data: filter,
dataType: "json"
}).done(function(result) {
// client-side filtering
result = $.grep(result, function(item) {
return item.SomeField === filter.SomeField;
});
d.resolve(result);
})
return d.promise();
}
hope this will help you to resolve you problem.
I have a HTML data for a column and I want to print it without interpreting the HTML. He is my code
$(function() {
$("#grid").jsGrid({
width: "100%",
height: "400px",
filtering: true,
editing: true,
sorting: true,
paging: true,
data: friends,
fields: [{
name: "Name",
type: "text",
width: 100
},
{
name: "Age",
type: "number",
width: 50
},
{
name: "test",
type: "string",
autoencode: true,
width: 50
},
countries,
{
name: "Cool",
type: "checkbox",
width: 40,
title: "Is Cool",
sorting: false
},
{
type: "control"
}
]
})
})
var friends = [{
Name: "Alan Turing",
Age: 41,
Country: 3,
Cool: true,
test: "<h1>test</h1>",
}, ];
var countries = {
name: "Country",
type: "select",
items: [{
Name: "",
Id: 0
},
{
Name: "United States",
Id: 1
},
],
valueField: "Id",
textField: "Name"
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="grid"></div>
Here the test column displays the html. I want to print test without interpreting. Help would be appreciated.
I've added the cellRenderer and returned an html escaped string. You can change the itemTemplate method too if you please, I've left it as is. You can also use $(document.createElement("div")).text(item).html() instead of the String.replace logic.
I couldn't find anything in the documentation.
$(function() {
$("#grid").jsGrid({
width: "100%",
height: "400px",
filtering: true,
editing: true,
sorting: true,
paging: true,
data: friends,
fields: [{
name: "Name",
type: "text",
width: 100
},
{
name: "Age",
type: "number",
width: 50
},
{
name: "test",
type: "string",
width: 50,
itemTemplate: function(value, item) {
return "<td>" + value + "</td>";
},
cellRenderer: function(item, value) {
//return "<td>" + $(document.createElement("div")).text(item).html() + "</td>";
return "<td>" + String(item).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"') + "</td>";
}
},
countries,
{
name: "Cool",
type: "checkbox",
width: 40,
title: "Is Cool",
sorting: false
},
{
type: "control"
}
]
})
})
var friends = [{
Name: "Alan Turing",
Age: 41,
Country: 3,
Cool: true,
test: "<h1>test</h1>",
}, ];
var countries = {
name: "Country",
type: "select",
items: [{
Name: "",
Id: 0
},
{
Name: "United States",
Id: 1
},
],
valueField: "Id",
textField: "Name"
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="grid"></div>
I have a main grid and would like a child table attached to it. The child table data is there, but has a css property of display:none and the arrow never animates down.
Main grid:
Controls.RenderedGrid = Controls.MainGrid.kendoGrid({
dataSource: null,
filterable: true,
height: "740px",
groupable: true,
sortable: true,
scrollable: true,
pageable: true,
detailInit: Methods.HistoryInit,
resizable: true,
columnResizeHandleWidth: 5,
columnMenu: true,
reorderable: true,
columns: [
{ field: "Id", title: "Id", filterable: false, hidden: false, width: 100 },
{ field: "Date", title: "Date", filterable: false, hidden: false, width: 100 },
{ field: "Text1", title: "Text1", filterable: false, hidden: false, width: 65 },
{ field: "Text2", title: "Text2", filterable: false, hidden: false, width: 65 },
{ field: "Text3", title: "Text3", filterable: false, hidden: false, width: 65 }
]
});
The dataSource gets filled by a Search button which makes an AJAX call to an API.
Detail grid that I'm trying to have as the child table:
Methods.DidHistoryInit = function (e) {
var attachments = new kendo.data.DataSource({
data: [
{ attachmentId: 1321, Name: "Product Roadmap.pptx", Versions: "3", Title: "" },
{ attachmentId: 1322, Name: "Release Timeline.xls", Versions: "1", Title: "" },
{ attachmentId: 1324, Name: "Requirements Analysis.docx", Versions: "2", Title: "" }
],
schema: {
model: {
id: "id",
expanded: true
}
}
});
var versions = [
{ versionId: 1325, attachmentId: 1321, Status: "1321", VersionNumber: "1", Comment: "", Size: "1.23 MB", CreatedBy: "Landry, Kristi", CreationDate: "" },
{ versionId: 1326, attachmentId: 1321, Status: "1321", VersionNumber: "2", Comment: "", Size: "1.87 MB", CreatedBy: "Landry, Kristi", CreationDate: "" },
{ versionId: 1327, attachmentId: 1321, Status: "1321", VersionNumber: "3", Comment: "", Size: "1.91 MB", CreatedBy: "Smith, Michelle", CreationDate: "" },
{ versionId: 1328, attachmentId: 1324, Status: "1324", VersionNumber: "1", Comment: "", Size: "7.41 KB", CreatedBy: "Peters, Stacy", CreationDate: "" },
{ versionId: 1329, attachmentId: 1324, Status: "1324", VersionNumber: "1", Comment: "", Size: "4.43 MB", CreatedBy: "Franklin, Marshall", CreationDate: "" },
{ versionId: 1330, attachmentId: 1322, Status: "1322", VersionNumber: "2", Comment: "", Size: "4.71 MB", CreatedBy: "Peters, Stacy", CreationDate: "" }
];
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: new kendo.data.DataSource({
data: versions,
filter: { field: "attachmentId", operator: "eq", value: e.data.attachmentId }
}),
columns: [
{ field: "versionId", title: "Version Id" },
{ field: "Status" },
{ field: "VersionNumber", title: "Version Number" },
{ field: "Comment" },
{ field: "Size" },
{ field: "CreatedBy", title: "Created By" },
{ field: "CreationDate", title: "Creation Date" }
]
});
When the page is rendered, the child table is display:none and when I click on the side arrow on the row, nothing happens.
Any idea what's going on?
So I have the grid.Panel here :
Ext.require([
'Ext.direct.*',
'Ext.data.*',
'Ext.grid.*'
]);
Ext.define('PersonalInfo', {
extend: 'Ext.data.Model',
fields: [ 'name', 'email']
});
Ext.onReady(function() {
// create the Grid
Ext.create('Ext.grid.Panel', {
store: {
model: 'PersonalInfo',
autoLoad: true,
proxy: {
type: 'ajax',
url : 'app/data/users.json',
reader: {
type: 'json',
root: 'users'
}
}
},
columns: [{
dataIndex: 'name',
width: 50,
text: 'ID'
}],
height: 450,
width: 700,
title: 'Velociraptor Owners',
renderTo: Ext.getBody()
});
});
And the users.json file here, who's extension is app/data/users.json:
{
"users": [
{ "name": "Name 1" , "email": "email#site.com" },
{ "name": "Name 2" , "email": "email#site.com" },
{ "name": "Name 3" , "email": "email#site.com" },
{ "name": "Name 4" , "email": "email#site.com" },
{ "name": "Name 5" , "email": "email#site.com" }
]
}
The grid displays on my browser (Firefox. IE9 doesn't display anything) but is not displaying the "name" field like I told it to. Any ideas?