jQWidgets Forums
Forum Replies Created
-
Author
-
February 6, 2015 at 4:46 pm in reply to: change style on click legend change style on click legend #66708
Hi Nadezhda,
Thank you for your sample. What I actually need is changing color when click on bar, not legend.
Regards.
February 5, 2015 at 7:16 pm in reply to: change style on click legend change style on click legend #66642Data field might work too. I just want my selection to stand out, so I know what I did click…
Thanks
February 5, 2015 at 12:16 pm in reply to: xAxis label color for 2 charts xAxis label color for 2 charts #66614Dimitar,
Thanks a lot for your help.
Regards,
arkgroup
January 6, 2015 at 12:31 pm in reply to: Hide popup if click detected elsewhere Hide popup if click detected elsewhere #65023Looks like this code is working…
$(document).mouseup(function (e) {
var container = $(“#popupWindow”);if (!container.is(e.target) // if the target of the click isn’t the container…
&& container.has(e.target).length === 0) // … nor a descendant of the container
{
$(“#popupWindow”).jqxWindow(‘close’);}
});I find work around. I created instance of the chart and use this code in the timer
chart.source = data;
chart.update();Thanks
Hi Dimitar,
I move code, but it did not help. What else can you suggest?
Did you replicate issue?Thanks
Sorry, type:’date’ was missing
Thanks, I forgot meta tag.
I miss filter setting and filter still works.
That is it, adding filterable: true fix the problem. My code from previous post did not have that.
Thanks for your help.
Can you post your code to JSFiddle?
Thanks
I can reproduce by running this code from your demo. After column sort, I cannot check checkbox.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting.
</title>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../../scripts/demos.js”></script>
<script src=”../../jqwidgets/jqxgrid.filter.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var url = “../sampledata/products.xml”;// prepare the data
var source =
{
datatype: “xml”,
datafields: [
{ name: ‘ProductName’, type: ‘string’ },
{ name: ‘QuantityPerUnit’, type: ‘int’ },
{ name: ‘UnitPrice’, type: ‘float’ },
{ name: ‘UnitsInStock’, type: ‘float’ },
{ name: ‘Discontinued’, type: ‘bool’ }
],
root: “Products”,
record: “Product”,
id: ‘ProductID’,
url: url
};var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
if (value < 20) {
return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: #ff0000;”>’ + value + ‘</span>’;
}
else {
return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: #008000;”>’ + value + ‘</span>’;
}
}var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 850,
source: dataAdapter,
pageable: true,
autoheight: true,
sortable: true,
altrows: true,
enabletooltips: true,
editable: true,
selectionmode: ‘multiplecellsadvanced’,
columns: [
{ text: ‘Product Name’, columngroup: ‘ProductDetails’, datafield: ‘ProductName’, width: 250 },
{ text: ‘Quantity per Unit’, columngroup: ‘ProductDetails’, datafield: ‘QuantityPerUnit’, cellsalign: ‘right’, align: ‘right’, width: 200 },
{ text: ‘Unit Price’, columngroup: ‘ProductDetails’, datafield: ‘UnitPrice’, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘c2’, width: 200 },
{ text: ‘Units In Stock’, datafield: ‘UnitsInStock’, cellsalign: ‘right’, cellsrenderer: cellsrenderer, width: 100 },
{ text: ‘Discontinued’, columntype: ‘checkbox’, datafield: ‘Discontinued’ }
],
ready: function () {
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = ’10’;
var filtercondition = ‘equal’;
var filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter1);
$(“#jqxgrid”).jqxGrid(‘addfilter’, ‘QuantityPerUnit’, filtergroup);
// apply the filters.
$(“#jqxgrid”).jqxGrid(‘applyfilters’);},
columngroups: [
{ text: ‘Product Details’, align: ‘center’, name: ‘ProductDetails’ }
]
});
});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid”>
</div>
</div>
</body>
</html>I can replicate that behavior by modifying your demo. It’s because of filter. Please add reference to jqxgrid.filter.js and add this code to $(“#jqxgrid”).jqxGrid
ready: function () {
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = ’10’;
var filtercondition = ‘equal’;
var filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter1);
$(“#jqxgrid”).jqxGrid(‘addfilter’, ‘QuantityPerUnit’, filtergroup);
// apply the filters.
$(“#jqxgrid”).jqxGrid(‘applyfilters’);},
June 11, 2014 at 3:14 pm in reply to: change columntype dynamically change columntype dynamically #55737What if I don’t use column’s type and add check box or button using cell render or something else?
Hi,
I saw sample when you put images in cell.
Thanks
-
AuthorPosts