[mflachParticipant]

There is a demo of a chart that uses the chart type “RangeColumn”. It’s set in a horizontal layout but uses numerical values on the x axis. I’d like to use the same chart type with dates on the x axis. Using the chart in the link below as an example, I’d like to have values that represent a date range plotted on a chart. The example uses numbers for the range, I’d like to use dates.

https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_color_bands.htm?material

Hope this clarifies what I’m trying to do.

Mark

[mflachParticipant]

Thanks for your response but the issue I’m having with the the RangeColumn chart more so than the Range Selector. What I really need is an example of the RangeColumn chart with dates on the X axis.

Mark

[mflachParticipant]

That worked great. I had to use one of the column attributes to store the information I needed to display in the filter row and set the text in the bindingcomplete event.

As a related question, I had to store the information I needed (number of work hours for each month) in the ‘classname’ column attribute. It’s the only attribute that I was not using that would work for me. Is there anyway to create my own custom attribute for the column array?

[mflachParticipant]

Yes, disabling the filter row does fix the problem but the reason I used the filter row is because the filter popup is large enough to hold the data. As far as I know there is no way to control the size of the filter popup when you use a column filter.

[mflachParticipant]

I figured it out. I was using a older implementation. Now I’m using:

rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },

[mflachParticipant]

The reason I asked about bindcomplete is it looks like that event needs to be called to build the child grid. Here is my code for this:

$("#SummaryGrid").bind('bindingcomplete', function (event) {
	if (event.target.id == "SummaryGrid") {
		$("#SummaryGrid").jqxGrid('beginupdate');
		var datainformation = $("#SummaryGrid").jqxGrid('getdatainformation');
		for (i = 0; i < datainformation.rowscount; i++) {
			$("#SummaryGrid").jqxGrid('setrowdetails', i, "<div id='grid" + i + "' style='margin: 10px;'></div>", 220, true);
		}
		$("#SummaryGrid").jqxGrid('resumeupdate');
	}
});

[mflachParticipant]

Thanks for the lead. I was able to get this to work with adding this to the child grid definition:

scrollmode: 'deferred',
scrollfeedback: function(row)
{
    var position = detailGrid.jqxGrid('scrollposition');
    var left = position.left;
    var top = position.top;
    $('#jqxgrid').jqxGrid('scrolloffset', top, left);
},

[mflachParticipant]

So why am I loosing my child rows when I filter the parent rows?

[mflachParticipant]

Also, the error is in buildFormat. The q.currencysymbol value is undefined.

buildFormat : function (q) {
	if (q.dataType == "number" || q.dataType == "float" || q.dataType == "int" || q.dataType == "integer") {
		var p = q.formatString;
		if (p == "" || p.indexOf("n") != -1 || p.indexOf("N") != -1) {
			this.style += '\n\t\t\t<NumberFormat ss:Format="0"/>'
		} else {
			if (p == "f" || p == "F" || p == "D" || p.indexOf("d") != -1) {
				this.style += '\n\t\t\t<NumberFormat ss:Format="#,##0.00_);[Red](#,##0.00)"/>'
			} else {
				if (p.indexOf("p") != -1 || p.indexOf("P") != -1) {
					this.style += '\n\t\t\t<NumberFormat ss:Format="Percent"/>'
				} else {
					if (p.indexOf("c") != -1 || p.indexOf("C") != -1) {
						if (typeof q.currencysymbol != 'undefined') // I added this
						{
						if (parseInt(q.currencysymbol.charCodeAt(0)) == 8364) {
							this.style += '\n\t\t\t<NumberFormat ss:Format="Euro Currency"/>'
						} else {
							this.style += '\n\t\t\t<NumberFormat ss:Format="Currency"/>'
						}
						}
						else
						{
							var myVar = 0;
						}
					}
				}
			}
		}
	} else {
		if (q.dataType == "date") {
			this.style += '\n\t\t\t<NumberFormat ss:Format="Short Date"/>'
		}
	}
},

[mflachParticipant]

I was able to duplicate this on Fiddle. Here is my column description and I used the same style from my project.

Modified the grid with: showaggregates: true

