I have a very curious bug or error with JQuery with JqGrid. The error is when I try to show the data in JSON in the table, if you show me the data, if the table does not show more than 20 columns and have more than 200 data, the code is presented like this:
The Header is:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script type="text/ecmascript" src="jqGrid/js/i18n/grid.locale-en.js"></script>
<script type="text/ecmascript" src="jqGrid/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css" />
<!-- Continuacion de JqGrid-->
<!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- The link to the CSS that the grid needs -->
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid-bootstrap.css" />
The JS is:
<script>
$.jgrid.defaults.width = 780;
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<div style="margin-left:20px">
<table id="jqGrid4"></table>
<div id="jqGridPager4"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid4").jqGrid({
url: 'http://localhost/fileupload/api/Proveedor',
mtype: "GET",
styleUI : 'Bootstrap',
datatype: "JSON",
colModel: [
{ label: 'id', name: 'id', key: true, width: 75 },
{ label: 'Name', name: 'Name', width: 150 },
{ label: 'RFC', name: 'RFC', width: 150 },
{ label: 'Company Name', name: 'CompanyName', width: 150 },
{ label:'DateCreation', name: 'DateCreation', width: 150 }
],
viewrecords: true,
height: 250,
rowNum: 20,
pager: "#jqGridPager4",
sortable: true
});
});
</script>
In the image you can see that the table only shows 20 rows, but I have 207 rows. I need the arrows to move and show more rows, but I can't. Any ideas? I don't want to put rowNum: +20 or more because I don't like that, I need to move with the arrows but I can't.
Do you implemented server-side paging on the server or the server returnes all 207 rows at once and you want to use client-side paging? In the last case you should add loadonce: true option. 207 rows is not much and thus I would recommend you to use loadonce: true option in the scenario. You will don't need to write long code on the server side and can directly use sorting, paging and filtering/searching (see filterToolbar or advanced searching) of local data.
Related
I implemented this https://fancyproductdesigner.com/jquery/ which works fine. My query is when I the uploaded images on demo site it fix on the product's shape. For example, When I upload a logo on a cap the logo flexibly fixes on the shape of the cap. But in my integration, this is not working.
my code is:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fancy Product Designer</title>
<!-- Style sheets -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- The CSS for the plugin itself - required -->
<link rel="stylesheet" type="text/css" href="css/FancyProductDesigner-all.min.css" />
<!-- Include required jQuery files -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<!-- HTML5 canvas library - required -->
<script src="js/fabric.min.js" type="text/javascript"></script>
<!-- The plugin itself - required -->
<script src="js/FancyProductDesigner-all.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
var $yourDesigner = $('#clothing-designer'),
pluginOpts = {
productsJSON: 'json/products.json', //see JSON folder for products sorted in categories
designsJSON: 'json/designs.json', //see JSON folder for designs sorted in categories
stageWidth: 1200,
editorMode: false,
smartGuides: true,
fonts: [{
name: 'Helvetica'
}, {
name: 'Times New Roman'
}, {
name: 'Pacifico',
url: 'Enter_URL_To_Pacifico_TTF'
}, {
name: 'Arial'
}, {
name: 'Lobster',
url: 'google'
}],
customTextParameters: {
colors: false,
removable: true,
resizable: true,
draggable: true,
rotatable: true,
autoCenter: true,
boundingBox: "Base"
},
customImageParameters: {
draggable: true,
removable: true,
resizable: true,
rotatable: true,
colors: '#000',
autoCenter: true,
boundingBox: "Base"
},
actions: {
'top': ['download', 'print', 'snap', 'preview-lightbox'],
'right': ['magnify-glass', 'zoom', 'reset-product', 'qr-code', 'ruler'],
'bottom': ['undo', 'redo'],
'left': ['manage-layers', 'info', 'save', 'load']
}
},
yourDesigner = new FancyProductDesigner($yourDesigner, pluginOpts);
});
</script>
</head>
<body>
<div id="main-container">
<h3 id="clothing">Clothing Designer</h3>
<div id="clothing-designer" class="fpd-container fpd-shadow-2 fpd-topbar fpd-tabs fpd-tabs-side fpd-top-actions-centered fpd-bottom-actions-centered fpd-views-inside-left"> </div>
<br />
</div>
</body>
</html>
I have the following code, which work fine locally. Iwas trying to change the bootstrap theme to one of the jqgrid themes. I looked online for theme changing and it didnt seem to work .
Here is my code below and fiddle link:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The jQuery library is a prerequisite for all jqSuite products -->
<script type="text/ecmascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- We support more than 40 localizations -->
<script type="text/ecmascript" src="../js/i18n/grid.locale-en.js"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="../js/jquery.jqGrid.min.js"></script>
<!-- A link to a Boostrap and jqGrid Bootstrap CSS siles-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="../css/ui.jqgrid-bootstrap.css" />
<script>
$.jgrid.defaults.width = 780;
$.jgrid.defaults.responsive = true;
$.jgrid.defaults.styleUI = 'Bootstrap';
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<title>jLp data </title>
</head>
<body>
<div style="margin-left:20px">
<table id="nplGrid"></table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#nplGrid").jqGrid({
url: 'json/data-bcp.json',
datatype: "json",
colModel: [
{ label: 'Id', name: 'Id', width: 45 },
{ label: 'Symbol', name: 'Symbol', width: 90 },
{ label: 'Quantity', name: 'Quantity', width: 100 },
/*{ label: 'Value1',
name: 'Value1',
width: 80,
sorttype: 'number',
formatter: 'number',
align: 'right'
}, */
{ label: 'Price', name: 'Price', width: 80, sorttype: 'integer' },
{ label: 'Value', name: 'Value', width: 80, sorttype: 'integer' },
{ label: 'Pledged', name: 'Pledged', width: 80, sorttype: 'integer' }
],
loadonce: true,
viewrecords: true,
footerrow: true,
caption: "<b>Brokerage Client Portfolio</b>",
hidegrid:false,
userDataOnFooter: true, // use the userData parameter of the JSON response to display data on footer
height: 170,
altRows: true,
rowNum: 150
});
});
</script>
</body>
</html>
I am new to kendo ui mvvm and am facing the follow issue:
Scenario
I need to populate few fields in a div whose role is a listview, using the MVVM format.
The data comes from the dataSource and I am getting an unusual error. I am unable to bind the fields from the data source to the div.
Follow is my JSBin Sample: http://jsbin.com/ajoyug/6/edit
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="myListView" data-role="listView" data-bind="source:dataSource">
<span data-bind="text:prodName"></span>
<span data-bind="text:qty"></span>
<span data-bind="text:total"></span>
<span data-bind="text:price"></span>
</div>
</body>
</html>
JavaScript:
$(document).ready(function(){
var data = [
{
"Id":1,
"img":"../public/images/product/shoes.png",
"code":"00021543",
"fullProdName":"Jimmy Choo - Simone Pump Shoes",
"prodName":"Simone Pump Shoes",
"description":"A perfect Red carpet companion. Jimmy Choo shoes spells success and glamour. Be the talk of the town...",
"price":"1500.0",
"total":"1500.0",
"qty":"1",
"discount":"0.00",
"brand":"Jimmy Choo",
"category":"Shoes",
"points":"100",
"tax":"0.00" }
];
var dataSource = new kendo.data.DataSource({
data: data,
pagesize: 10,
schema: {
model: {
id: "Id",
fields: {
prodName: { editable: false},
qty: { editable: true},
price: { editable: false},
total : {editable :false}
}
}
}
});
dataSource.read();
var listViewModel = kendo.observable({
dataSource:dataSource
});
kendo.bind($("#myListView"), listViewModel);
});
Kindly help me out. I saw many samples available online, but they used templates to bind multiple values or they were'nt suiting my requirement..Hence I thought of creating my own JSBin Sample and ask where am I getting stuck...
Questions
How shall I bind the fields from a dataSource?
My end motive is to bind the div with the values in the dataSource..Is there any other method to do that if not setting it as a listview?
Thanks!!
Hardik
Your JavaScript looked good. You had some problems with your HTML though. The data-role attribute needs to be "listview". Rather than putting 4 spans inside your listview div, you should really use a template, and reference it by ID.
It's also important to note that your template must have a root element, because kendo only performs binding on the first element in the template.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<script id="tmp" type="text/x-kendo-template">
<div>
<span data-bind="text:prodName"></span><br/>
<span data-bind="text:qty"></span><br/>
<span data-bind="text:total"></span><br/>
<span data-bind="text:price"></span>
</div>
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div
id="myListView"
data-role="listview"
data-bind="source: dataSource"
data-template="tmp">
</div>
</body>
</html>
JavaScript:
$(document).ready(function(){
var data = [
{
"Id":1,
"img":"../public/images/product/shoes.png",
"code":"00021543",
"fullProdName":"Jimmy Choo - Simone Pump Shoes",
"prodName":"Simone Pump Shoes",
"description":"A perfect Red carpet companion. Jimmy Choo shoes spells success and glamour. Be the talk of the town...",
"price":"1500.0",
"total":"1500.0",
"qty":"1",
"discount":"0.00",
"brand":"Jimmy Choo",
"category":"Shoes",
"points":"100",
"tax":"0.00" }
];
var dataSource = new kendo.data.DataSource({
data: data,
pagesize: 10,
schema: {
model: {
id: "Id",
fields: {
prodName: { editable: false},
qty: { editable: true},
price: { editable: false},
total : {editable :false}
}
}
}
});
var listViewModel = kendo.observable({
dataSource:dataSource
});
kendo.bind($("#myListView"), listViewModel);
});
I'm trying to get jqGrid to work, for the first time. I've copied an example, almost verbatim, and here is my code:
<html>
<head>
<title>hi</title>
<script src="http://code.jquery.com/jquery-1.8.1.min.js" type="text/javascript"></script>
<link type="text/css" href="jquery-ui-bootstrap/css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery("#list2").jqGrid({
datatype: "local",
height: 250,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
multiselect: true,
caption: "Manipulating Array Data"
});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#list2").jqGrid('addRowData',i+1,mydata[i]);
</script>
</head>
<body>
hi
<table id="list2"></table>
<div id="pager2"></div>
</body>
</html>
I know that my .js paths are correct, because the javascript console is not throwing any errors. Also, my stylesheet (jquery-ui-bootstrap) does indeed exist in that directory. (When I view-source and then click on the link to that CSS file, chrome correctly navigates me to it.)
The page, however, is only displaying "hi". Help?
Your code is being executed before the table (#list2) is defined.
There are two easy ways to solve this, either of which will work:
Move the JavaScript code to just before the </body> tag.
Use jQuery's document.ready event to execute your code when the whole document has loaded.
I've follow this instruccion http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid
but my grid is not working. The DATA is only in my first page. And the navigation bar doesn't work and there is a message (UNDEFINED) in the grid.. PLEASE HELP ME I Did all the instruccion
you can see a screenshot here: http://reyes.hostei.com/screenshot.jpg
And this is my code source.
...
<link href="logica/scripts/jquery.jqGrid-3.6.2/css/redmond/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" />
<link href="logica/scripts/jquery.jqGrid-3.6.2/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<style>
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<!-- Of course we should load the jquery library -->
<script src="logica/scripts/jquery.jqGrid-3.5.3/js/jquery.js" type="text/javascript"></script>
<!-- Idioma de la libreria.. Antes de incluir esta -->
<script src="logica/scripts/jquery.jqGrid-3.5.3/js/i18n/grid.locale-en.js" type="text/x-javascript"></script>
<!-- and at end the jqGrid Java Script file -->
<script src="logica/scripts/jquery.jqGrid-3.5.3/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="logica/scripts/jquery.jqGrid-3.5.3/js/jqModal.js" type="text/javascript"></script>
<script src="logica/scripts/jquery.jqGrid-3.5.3/js/jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'server.php',
datatype: 'xml',
mtype: 'GET',
colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
colModel :[
{name:'invid', index:'invid', width:55},
{name:'invdate', index:'invdate', width:90},
{name:'amount', index:'amount', width:80, align:'right'},
{name:'tax', index:'tax', width:80, align:'right'},
{name:'total', index:'total', width:80, align:'right'},
{name:'note', index:'note', width:150, sortable:false}
],
pager: '#pager',
rowNum:7,
rowList:[10,20,30],
sortname: 'invid',
sortorder: 'desc',
viewrecords: true,
caption: 'EXAMPLE DON`T WORK'
});
});
</script>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
...
I NEED YOUR HELP!!!!!
If your path naming can be relied on, you seems to be using css for jqGrid 3.6.2 but the js is for jqGrid 3.5.3
And any specific reason to use text/x-javascript instead of text/javascript in that grid.locale-en.js line?
About the paging not working.., show us your server side paging code.., you need to page the data on the server side (based on the page number passed by jqGrid).