I cannot get my data to show in jqgrid. I am using exactly the same code from this working example:
jqgrid won't load json data
My data is different, but not substantially so:
{"records":95,"page":1,"total":1,"rows":[{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"}]}
I hate to re-open the same issue, but this is very frustrating to me.
EDIT: Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InfoMaker Monitor</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/css/ui.jqgrid.css" />
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
//<!CDATA[
jQuery(function () {
'use strict';
jQuery("#jsonmap").jqGrid({
url: 'http://localhost:8888/nancy/readasjson'
,datatype: 'json'
,ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }
// see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data
,jsonReader : {
page: "page"
, total: "total"
, records: "records"
, rows: "rows"
,cell: "cell"
,id: "id",
}
,colNames: ['Report','File']
,colModel :[
{name:'Report' ,index:'Report', width:55}
,{name:'File',index:'File', width:55}
]
,rowNum:10
,rowList:[10,20,30]
,viewrecords: true
,loadComplete: function() {
console.log("Load Complete");
//console.log("URI: " + jQuery("#jsonmap").jqGrid.datatype );
}
,loadError: function(xhr,st,err) {
console.log(xhr.statusText);
//$("#jsonmapMessage").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);
}
,width: '900'
,height: 'auto'//'300'
,caption: 'My first grid'
});
jQuery("#jsonmap").jqGrid('navGrid','#pjmap',{edit:true,add:false,del:false});
});
//]]>
</script>
</head>
<body>
<table id="jsonmap"><tr><td></td></tr></table>
<div id="pjmap"></div>
</body>
</html>
And here is how the data looks now:
{"records":10,"page":1,"total":1,"rows":[{"id":61,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":62,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":63,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":64,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":65,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":68,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":77,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":79,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":80,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":81,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}}]}
I am tempted to fork the jqgrid source and add some console.log messages to it! Because failing mysteriously with no message is a great barrier to adoption.
The JSON data which you use has another format as in the referenced question, so jqGrid is, of cause, not able to read your data. jsonReader option describes the format of input data for jqGrig. If rows array contains object with named properties one should use jsonReader: {repeatitems: false}. In the case the colModel parameter should have columns with name: "Report" and name: "File".
The next problem of your JSON data - it has no id information for items of the rows. In the case jqGrid will use integer values 1, 2, 3... as rowids. Such automatical generation of ids will work good only for one grid per page. The second grid will have id duplicates. So it's recommended to include additional property id in every item of the array rows of the JSON input.
Related
How can I programmatically add textbox controls at run time with Asp.net core using kendo UI?
( I don't want use kendo grid )
Not sure what you really want(your post strongly lacks of information), but I think you might try templates:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<script id="textbox-template" type="text/x-kendo-template">
<input type="text" name="#= data.Name #" value="#= data.Value #">
</script>
<style type="text/css">
#fields-container input {
display: block
}
</style>
</head>
<body>
<div id="fields-container"></div>
<button>Add textbox</button>
<script>
let getValues = function getValues() {
return {
Name: "User[" + $('input').length + "]",
Value: "John Doe"
};
};
$('button').on('click', function() {
let template = kendo.template($('#textbox-template').html()),
dataValue = getValues(),
templateValue = template(dataValue);
$('#fields-container').append(templateValue);
});
</script>
</body>
</html>
Demo
As you said you don't want to use grid, I imagine that you want something like kendo does in grid that is to use templates in background. You can use a template alone without any widget at all. With the snippet above you can request data form server with ajax(in the getValues() function precisely) or grab the data from other sources.
I am new with using the Kendo data source and so far it is not working. My page is extremely simple.
<head>
<meta name="viewport" content="width=device-width" />
<title>View Quote Lists</title>
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<link href="/styles/kendo.common.min.css" rel="stylesheet" />
<link href="/styles/kendo.default.min.css" rel="stylesheet" />
<link href="/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
</head>
<body>
<div>
</div>
<script src="/Scripts/jquery-2.1.3.min.js"></script>
<script src="/Scripts/kendo.all.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script>
var query = "3";
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/QuoteAPI?page=1",
dataType: "json"
},
requestEnd: function() {
console.log(JSON.stringify(dataSource.data()))
}
}
});
dataSource.read();
</script>
</body>
The server data set that is returned from the service is an object that looks like:
{
{"QuoteCount":13393,"CurrentPage":1,"Quotes":[{"QuoteID":"B0339420-52C1-4762-8F41-474BE601E872","QuoteNo":"00014857","QuoteDate":"2015.03.09","netgainID":"5BDF1655-CB35-4326-80E3-6DCA0CC00C8B","Qty":1.0,"SKU":"CC1512570","Product":"WELDMNT,ANTLER FRAME ","Price":186.66,"Customer":"Grady Health Systems","repID":"{CA7A9606-8EAB-447E-934E-C52B4D8E06C6}","Rep":"Kirkland, Travis"},{"QuoteID":"B0339420-52C1-4762-8F41-474BE601E872","QuoteNo":"00014857","QuoteDate":"2015.03.09","netgainID":"8DBF5603-DAED-4DF8-89FD-1A172CA3589E","Qty":4.0,"SKU":"CC0900265","Product":"FRONT FLOOR PLATE (PR) 175 KIT","Price":28.95,"Customer":"Grady Health Systems","repID":"{CA7A9606-8EAB-447E-934E-C52B4D8E06C6}","Rep":"Kirkland, Travis"}......]
When I load the page is calls the web service and returns the data which I can see using Google tools. However the line dataSource.read() gives an error
Uncaught TypeError: undefined is not a function kendo.all.min.js:11
The requestEnd function is never called so I can't see the data even though it has been called.
Can someone tell me why this is not working. I have tried every variation of the docs that seem appropriate but this refuses to work.
Thanks,
Terry
Can you move requestEnd out side of transport block and try? If it doesn't help create a Kendo Dojo to replicate the problem so that it's easier to fix it there.
Here is a dojo with similar code that is working, except that I am using jsonp.
I am using jqGrid 4.6.0.
Implemented Column chooser feature using the below code.
I am using
jquery-ui-1.11.1.js
jquery.multi-select.js
jquery-ui.css
multi-select.css
$.extend($.ui.multiselect, {
locale: {
addAll: 'Make all visible',
removeAll: 'Hidde All',
itemsCount: 'Avlialble Columns'
}
});
$.extend(true, $.jgrid.col, {
width: 500,
msel_opts: { dividerLocation: 0.5 }
});
$grid.jqGrid('navButtonAdd', "#p" + $grid.attr("id"), {
caption: "",
buttonicon: "ui-icon-calculator",
title: "Choose columns",
onClickButton: function () {
$(this).jqGrid('columnChooser',
{
width: 260,
height: 280,
classname: "column-chooser",
msel_opts: { //multiselect options
autoOpen: true,
header: true,
height: "auto",
classes: "column-chooser",
beforeclose: function () { return false; } //keep multiselect drop down open
}
});
}
});
The column chooser popup is showing up without available columns and make all columns visible options..
It just has one option available i.e., select columns..
Can somebody help..
thanks in advance...
It's very suspected where you get jquery.multi-select.js and multi-select.css. I suppose that you get wrong files. jqGrid which you downloads from trirand contains plugins subdirectory with ui.multiselect.js and ui.multiselect.css. So the typical contain of <head> of the page where you use jqGrid with columnChooser could be the following
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css"
href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"/>
<link rel="stylesheet" type="text/css"
href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.css" />
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.js"></script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
I posted the bug report recently where I described some small steps to make "Remove all" and "Add all" working in case of usage the last versions of jQuery and jQuery UI. The modified versions of ui.multiselect.js and jquery.jqGrid.src.js you can download from here and here.
The demo can be used as prototype for the usage of columnChooser.
I was using a different Multiselect js and css files..
I downloaded the JQGRID 4.6.0 package.. it gave me the ui.multiselect.css and ui.multiselect.js files.. i added them in my project..
now the column chooser popup is showing up with available columns and make all columns visible options.. thank you Oleg.
I am making an ajax call to a controler from a view like this
jQuery.ajax({
type: "POST",
url: "index.php?option=com_virtuemart&view=participate&task=participate_request&virtuemart_product_id=2&virtuemart_category_id=5&tmpl=component&Itemid=101",
data: { name: "John", location: "Boston" }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
and in the controler
I have a task method declared like this
public function participate_request(){
echo 'test';
return false;
}
And I get this response
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="el-gr" lang="el-gr" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="generator" content="Joomla! - Open Source Content Management" />
<title>offer_e_shop_1</title>
<link rel="stylesheet" href="/offer_e_shop_1/components/com_virtuemart/assets//css/facebox.css" type="text/css" />
<link rel="stylesheet" href="/offer_e_shop_1/components/com_virtuemart/assets//css/vmsite-ltr.css" type="text/css" />
<script src="/offer_e_shop_1/components/com_virtuemart/assets/js/jquery.min.js" type="text/javascript"></script>
<script src="/offer_e_shop_1/components/com_virtuemart/assets//js/jquery.noConflict.js" type="text/javascript"></script>
<script src="/offer_e_shop_1/components/com_virtuemart/assets//js/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<script src="/offer_e_shop_1/components/com_virtuemart/assets//js/jquery-ui-sliderAccess.js" type="text/javascript"></script>
<script src="/offer_e_shop_1/components/com_virtuemart/assets//js/vmsite.js" type="text/javascript"></script>
<script src="/offer_e_shop_1/components/com_virtuemart/assets//js/facebox.js" type="text/javascript"></script>
<script src="/offer_e_shop_1/components/com_virtuemart/assets//js/vmprices.js" type="text/javascript"></script>
<script type="text/javascript">
vmSiteurl = 'http://localhost/offer_e_shop_1/' ;
vmLang = ""
vmCartText = ' was added to your cart.' ;
vmCartError = 'There was an error while updating your cart.' ;
loadingImage = '/offer_e_shop_1/components/com_virtuemart/assets/images/facebox/loading.gif' ;
closeImage = '/offer_e_shop_1/components/com_virtuemart/assets/images/facebox/closelabel.png' ;
Virtuemart.addtocart_popup = '0' ;
faceboxHtml = '<div id="facebox" style="display:none;"><div class="popup"><div class="content"></div> </div></div>' ;
</script>
<link rel="stylesheet" href="/offer_e_shop_1/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/offer_e_shop_1/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/offer_e_shop_1/templates/mov_jean_cc_offer_e_shop_2/css/print.css" type="text/css" />
</head>
<body class="contentpane">
<div id="system-message-container">
</div>
test
</body>
</html>
How can I return only the test value alone?
You can use Jexit(),exit() or add &format=raw in url string or use given code in controller function:
$app = &JFactory::getApplication();
$app->close()
echo all your output text and just place a die(); after that
You just have to add Jexit() at the end of your task & you will get rid of full html. You can use die() as well but why if there is Jexit().
function edit()
{
// Your code
Jexit();
}
found it.. in the end of the url string.. you need to attach &format=raw
So the request will be
jQuery.ajax({
type: "POST",
url: "index.php?option=com_virtuemart&view=participate&task=participate_request&virtuemart_product_id=2&virtuemart_category_id=5&tmpl=component&Itemid=101&format=raw",
data: { name: "John", location: "Boston" }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
! so easy after all.
Good day.
I try to use jqGrid in my web project.
everything is good but one moment.
I want to enable filterToolbar but I can't.
I used lot of documentation and examples without good result.
data in grid is good
sorting is good
PROBLEM: filterPanel is invisible
Version: jqGrid 4.3.1 - jQuery Grid
Browser: Chrome and Internet Explorer
Please have a look on my code.
Thanks a lot.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.8.18.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
<table id="listU05"></table>
<div id="pager"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#listU05").jqGrid({
url:'u05json.json',
datatype: 'json',
mtype: 'POST',
colNames:[
'thema'
],
colModel :[
{name:'Thema', index:'Thema', width:55}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'Thema',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'My first grid11',
width:200
});
});
jQuery("#listU05").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false, defaultSearch : "cn"});
</script>
</body>
I think the problem is that you placed call of filterToolbar outside of the $(document).ready event handler $(document).ready(function(){...});. As the result the filterToolbar will be called before the grid created. Moving the call of filterToolbar at the end of $(document).ready event handler should solve the problem.
Moreover you should include !DOCTYPE declaration before <html>. For example it can be <!DOCTYPE html> or <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.