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);
Related
So i'm using js-grid to populate a generic grid. I have 4 visible columns and 1 hidden id column. I am trying to pass the unique id per row into another function. However, when I dive into the property path of a object return by using jquery. The key that I need to get to is nested in a key that seems to change every time i return the object.
Here's the JS grid code...
$("#jsGrid").jsGrid({
width: "100%",
height: "25rem",
autoload: true,
inserting: false,
editing: false,
sorting: false,
paging: true,
pageloading: true,
data: data,
fields: [
{ name: "ID", type: "text", width: 25, align: "center", visible: false },
{ name: "Date", type: "text", width: 25, align: "center" },
{ name: "Color", type: "text", width: 25, align: "center" },
{ name: "type", type: "text", width: 25, align: "center" },
{ name: "other", type: "text", width: 25, align: "center" }
]
});
Here's some sample data...
var data = [
{ "ID": "123", "Date": "3/15/19", "color": "Brown", "type": "something", "other": "7 mins" },
{ "ID": "124", "Date": "3/15/19", "color": "Red", "type": "something", "other": "15 mins" },
{ "ID": "125", "Date": "3/15/19", "color": "Blue", "type": "something", "other": "15 mins" },
{ "ID": "126", "Date": "3/15/19", "color": "Blue", "type": "something", "other": "7 mins" },
{ "ID": "127", "Date": "3/15/19", "color": "Black", "type": "something", "other": "20 mins" },
{ "ID": "128", "Date": "3/15/19", "color": "Gold", "type": "something", "other": "5 mins" },
{ "Date": "TOTAL", "color": "", "type": "", "other": "74 mins"}
];
Here's the code I use to get the <tr> object using console
$(".jsgrid-table > tbody > tr:not('[class*=totalsRow]')");
Here's what I see. The key/keys that changes are in the attached image and starts with the word jQuery.
So i have tried your code. Based on what you have given me, i had to write custom method to achieve it.
var k = $('.jsgrid-table > tbody > tr');
Items = GetMatchingProperties(k, 'jQuery'); //'jQuery' This is the word that matches
console.log(Items);
function GetMatchingProperties(items, attribName) {
var list = [];
$(items).each(function(i, t) {
var $t = $(t);
var keys = Object.keys($t[0]);
var JQueryKey = keys.filter(function(x){
if(x.match(attribName)){
return x;
}
});
$.each(JQueryKey, function(i, v){
list.push( $t[0][v] );
});
});
return list;
}
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.
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 creating Bootstrap table using JSON values. I can add class dynamically to row. But i cant add ID to row when creating dynamically bootstrap table. Please find my code,
HTML:
<table id="eventsTable" data-checkbox="true" data-sortable="true" data-row-style="rowStyle"></table>
JS:
$.ajax({
type: "POST",
url: "apilist",
data: "",
success: function (response) {
if (response != null) {
var data = [];
$.each(response.Slip, function (index) {
var obj = {};
obj.SlipID = response.Slip[index].SlipID;
obj.Client = response.Slip[index].Client;
data.push(obj);
});
$('#eventsTable').bootstrapTable({
columns: [
{ field: "state", checkbox: true },
{ field: "SlipID", title: 'SlipID', sortable: true, class : "hide" },
{ field: "Client", title: 'Client', sortable: true },
],
data: data,
});
}
}
});
Please let me know the suggestions,
Thanks.
For this you can use rowAttributes for row attributes and rowStyle for row styling.
Here is below CODE SNIPPET you can check.
I hope this will help/guid you or achieve your requirement.
var data = [{
"name": "Bahrain",
"code": "BH"
}, {
"name": "Burundi",
"code": "BI"
}, {
"name": "Benin",
"code": "BJ"
}, {
"name": "Bhutan",
"code": "BT"
}, {
"name": "Jamaica",
"code": "JM"
}, {
"name": "Bouvet Island",
"code": "BV"
}, {
"name": "Botswana",
"code": "BW"
}, {
"name": "Samoa",
"code": "WS"
}, {
"name": "Bonaire, Saint Eustatius and Saba ",
"code": "BQ"
}, {
"name": "Brazil",
"code": "BR"
}];
$('#eventsTable').bootstrapTable({
columns: [{
title: "Conutry Code",
field: 'code',
sortable: true
}, {
title: "Conutry name",
field: 'name',
sortable: true
}],
data: data,
rowStyle: function(row, index) {
return {
classes: `row-border ${index%2==1?'row-even':'row-odd'}`
};
},
rowAttributes: function(row, index) {
return {
id: `x-bootstrap-row-${index+1}`
};
}
});
.row-border{
border-bottom: 1px solid #ccc;
}
.row-odd{
background-color: wheat;
}
.row-even{
background-color: whitesmoke;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<table id="eventsTable" data-checkbox="true" data-sortable="true" data-row-style="rowStyle"></table>
How can I populate Kendo UI grid with nested JSON.
I mean my JSON is like
var myJson:
[{"oneType":[
{"id":1,"name":"John Doe"},
{"id":2,"name":"Don Joeh"}
]},
{"othertype":"working"},
{"otherstuff":"xyz"}]
}];
and I want Kendo UI Grid with columns as Id, Name, OtherType and OtherStuff.
Thanks in advance.!
For complex JSON structures, you might use schema.parse
var grid = $("#grid").kendoGrid({
dataSource : {
data : [
{
"oneType": [
{"id": 1, "name": "John Doe"},
{"id": 2, "name": "Don Joeh"}
]
},
{"othertype": "working"},
{"otherstuff": "xyz"}
],
pageSize: 10,
schema : {
parse : function(d) {
for (var i = 0; i < d.length; i++) {
if (d[i].oneType) {
return d[i].oneType;
}
}
return [];
}
}
}
}).data("kendoGrid");
If you slightly change your JSON to:
{
"oneType" : [
{"id": 1, "name": "John Doe"},
{"id": 2, "name": "Don Joeh"}
],
"othertype" : "working",
"otherstuff": "xyz"
}
then you can use:
var grid = $("#grid").kendoGrid({
dataSource: {
data : {
"oneType" : [
{"id": 1, "name": "John Doe"},
{"id": 2, "name": "Don Joeh"}
],
"othertype" : "working",
"otherstuff": "xyz"
},
pageSize: 10,
schema : {
data: "oneType"
}
}
}).data("kendoGrid");
I just wanted to submit another answer based on OnaBai's.
http://jsfiddle.net/L6LwW/17/
The HTML:
<script id="message-template" type="text/x-kendo-template">
#for (var i = 0; i
< ddl.length; i++) {# <li><span>#=ddl[i].value#</li>
#}#
</script>
<div id="grid"></div>
The JS:
var grid = $("#grid").kendoGrid({
dataSource: {
data: [
[{
"id": 1,
"name": "John Doe",
"ddl": [{
"key": 1,
"value": "hello"
}, {
"key": 1,
"value": "hello"
}]
}, {
"id": 2,
"name": "Don Joeh",
"ddl": [{
"key": 1,
"value": "hello"
}, {
"key": 1,
"value": "hello"
}]
}]
],
pageSize: 10,
schema: {
parse: function(d) {
for (var i = 0; i < d.length; i++) {
if (d[i]) {
return d[i];
}
}
return [];
}
}
},
columns: [{
field: "id",
title: "ID"
}, {
field: "name",
title: "Name"
}, {
field: "ddl",
title: "DDL",
width: "180px",
template: kendo.template($("#message-template").html())
} //template: "#=ddl.value#" }
]
}).data("kendoGrid");