For a project of mine I have to use jsgrid (http://js-grid.com).
To test if how to use jsgrid I wanted to do the "getting started" example (http://js-grid.com/getting-started.
My problem, in my opinion I did everything like the example said but it didn't work in the end.
What am I missing?
Here's my code:
<!DOCTYPE html>
<html>
<head>
<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.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<script>
var 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 },
{ "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
{ "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
{ "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
];
var countries = [
{ Name: "", Id: 0 },
{ Name: "United States", Id: 1 },
{ Name: "Canada", Id: 2 },
{ Name: "United Kingdom", Id: 3 }
];
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
data: 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: countries, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ type: "control" }
]
});
</script>
</head>
<body>
<div id="jsGrid"></div>
</body>
</html>
Your script code runs before the DOM is ready. I wrapped your script in between:
$(document).ready(function() {
and:
});
and it ran fine with the table shown. For some explanation, see here.
jsGrid is a fantastic tool. Unfortunately, it has near zero diagnostics. Something can be wrong, like a simple typo, but there is no indication at all of what is wrong.
Related
I have a map processed with VueJS and I have problems with events connectorClick.
In the example below when clicking on the connector line the alert does not work.
Vue.use(VueFusionCharts, FusionCharts);
let grphMap = new Vue ({
el: '#app-vue',
data: {
type: "maps/romania",
width: "800",
height: "600",
dataFormat: "json",
dataSource: {
'chart': {
"theme": "fusion",
"nullEntityColor": "#E5E5E9",
"entityFillHoverColor": "#99ccff",
"showLabels": '1',
"showEntityHoverEffect": "1",
"showtooltip": "1",
"connectorColor": "#0CB2B0",
"connectorHoverColor": "#000000",
"connectorthickness": "3",
"markerfontsize": "18",
"markerfontcolor": "#0a0a0a",
"numbersuffix": "%",
"entityFillColor": "#ff0000",
"markerBgColor": "#FF0000",
"markerRadius": "12",
},
"colorrange": {
"gradient": "0",
},
"data": [
{
id: '10',
color: "#74CCEB",
}
],
"markers": {
"shapes": [
{
"id": "myCustomShape",
"type": "circle",
"fillcolor": "#f8bd19",
"showborder": "0"
}
],
"items": [
{
shapeid: "myCustomShape",
id: "10",
x: "295.5",
y: "283.5",
},
{
shapeid: "myCustomShape",
id: "11",
x: "323.9",
y: "226.6",
}
],
"connectors": [
{
"from": "10",
"to": "11",
"showtooltip": "1",
"color": "#F4191F",
"tooltext": "<b>Shipping Details:</b>{br}Daily shipment: $label Units{br}Average shipping cost: $1.2"
}
]
}
},
events: {
"connectorClick": function() {
alert("Test alert!");
}
}
}
});
<script type="text/javascript" src="https://unpkg.com/vue#2.3.3"></script>
<script type="text/javascript" src="https://unpkg.com/vue-fusioncharts/dist/vue-fusioncharts.min.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.maps.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.romania.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<div id="app-vue">
<fusioncharts
:type="type"
:width="width"
:height="height"
:dataFormat="dataFormat"
:dataSource="dataSource"
></fusioncharts>
</div>
https://jsfiddle.net/Hexman/5e61pu3r/25
I found a functional example but it is not in VueJs
http://jsfiddle.net/fusioncharts/t226vxnp/
Do not give me the saddle where my mistake is?
Seems like you forgot to bind the events object in your fusioncharts template which you've defined in the data of your component. Please refer to the following code for your template:
<fusioncharts
:type="type"
:width="width"
:height="height"
:dataFormat="dataFormat"
:dataSource="dataSource"
:events="events" // Bind your events object
></fusioncharts>
I want use jsgrid.min.js to create table in vue component.I should call this in jsgrid.min.jsfunction
jsGrid(..)
how can i do this?(call a function that placed outer the vue component in component )
component.vue
<template>
<div id="jsGrid">
</div>
</template>
<script>
export default {
data: () => ({
name: "mja"
}),
mounted () {
$("#jsGrid").jsGrid({
width: "100%",
height: "500px"
});
}
}
</script>
<style scoped>
</style>
error
[Vue warn]: Error in mounted hook: "TypeError: $(...).jsGrid is not a function"
I actually embedded src file
<script type="text/javascript" src="{{ asset('plugins/jsgrid/dist/jsgrid.min.js')}}"></script>
You Need To Include Jquery as jsGrid using Jquery , Here is Working Demo :)
var app = new Vue({
el: '#app',
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: {
message: '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 },
{ "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
{ "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
{ "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
],
countries :[
{ Name: "", Id: 0 },
{ Name: "United States", Id: 1 },
{ Name: "Canada", Id: 2 },
{ Name: "United Kingdom", Id: 3 }
],
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
{{ message }}
<div id="jsGrid"></div>
</div>
I am using Select2 as follow:
$('select#fields').select2({
placeholder: 'Select a field',
data: data.fields
});
data.fields is a JSON like this one:
"fields": [
{
"id": "companies_id",
"text": "companies_id",
"data-type": "int"
},
{
"id": "parent_companies_id",
"text": "parent_companies_id",
"data-type": "int"
},
{
"id": "client_of_companies_id",
"text": "client_of_companies_id",
"data-type": "int"
},
{
"id": "asset_locations_id",
"text": "asset_locations_id",
"data-type": "int"
},
{
"id": "companies_name",
"text": "companies_name",
"data-type": "varchar"
},
{
"id": "companies_number",
"text": "companies_number",
"data-type": "varchar"
}
]
id and text are used to fill the option values, can I use the third value data-type and set it as an attribute for the <option>? If so how? Can any leave me an example?
Actually - select2 by default saves all of the attributes in the data('data') variable of the <option> element that it creates, and you can always access these values using the $(<option>).data('data'), however keep in mind that it's not the same as .data('type') for data-type="value". You need to use the complete name of the attribute.
Here is an example of how to get the value of data-type on select event:
var $example = $("#s1").select2({
data: [
{
"id": "companies_id",
"text": "companies_id",
"data-type": "int",
"data-extra": '1'
},
{
"id": "parent_companies_id",
"text": "parent_companies_id",
"data-type": "int",
"data-extra": '2'
},
{
"id": "client_of_companies_id",
"text": "client_of_companies_id",
"data-type": "int",
"data-extra": '3'
},
{
"id": "asset_locations_id",
"text": "asset_locations_id",
"data-type": "int",
"data-extra": '4'
},
{
"id": "companies_name",
"text": "companies_name",
"data-type": "varchar",
"data-extra": '5'
},
{
"id": "companies_number",
"text": "companies_number",
"data-type": "varchar",
"data-extra": '6'
}
],
}).on('select2:select', function(e) {
console.log(e.params.data['data-type'], e.params.data['data-extra']);
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
<select id="s1">
</select>
Is it possible in igGrid Infragistics control insert
carriage return / line feed
inside the text of a cell?
For example given the next datasource:
var ds = [
{ "Id": 1, "Name": "Adjustable \\r\\n Race", "ProductNumber": "AR-5381", "soldi" : 10.10 },
{ "Id": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327", "soldi" : 20.10 },
{ "Id": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349", "soldi" : 30.10 }
];
you can see between the words Adjustable and Race the chars "\r\n", but it doesn't work... I tried:
"\r", "\r\n", "\line", "<br />", "
"
in every test I see on screen the chars and not the new line... maybe there is a setting I don't know...
If you need a complete test example:
<!doctype html>
<html>
<head>
<!-- Infragistics Combined CSS -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="Scripts/jqueryUI/css/humanity/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
<link href="./Scripts/InfragisticsNetAdvantage2012.1/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
<link href="./Scripts/InfragisticsNetAdvantage2012.1/css/structure/infragistics.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./Scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./Scripts/jquery.hotkeys-0.8.js"></script>
<script type="text/javascript" src="./Scripts/jqueryUI/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript" src="./Scripts/jquery.ba-outside-events.min.js"></script>
<script type="text/javascript" src="./Scripts/InfragisticsNetAdvantage2012.1/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="./Scripts/InfragisticsNetAdvantage2012.1/Scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="./Scripts/InfragisticsNetAdvantage2012.1/Common/jQuery/Common/js/infragistics.loader.js"></script>
<script src="./Scripts/InfragisticsNetAdvantage2012.1/Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script src="./Scripts/InfragisticsNetAdvantage2012.1/Common/jQuery/Common/js/infragistics.js" type="text/javascript"></script>
<script type="text/javascript">
var ds = [
{ "Id": 1, "Name": "Adjustable \\r\\n Race", "ProductNumber": "AR-5381", "soldi" : 10.10 },
{ "Id": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327", "soldi" : 20.10 },
{ "Id": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349", "soldi" : 30.10 },
{ "Id": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908", "soldi" : 40.10 },
{ "Id": 316, "Name": "Blade", "ProductNumber": "BL-2036", "soldi" : 50.10 },
{ "Id": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965", "soldi" : 60.10 },
{ "Id": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738", "soldi" : 70.10 },
{ "Id": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457", "soldi" : 80.10 },
{ "Id": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903", "soldi" : 10.10 }
];
$(function () {
$("#gridUpdating").igGrid({
primaryKey: "Id",
renderCheckboxes: true,
columns: [
{ headerText: "Make Flag", key: "MakeFlag", dataType: "bool", readOnly: false, width: "200"},
{ headerText: "Product ID", key: "Id", dataType: "number", width: "200" },
{ headerText: "Product Name", key: "Name", dataType: "string", width: "200" },
{ headerText: "Product Number", key: "ProductNumber", dataType: "string" , width: "200" },
{ headerText: "soldi", key: "soldi", dataType: "number" , width: "200", format: "##.##,##" }
],
dataSourceType: "json",
dataSource: ds,
headerRendered: function(evt, ui) {
console.log($($('#gridUpdating').igGrid("headersTable")).html());
},
rowsRendered: function(evt, ui) {
$.each(ui.owner.element.find("tr td:nth-child(5)"), function() {
var row = $(this).closest('tr')
rowId = $(row).attr("data-id");
if(rowId){
$(this).html((parseFloat($(this).html(),10).toFixed(2)).toString().replace(".",","));
}
});
$.each(ui.owner.element.find("tr td:nth-child(1)"), function() {
var row = $(this).closest('tr')
rowId = $(row).attr("data-id");
if(rowId){
$(this).html("<input type='checkbox' name='chk' id='chk_" + rowId + "' />");
}
});
$(ui.owner.element.find("tr td:nth-child(1)")).bind('click', function(){
var row = $(this).closest('tr')
rowId = $(row).attr("data-id");
})
},
features: [
{
name: "Updating",
enableAddRow: true,
editMode: "none",
enableDeleteRow: false,
rowDeleting: function (e, args)
{
alert(1);
},
rowDeleted: function (e, args){
alert(2);
},
columnSettings: [
{ columnKey: "MakeFlag", editorOptions: { type: "bool", readOnly: false, disabled: false} },
{ columnKey: "Id", editorOptions: { type: "numeric", readOnly: true, disabled: true} },
{ columnKey: "Name", editorOptions: { type: "bool", readOnly: true, disabled: true} },
{ columnKey: "ProductNumber", editorOptions: { type: "bool", readOnly: true, disabled: true} }
]
}]
});
});
function bind(){
$("#gridUpdating").igGrid("option", "dataSource", ds);
$("#gridUpdating").igGrid("dataBind");
}
</script>
</head>
<body>
<table id="gridUpdating"></table>
<input type="button" value="BIND" onclick="bind();" />
</body>
</html>
I found after a while that my problem was in the proxy service which I use to consume my server code, it html-encoded every special character, for example for "< b r / >" I was receiving "& l t ; b r / & g t ;", so I had only to replace it with "< b r / >" before binding...
My code seems to only work when I have the alert("document loaded"). If I remove it, it does not work anymore. It supposed to setFocus on a particular field.
What could be the problem, is the alert("document loaded") giving the code time to execute before it fires off the rest?
<style type='text/css'>
/* T */
.comboItemContainer {
width: auto;
font-family: "Courier New", Courier, monospace;
}
.colOne {
border-right: 1px dashed gray;
float: left;
width: 100px;
}
.colTwo_NoDash {
float: left;
padding-left: 5px;
width: 350px;
}
</style>
<input type="text" name="test" id="test1" /><br /><br />
<div id="comboready"></div>
<div id="comboload"></div>
<div id="comboOrderTypes"></div>
<script>
$(document).ready(function () {
var data = [
{ "ID": 1, "Name": "John Smith", "Age": 45 },
{ "ID": 2, "Name": "Mary Johnson", "Age": 32 },
{ "ID": 3, "Name": "Bob Ferguson", "Age": 27 }
];
$("#comboready").igCombo({
dataSource: data, //JSON Array defined above
valueKey: "ID",
textKey: "Name",
itemTemplate: "<div class='comboItemContainer'><div class='colOne'>${ID}</div><div class='colTwo_NoDash'>${Name}</div></div>"
});
var data = [
{ "ID": 1, "Name": "John S", "Age": 45 },
{ "ID": 2, "Name": "Mary J", "Age": 32 },
{ "ID": 3, "Name": "Bob F", "Age": 27 }
];
$("#comboload").igCombo({
dataSource: data, //JSON Array defined above
valueKey: "ID",
textKey: "Name",
itemTemplate: "<div class='comboItemContainer'><div class='colOne'>${ID}</div><div class='colTwo_NoDash'>${Name}</div></div>"
});
// OrderType Combobox - On Page Load
$.get("../order/Json_OrderTypes", function (data) {
//Get
$("#comboOrderTypes").igCombo({
dataSource: data,
valueKey: "Order_Type",
textKey: "Order_Type",
width: "100px",
dropDownWidth: 500,
itemTemplate: "<div class='comboItemContainer'><div class='colOne'>${Order_Type}</div><div class='colTwo_NoDash'>${Description}</div></div>"
});
}, "json");
alert("document loaded");
});
$(window).load(function () {
$("#comboOrderTypes").igCombo("setFocus");
alert("window loaded");
});
</script>
The plugin is not initialized till the ajax request is completed... so do the setFocus call inside the ajax success callback.
$(document).ready(function () {
var data = [{
"ID": 1,
"Name": "John Smith",
"Age": 45
}, {
"ID": 2,
"Name": "Mary Johnson",
"Age": 32
}, {
"ID": 3,
"Name": "Bob Ferguson",
"Age": 27
}];
$("#comboready").igCombo({
dataSource: data, //JSON Array defined above
valueKey: "ID",
textKey: "Name",
itemTemplate: "<div class='comboItemContainer'><div class='colOne'>${ID}</div><div class='colTwo_NoDash'>${Name}</div></div>"
});
var data = [{
"ID": 1,
"Name": "John S",
"Age": 45
}, {
"ID": 2,
"Name": "Mary J",
"Age": 32
}, {
"ID": 3,
"Name": "Bob F",
"Age": 27
}];
$("#comboload").igCombo({
dataSource: data, //JSON Array defined above
valueKey: "ID",
textKey: "Name",
itemTemplate: "<div class='comboItemContainer'><div class='colOne'>${ID}</div><div class='colTwo_NoDash'>${Name}</div></div>"
});
// OrderType Combobox - On Page Load
$.get("../order/Json_OrderTypes", function (data) {
//Get
$("#comboOrderTypes").igCombo({
dataSource: data,
// selectedItems: [{ index: 5 }, { text: "S" }],
valueKey: "Order_Type",
textKey: "Order_Type",
width: "100px",
dropDownWidth: 500,
itemTemplate: "<div class='comboItemContainer'><div class='colOne'>${Order_Type}</div><div class='colTwo_NoDash'>${Description}</div></div>"
});
//the window load event is not really needed,use it only if you need it for some other purpose
$(window).load(function () {
$("#comboOrderTypes").igCombo("setFocus");
});
}, "json");
});
use as
setTimeout(function(){$("#comboOrderTypes").igCombo("setFocus");},0);