{
          text: 'Price',
          datafield: 'price',
          cellsalign: 'right',
          cellsformat: 'c2',
          cellclassname: 'column1',
 	  aggregates: ['min', 'max'],
          width: 100
}

[mflachParticipant]

OK, getting closer. I’ve now narrowed it down to my use of cellclassname. Here is the style for ‘column1’. If I take out cellclassname it work just fine.

	.column1 {
            background-color: #99ccff;
            color: white;
        }    

[mflachParticipant]

Here is my full column description. Is there something that may be messing things up?

BTW: I tested it on Fiddle but could get it to duplicate my experience.

{text:'Dec 13 15', filterable: false, editable: false, cellsalign: 'right', align: 'right', cellsformat: 'c2', hidden: false, cellclassname: 'column1',width:130, datafield:'Dec_13_15',
					 aggregates: [
								{ '<b>LSI</b>':
								function (aggregatedValue, currentValue, column, record) 
									{
									var val = (record.RATE_ID == 11?0:currentValue);
									return aggregatedValue + val;
									}
								},
								{ '<b>Wyle</b>':
								function (aggregatedValue, currentValue, column, record) 
									{
									var val = (record.RATE_ID != 11?0:currentValue);
									return aggregatedValue + val;
									}
								}
								]
			 }

[mflachParticipant]

I’ve narrowed it down to my use of aggregates. Because my aggregates have a label, it messes up the currency formatting.

 aggregates: [
	{ '<b>LSI</b>':
	function (aggregatedValue, currentValue, column, record) 
	{
		var val = (record.RATE_ID == 11?0:currentValue);
		return aggregatedValue + val;
	}
	},
	{ '<b>Wyle</b>':
	function (aggregatedValue, currentValue, column, record) 
	{
		var val = (record.RATE_ID != 11?0:currentValue);
		return aggregatedValue + val;
		}
	}
]

[mflachParticipant]

Mystery solved…

Since I’m updating the filtered column, the data is filtered out BEFORE the cellendedit is triggered. Therefore the row is no longer there and I get the row below the intended row. I had to change it to use cellbeginedit and inverse the args.value of the checkbox to get the correct value since the value has not changed yet in cellbeginedit.

if(args.columntype == 'checkbox')
{
    $cellValue = !args.value; //Inverse to get the correct value
    var rowid = $('#jqxgrid').jqxGrid('getrowid', args.rowindex);
    var data = $('#jqxgrid').jqxGrid('getrowdatabyid', rowid);
}

[mflachParticipant]

I’m not familiar enough with JSFiddle to quickly produce an example. The code below is a modified version of your Grid Filtering demo with ability to edit a row. If you click on a checkbox it will display the name associated with the row. Try it unfiltered and then filtered. You will get different results. I forgot to mention in my original post that this problem is directly related to checkbox columns as they don’t populate the args the same as other columns.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example illustrates the Grid filtering feature. Enter some data into the Filter Row.</title>
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="jqwidgets/scripts/demos.js"></script>
    <script type="text/javascript" src="jqwidgets/demos/jqxgrid/generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = generatedata(500);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'name', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date'},
                    { name: 'quantity', type: 'number' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                showfilterrow: true,
                filterable: true,
                editable: true,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215 },
                  {
                      text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220
                  },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
                  { text: 'Ship Date', datafield: 'date', filtertype: 'range', width: 210, cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Qty.', datafield: 'quantity', filtertype: 'number',  cellsalign: 'right' }
                ]
            });
            $('#clearfilteringbutton').jqxButton({ height: 25});
            $('#clearfilteringbutton').click(function () {
                $("#jqxgrid").jqxGrid('clearfilters');
            });
            $("#jqxgrid").on('cellendedit', function (event) {
				var args = event.args;
				$cellValue = args.value;
				if(args.columntype == 'checkbox')
				{
					var rowid = $('#jqxgrid').jqxGrid('getrowid', args.rowindex);
					var data = $('#jqxgrid').jqxGrid('getrowdatabyid', rowid);
					alert (data.name);
				}
            });        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
    <input style="margin-top: 10px;" value="Remove Filter" id="clearfilteringbutton" type="button" />
</body>
</html>

[Author]

Posts