Hi i have the following trirand jqgrid (4.6) loaded with values
as you can see there is grouped Column header with textbox. the following code should respond to mouse click event on the text box and display an alert but it does not and why it displays the string {this.state.TextDate} instead of its value?
here is my code :
var DEMOCOMPONENT = React.createClass({
getInitialState:function(){
return{
TextDate:''
}
},
componentDidMount:function(){
this.getData();
},
showDTPicker:function(){
alert('date picker hit');
},
setTextDate:function(){
var newV = ReactDOM.findDOMNode(this.refs.reftxt).value;
this.setState({TextDate:newV},function(){
});
},
render: function () {
return (<div><table id="list4"></table><div id="plist483"></div></div>)
},
getData:function(){
jQuery("#list4").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",
rowNum:10,
width:700,
rowList:[10,20,30],
pager: '#plist483',
sortname: 'invdate',
height: '100%'
});
//setting groupcolumn headers
jQuery("#list4").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders:[
{startColumnName: 'amount',
numberOfColumns: 3,
titleText: '<span><div style="text-align: left"><input type="text" id="txt" style="width: 50%" ref="reftxt" onClick={this.showDTPicker} onChange={this.setTextDate} value={this.state.TextDate} />'
},
{startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'}
]});
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("#list4").jqGrid('addRowData',i+1,mydata[i]);
}
});
ReactDOM.render(<DEMOCOMPONENT />,document.getElementById('divdemo'));
Here is my HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
<!--<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.css" />-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" />
</head>
<body>
<div id="divdemo">
</div>
<script src="react-15.0.0.js"></script>
<script src="react-dom-15.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://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="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script type="text/babel" src="demo.js"></script>
</body>
</html>
Give editable option in jq Grid Column properties as true ,eg
name : 'ABC',
index : 'ABC',
align : "center",
formatter : 'select',
edittype : 'select',
width : 174,
**editable : true,**
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>
My objective is to create a simple component using EXTJS 6 (grid for example) and show it in an HTML div, but I do not know which resources I need for that. This is my code:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict- thymeleaf-spring3-3.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" th:href="#{/js/ext-6/classic/theme-triton/resources/theme-triton-all.css}" />
<link rel="stylesheet" type="text/css" th:href="#{/js/ext-6/packages/charts/classic/triton/resources/charts-all.css}" />
<link rel="stylesheet" type="text/css" th:href="#{/js/ext-6/packages/ux/classic/triton/resources/ux-all.css}" />
<script type="text/javascript" th:src="#{/js/ext-6/ext-all.js}" src="../../../js/ext-6/ext-all.js" > </script>
<script type="text/javascript" th:src="#{/js/ext-6/classic/theme-triton/theme-triton.js}" src="../../../js/ext-6/classic/theme-triton/theme-triton.js"></script>
<script type="text/javascript" th:src="#{/js/ext-6/packages/charts/classic/charts.js}" src="../../../js/ext-6/packages/charts/classic/charts.js"></script>
<script type="text/javascript" th:src="#{/js/ext-6/packages/ux/classic/ux.js}" src="../../../js/ext-6/packages/ux/classic/ux.js"></script>
<title>Ext6 </title>
</head>
<body>
<script th:inline="javascript">
/*<![CDATA[*/
Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" }
]
});
Ext.create('Ext.grid.Grid', {
title: 'Simpsons',
renderTo : Ext.get("grid"),
store: store,
columns: [
{ text: 'Name', dataIndex: 'name', width: 200 },
{ text: 'Email', dataIndex: 'email', width: 250 },
{ text: 'Phone', dataIndex: 'phone', width: 120 }
],
height: 200,
layout: 'fit',
fullscreen: true
});
});
/*]]>*/
</script>
<div id="grid">
</div>
</body>
</html>
This simple example will help me to upgrade my old application created by Extjs 4.
Ext.grid.Grid is not a valid class in ExtJS. The correct class for a grid is Ext.grid.Panel.
Try the following:
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
renderTo : Ext.get("grid"),
store: store,
columns: [
{ text: 'Name', dataIndex: 'name', width: 200 },
{ text: 'Email', dataIndex: 'email', width: 250 },
{ text: 'Phone', dataIndex: 'phone', width: 120 }
],
height: 200,
layout: 'fit',
fullscreen: true
});
Does it work now?
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>
My jqGrid works fine, loads data properly. Even sorting and pagination are working fine.
But, when filterToolBar is used to search data, it doesn't search any data...just keeps showing 'Loading...'.
Below are script taggings included in HEAD part:
<script src="~/Scripts/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="~/Scripts/js/src/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="~/Scripts/js/jquery.jqGrid.min.js" type="text/javascript"></script>
HTML:
<table id="jqGrid" ></table>
<div id="pager"></div>
<script type="text/javascript">
$("#jqGrid").jqGrid({
url: "GetData.asmx/LoadData",
datatype: "xml",
xmlReader: {
repeatitems: false,
root: "Rowset",
row: "Row"
},
colNames: ["Id","Contact Name", "City", "Country"],
colModel: [
{ name: 'id', index: 'id', width: 40, stype: 'text',sortable:true },
{ name: "ContactName", index: "ContactName", sortable: true, width: 300, search: true, stype: 'text' },
{ name: "City", index: "City", sortable: true, width: 300, search: true, stype: 'text' },
{ name: "Country", index: "Country", sortable: true, width: 300, search: true, stype: 'text' }
],
rowNum: 10,
rowList: [10, 20, 50, 100],
pager: "#pager",
gridview: true,
rownumbers: true,
viewrecords: true,
height: "auto",
loadonce: true,
sortorder: "desc",
caption: "List of Employees",
ignoreCase: true
}).jqGrid("filterToolbar", { searchOnEnter: false, stringResult: true, defaultSearch: "cn" });
</script>
Please look into this code and guide me, where it is getting wrong.
Thanks in advance,
Dipti Sheth
UPDATED:
Following is the xml response:
<Rowsets DateCreated="2013-05-02T09:18:07" EndDate="2013-05-02T09:18:07" StartDate="2013-05-02T08:18:07" Version="12.0.6 Build(13)">
<Rowset>
<Columns>
<Column Description="Id" MaxRange="1" MinRange="0" Name="Id" SQLDataType="12" SourceColumn="Id"/>
<Column Description="ContactName" MaxRange="1" MinRange="0" Name="ContactName" SQLDataType="12" SourceColumn="ContactName"/>
<Column Description="City" MaxRange="1" MinRange="0" Name="City" SQLDataType="12" SourceColumn="City"/>
<Column Description="Country" MaxRange="1" MinRange="0" Name="Country" SQLDataType="12" SourceColumn="Country"/>
</Columns>
<Row>
<id>1</id>
<ContactName>Maria Anders</ContactName>
<City>Berlin</City>
<Country>Germany</Country>
</Row>
<Row>
<id>2</id>
<ContactName>Ana Trujillo</ContactName>
<City>México D.F.</City>
<Country>Mexico</Country>
</Row>
<Row>
<id>3</id>
<ContactName>Antonio Moreno</ContactName>
<City>México D.F.</City>
<Country>Mexico</Country>
</Row>
<Row>
<id>4</id>
<ContactName>Thomas Hardy</ContactName>
<City>London</City>
<Country>UK</Country>
</Row>
<Row>
<id>5</id>
<ContactName>Christina Berglund</ContactName>
<City>Luleå</City>
<Country>Sweden</Country>
</Row>
<Row>
<id>6</id>
<ContactName>Hanna Moos</ContactName>
<City>Mannheim</City>
<Country>Germany</Country>
</Row>
</Rowset>
</Rowsets>
RESPONSE HEADER: in Network tab of debugger of Chrome
Cache-Control:private, max-age=0
Content-Encoding:gzip
Content-Length:636
Content-Type:text/xml; charset=utf-8
Date:Wed, 09 Jul 2014 12:34:15 GMT
Server:Microsoft-IIS/8.0
Vary:Accept-Encoding
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?QzpcUHJvamVjdHNcanFHcmlkU2FtcGxlXGpxR3JpZFNhbXBsZVxHZXREYXRhLmFzbXhcTG9hZERhdGE=?=
ConsoleSearchEmulationRendering
Thanks,
Dipti Sheth
EDITED:
_Layout.cshtml page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link href="~/Scripts/jquery-ui-1.11.0.custom/jquery-ui.theme.css" rel="stylesheet" media="screen" type="text/css" />
<link href="~/Content/ui.jqgrid.css" rel="stylesheet" media="screen" type="text/css" />
<style>
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script src="~/Scripts/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.11.0.custom/jquery-ui.min.js" type="text/javascript"></script>
<script src="~/Scripts/js/src/i18n/grid.locale-en.js" type="text/javascript"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script src="~/Scripts/js/jquery.jqGrid.src.js" type="text/javascript"></script>
</head>
<body>
<div class="container body-content">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Index.cshtml page:
#{
ViewBag.Title = "Home Page";
}
<table id="jqGrid" ></table>
<div id="pager"></div>
<script type="text/javascript">
//<![CDATA[
/*global $ */
/*jslint browser: true */
// $(function () {
// "use strict";
$("#jqGrid").jqGrid({
url: "GetData.asmx/GetData/LoadData",
datatype: "xml",
xmlReader: {
repeatitems: false,
root: "Rowset",
row: "Row"
},
colNames: ["Id","Contact Name", "City", "Country"],
colModel: [
{ name: 'id', index: 'id', width: 40, stype: 'text',sortable:true },
{ name: "ContactName", index: "ContactName", sortable: true, width: 300, search: true, stype: 'text' },
{ name: "City", index: "City", sortable: true, width: 300, search: true, stype: 'text' },
{ name: "Country", index: "Country", sortable: true, width: 300, search: true, stype: 'text' }
],
rowNum: 10,
rowList: [10, 20, 50, 100],
pager: "#pager",
gridview: true,
rownumbers: true,
viewrecords: true,
height: "auto",
loadonce: true,
sortorder: "desc",
caption: "List of Employees",
ignoreCase: true
}).jqGrid("filterToolbar", { searchOnEnter: false, stringResult: true, defaultSearch: "cn" });
// });
//]]>
</script>
It shows blank page if $(function () {}) is there. If I comment this part, then it shows grid and data on the web-page. But still, toolbar searching does not work.
Please guide me where it's going wrong.
Probably you included jQuery JavaScripts files twice. At the first time you include there in <head> by
<script src="~/Scripts/jquery-ui-1.11.0.custom/jquery-ui.min.js"
type="text/javascript"></script>
<script src="~/Scripts/js/src/i18n/grid.locale-en.js"
type="text/javascript"></script>
later you placed JavaScripts files of jqGrid and other. The problem is that you use
#Scripts.Render("~/bundles/jquery")
near to the end of <body>. The second including of jQuery definitions can overwrite some previously set extensions of jQuery or reset / overwrite some previously initialized internal structures of jQuery.
The simple rule is: you have to include every JavaScript file only once on every HTML page.
Additionally I personally prefer to place JavaScript code inside of <head>. In the case you should place the code which creates the grid inside of $(function () {/*here*/});
The following html file don't give any output. all the scripts and css files referred here are valid. Please help me to troubelshoot this.
when it's loaded in browser, it gives only a blank page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.10.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.9.0.min.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>
<script type="text/javascript">
var mydata = [
{ id : "one", "name" : "row one" },
{ id : "two", "name" : "row two" },
{ id : "three", "name" : "row three" }
];
$("#grid").jqGrid({
data: mydata,
datatype: 'local',
width: 500,
colNames:['Id','Name'],
colModel:[
{name:'id', index:'id', key: true, width:50},
{name:'name', index:'name', width:100}
],
pager: '#pager',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption:"jqGrid Example"
});
</script>
</head>
<body>
<table id="grid"><tr><td></td></tr></table>
<div id="pager"></div>
</body>
</html>
You have to put $("#grid").jqGrid() inside document.ready().
<script>
$( document ).ready( function ( e )
{
var mydata = [
{ id : "one", "name" : "row one" },
{ id : "two", "name" : "row two" },
{ id : "three", "name" : "row three" }
];
$("#grid").jqGrid({
data: mydata,
datatype: 'local',
width: 500,
colNames:['Id','Name'],
colModel:[
{name:'id', index:'id', key: true, width:50},
{name:'name', index:'name', width:100}
],
pager: '#pager',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption:"jqGrid Example"
});
});
</script>
The reason is that <table id="grid"> is not yet created when the script executes. Move
$("#grid").jqGrid() into a script block before closing </body>.
Alternatively you can use jQuery to schedule the grid initialization after the page elements are initialized:
$(document).ready(function() { $("#grid").jqGrid(...) });