jQWidgets Forums
Forum Replies Created
-
Author
-
I have a strange behaviour in firefox. When i load a html file containing jqxgrid in a popup container and resize the columns, Scroll bar appears. But when i scroll table header and body moves differently. It works fine in chrome. Kindly provide me a solution.
Hello all,
How can i refresh the grid data without its column headers?
February 24, 2016 at 6:11 am in reply to: available parameters for renderer function available parameters for renderer function #81752Hello Dimitar,
Is there is any chance to pass the datafield as a parameter?
Hi Dimitar,
Yes i try to run your demo only. After including jqxdata.js also the error comes.
Hello Dimitar,
Thanks for the response.
I include jqxdata.js in my file. Below is my code.
<!DOCTYPE html>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”jqwidgets-ver3.9.1/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”jqwidgets-ver4.0.0/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3.9.1/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3.9.1/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3.9.1/jqwidgets/jqxdata.export.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3.9.1/jqwidgets/jqxgrid.export.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3.9.1/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3.9.1/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3.9.1/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3.9.1/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3.9.1/jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3.9.1/jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3.9.1/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3.9.1/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3.9.1/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3.9.1/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3.9.1/jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3.9.1/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3.9.1/demos/jqxgrid/generatedata.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3.9.1/jqwidgets/jqxgrid.sort.js”></script><script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var data = generatedata(10);
var source =
{
localdata: data,
datatype: “array”,
datafields:
[
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘available’, type: ‘bool’ },
{ name: ‘date’, type: ‘date’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ }
]
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 850,
autoheight: true,
source: dataAdapter,
altrows: true,
sortable: true,
selectionmode: ‘multiplecellsextended’,
columns: [
{ text: ‘First Name’, datafield: ‘firstname’, width: 120 },
{ text: ‘Last Name’, datafield: ‘lastname’, width: 120 },
{ text: ‘Product’, datafield: ‘productname’, width: 177 },
{ text: ‘Available’, datafield: ‘available’, columntype: ‘checkbox’, width: 67, cellsalign: ‘center’, align: ‘center’ },
{ text: ‘Ship Date’, datafield: ‘date’, width: 120, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘d’ },
{ text: ‘Quantity’, datafield: ‘quantity’, width: 70, align: ‘right’, cellsalign: ‘right’ },
{ text: ‘Price’, datafield: ‘price’, cellsalign: ‘right’, align: ‘right’, cellsformat: ‘c2’ }
]
});
$(“#print”).jqxButton();$(“#print”).click(function () {
var gridContent = $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘html’);
var newWindow = window.open(”, ”, ‘width=800, height=500’),
document = newWindow.document.open(),
pageContent =
‘<!DOCTYPE html>\n’ +
‘<html>\n’ +
‘<head>\n’ +
‘<meta charset=”utf-8″ />\n’ +
‘<title>jQWidgets Grid</title>\n’ +
‘</head>\n’ +
‘<body>\n’ + gridContent + ‘\n</body>\n</html>’;
document.write(pageContent);
document.close();
newWindow.print();
});
});</script>
</head>
<body class=’default’>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid”></div>
<div style=’margin-top: 20px;’>
<div style=’margin-left: 10px; float: left;’>
<input type=”button” value=”Print” id=’print’ />
</div>
</div>
</div>
</html>Hello Peter,
Could you please provide me a solution in above topic.
Thanks in advance.
February 2, 2016 at 11:13 am in reply to: set column width using functions. set column width using functions. #81017Hi Dimitar,
Thank you very much for the quick response and the solution you provided me matches my requirement.
February 2, 2016 at 9:30 am in reply to: set column width using functions. set column width using functions. #81006Hello Dimitar,
In the above example you set the table width through function. But i need the column width to be set using function.
In the below example i write how i need to use the function.
$(“#jqxgrid”).jqxGrid({
width: myWidth(2),
theme: ‘energyblue’,
height: 300,
source: adapter,
sortable: true,
columns: [{
text: ‘First Name’,
datafield: ‘firstname’,
width: myWidth(2)
}, {
text: ‘Last Name’,
datafield: ‘lastname’,
width: myWidth(2)
}, {
text: ‘Product’,
datafield: ‘productname’,
width: myWidth(2)
}]
});January 28, 2016 at 9:10 am in reply to: User defined row id in jqxgrid User defined row id in jqxgrid #80880Hi Peter,
Thanks for your immediate Reply.
I have one more doubt, is it possible to add a class or an attribute to a row id.
Example: <div role=”row” style=”position: relative; height:25px;” id=”row0jqxgrid” class=”myClass” attr =”Myattr_1″></div>
Thanks in advance.
-
AuthorPosts