[Klaus HParticipant]

And after sumbitting this entry typing “Ctrl + F”, entering “datetime” manually and search it does not highlight the lines with the url command.

[Klaus HParticipant]

Hello Yavor,

I tried this and it does work, but I still have a strange behaviour, I set min to 0 and max to 10, if I enter 11 it goes down to 10 but the editor stays active and pressing enter does not set the changed value. Like I wrote, I need another solution now because there can be gaps now so I have to validate the number anyway. But I am sure there will be another case with another grid in the future, then I will test this again.

Best Regards
Klaus H

[Klaus HParticipant]

Hi,

quick update:

One solution is to react to a change in data in the first grid by saving the data from the second grid, create a new source for the grid, create a new adapter for the dropdown, destroy the grid und create the grid again. Maybe not the best solution, but it works.

[Klaus HParticipant]

Hi Yavor,

thanks for the feedback, I am looking forward to the moment that this works, but in my case I now have to stick to my solution because as I found out today there are gaps in which numbers are allowed, so a simple min max won’t help me here, but in other situations it might be very useful. 🙂

Best Regards
Klaus H

[Klaus HParticipant]

Hello Martin,

thanks, I did not know that, but I do not want to specify a specific number for decimalPlaces, because when a user can manipulate the chart he can enter a range between 0 and 0.1 or 0 and 300. If I do that in your example the labels are 0.000, 50.000, 100.000 and so on.

For me the question is why does it work with line chart if I use 0.15 and 0.25 but not 0.1 and 0.2. There seems to be a problem. But I will keep that workaround in mind if my customer thinks this is a problem.

Best Regards
Klaus H

[Klaus HParticipant]

Hi,

it works when I use the function cellvaluechanging for the columns and validate the value there. That seems okay and doable.

Best Regards
Klaus H

[Klaus HParticipant]

Hi,

ArrowLeft and ArrowRight work exactly as in your example.

ArrowUp and ArrowDown are not triggered in my grid. The difference is, I use jqxNumberInput as editor, that means I have these two attributes per column:
columntype: ‘numberinput’
createeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ decimalDigits: 2, digits: 2, min: 0, max: 24, spinButtons: false, spinMode: ‘simple’ });
}

If the editor is visible ArrowUp and ArrowDown simply behave like a normal jqxNumberInput and uses them to spin. I tried spinMode: ‘simple’ to disable it, but that did nothing. I think the jqxNumberInput blocks these key events because it consumes them itself. Is there any way around that?

Best Regards
Klaus H

[Klaus HParticipant]

Hello Peter,

thank you very much, that looks very helpful. 🙂

Best Regards
Klaus H

[Klaus HParticipant]

Hi,

I tried to recreate the problem with a simple example and could not reproduce the behaviour there. Then after a little thinking, I found the problem: I initialized the div of the window with “display: none” so even before the code to create the jqxWindow is executed, noone can see the elements. So my jqxDraw container is also not displayed when I initialize it and that seemd to cause the problem. 🙂

Best Regards
Klaus H

[Klaus HParticipant]

Hello,

thank you for the quick response.

I have tried it with the latest version shortly after I wrote you, but the effect was the same. I also tried to change the order of instanciating the jqxDraw and the jqxWindow, but that did not change anything.

My script is quite complex and extracting the necessary portions might take some time and maybe I do not need a window after all but can hide some elements and show other elements, but maybe you could provide your working example, maybe then I see a difference. And if not I would get back to you?

Best Regards
Klaus H

[Klaus HParticipant]

Hello Hristo,

thank you for your reply. I had looked at all the examples before. The Timelineview of the Scheduler missed the time of the day in the examples I saw. The Gantt Chart looked complex and good, but did not necessarily do, what I want to achieve.

But I played around with jqxDraw a little bit and found a good basis that I can work with.

Here’s what I came up with as a rough example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxDraw - Basic shapes drawing example</title>
    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />	
    <script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxtooltip.js"></script>

    <style type="text/css">
    .smallText
    {
        font-size:10px;
        font-family: Sans-Serif;
    }
    .largeText
    {
        font-size:16px;
        font-family: Sans-Serif;
    }
	
	.jqx-fill-state-normal-custom
	{
		background: none!important;
	}
	
	.jqx-tooltip-main-custom
	{
		border: 0px!important;
	}
	
	.jqx-tooltip-text-custom
	{
		padding: 0px;
		border: 2px solid white!important;
	}
	
	.popup
	{
		background-color: white; 
		padding: 10px; 
		border-width: 5px;
		border-style: solid;
		color: black; 
		opacity: 1
	}
	
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#container').jqxDraw();

            var renderer = $('#container').jqxDraw('getInstance');
            var size = renderer.getSize();
			
            var borderElement = renderer.rect(0, 0, size.width, size.height, { stroke: 'black', fill: 'transparent' });
			
			var paddingtop = 50;
			var paddingleft = 60;
			var paddingbottom = 70;
			var paddingright = 10;
			
			var borderleft = paddingleft;
			var borderright = size.width - paddingright;
			var bordertop = paddingtop;
			var borderbottom = size.height - paddingbottom;
			
			renderer.rect(borderleft, bordertop, borderright-borderleft, borderbottom-bordertop, { stroke: 'black', fill: 'transparent' });

			var hourheight = (borderbottom - bordertop) / 24;
			console.log(hourheight);
			
			renderer.text("00:00", 10, bordertop-5, undefined, undefined, 0, { 'class': 'smallText' }, false, 'center', 'top', 'centermiddle');
			renderer.text("24:00", 10, borderbottom-5, undefined, undefined, 0, { 'class': 'smallText' }, false, 'center', 'top', 'centermiddle');
			
			for(var i = 1; i < 24; i++)
			{
				var line_y = bordertop + i*hourheight;
			
				renderer.line(borderleft, line_y, borderright, line_y, { stroke: 'red', 'stroke-width': 0.2 });
				var hourtext = "";
				var hourtext = String(i);
				if(i < 10)
					hourtext = "0" + String(i);
				hourtext += ":00";
				
				renderer.text(hourtext, 10, line_y-5, undefined, undefined, 0, { 'class': 'smallText' }, false, 'center', 'top', 'centermiddle');
			}
			
            var dataByDay = [
					{ day: '2021-02-01'},
					{ day: '2021-02-02'},
					{ day: '2021-02-03'},
					{ day: '2021-02-04'},
					{ day: '2021-02-05'},
					{ day: '2021-02-06'},
					{ day: '2021-02-07'},
					{ day: '2021-02-08'},
					{ day: '2021-02-09'},
					{ day: '2021-02-10'},
					{ day: '2021-02-11'},
					{ day: '2021-02-12'},
					{ day: '2021-02-13'},
					{ day: '2021-02-14'},
					{ day: '2021-02-15'},
					{ day: '2021-02-16'},
					{ day: '2021-02-17'},
					{ day: '2021-02-18'},
					{ day: '2021-02-19'},
					{ day: '2021-02-20'},
					{ day: '2021-02-21'},
					{ day: '2021-02-22'},
					{ day: '2021-02-23'},
					{ day: '2021-02-24'},
					{ day: '2021-02-25'},
					{ day: '2021-02-26'},
					{ day: '2021-02-27'},
					{ day: '2021-02-28'}
            ];
			
			var daywidth = (borderright - borderleft) / dataByDay.length;
			console.log(daywidth);
			for(var i = 0; i < dataByDay.length; i++)
			{
				var line_x = (i+1)*daywidth;
				line_x += borderleft;
				console.log("line_x: " + line_x);
				renderer.line(line_x, bordertop, line_x, borderbottom, { stroke: 'blue', 'stroke-width': 0.2 });
				
				var coord_x = (i)*daywidth;
				coord_x += borderleft;
				
				renderer.text(dataByDay[i].day, coord_x-12, size.height-10, undefined, undefined, 270, { 'class': 'smallText' }, false, 'center', 'top', 'left');
			}
			
			var x_left = 0 + borderleft + 5; // 5 = Puffer;
			var x_right = daywidth + borderleft - 5;
			var y_top = bordertop;
			var y_bottom = 4*hourheight + y_top;
			
			// params: x, y, width, height, attributes
            var rect1 = renderer.rect(x_left, y_top, (x_right - x_left), (y_bottom - y_top), { stroke: 'black', fill: 'yellow', 'stroke-width': 0.25  });
			$(rect1).jqxTooltip({ content: '<div class="popup" style="border-color: yellow;">Some Text</div>', position: 'mouse', name: 'scheduleTooltip', autoHide: false, theme: 'custom'});
			
			y_top = 4*hourheight + bordertop;
			y_bottom = 2*hourheight + y_top;
			var rect2 = renderer.rect(x_left, y_top, (x_right - x_left), (y_bottom - y_top), { stroke: 'black', fill: 'orange', 'stroke-width': 0.25 });
			$(rect2).jqxTooltip({ content: '<div class="popup" style="border-color: orange;">Some Text</div>', position: 'mouse', name: 'scheduleTooltip', autoHide: false, theme: 'custom'});
			
			y_top = 6.5*hourheight + bordertop;
			y_bottom = 2.5*hourheight + y_top;
			var rect3 = renderer.rect(x_left, y_top, (x_right - x_left), (y_bottom - y_top), { stroke: 'black', fill: 'orange', 'stroke-width': 0.25 });
			$(rect3).jqxTooltip({ content: '<div class="popup" style="border-color: orange;">Some Text part 2</div>', position: 'mouse', name: 'scheduleTooltip', autoHide: false, theme: 'custom'});

			y_top = 9*hourheight + bordertop;
			y_bottom = 3*hourheight + y_top;
			var rect4 = renderer.rect(x_left, y_top, (x_right - x_left), (y_bottom - y_top), { stroke: 'black', fill: 'green', 'stroke-width': 0.25 });
			$(rect4).jqxTooltip({ content: '<div class="popup" style="border-color: green;">Some Text</div>', position: 'mouse', name: 'scheduleTooltip', autoHide: false, theme: 'custom'});

			y_top = 13*hourheight + bordertop;
			y_bottom = 8*hourheight + y_top;
			var rect5 = renderer.rect(x_left, y_top, (x_right - x_left), (y_bottom - y_top), { stroke: 'black', fill: 'red', 'stroke-width': 0.25 });
			$(rect5).jqxTooltip({ content: '<div class="popup" style="border-color: red;">Some Text</div>', position: 'mouse', name: 'scheduleTooltip', autoHide: false, theme: 'custom'});

            renderer.refresh();
        });
    </script>
</head>
<body class='default'>
    <div id='container' style="width:1050px; height:800px">
    </div>
</body>
</html>

I did some tweaking to the jqxTooltip (which only seems to work with position mouse) and need a better way to calculate the coordinates, but I think this will eventually get me there. 🙂

Best Regards
Klaus

[Klaus HParticipant]

Hello Hristo,

thank you for your input.

I think rangedcolum is the correct type of chart. If I comment out the orientation then that’s a basis for what I look for. But the different columns should not be next to each other but in one line from top to bottom. And there could be two or three occurances of the same product on the same day.

So the basic data would look something like:
{ type=”product1″, start=”2021-02-01 00:00:00″, end=”2021-02-01 06:00:00″},
{ type=”product1″, start=”2021-02-01 06:30:00″, end=”2021-02-01 08:00:00″},
{ type=”product2″, start=”2021-02-01 08:00:00″, end=”2021-02-01 09:00:00″},
{ type=”product2″, start=”2021-02-01 09:30:00″, end=”2021-02-01 10:30:00″},
{ type=”product3″, start=”2021-02-01 10:30:00″, end=”2021-02-01 15:00:00″}
…

The type defines the color, the data is prepared so start and end are in the same day, the overlap to the next day is a seperate entry. I have no problem to manipulate the data to fit it to a certain structure. The number of occurances per day can be flexible due to break time interruptions. So the easiest way would be to drav a range from start to end in a specified color, but I have no problem to handle the data dynamically and transform it on the fly in order to fit it into the chart. But I need the X-Axis as Day and the Y-Axis as time of day, everything in one column and several occurances of each color/product per day. Just like a jqxScheduler with product being the color coded room and no overlapping meaning one column (edit: like a stacked column, with spacing or I would provide the break times as entries).

I hope my wish is clear. I could provide you with a screenshot of an example, but I cannot attach an image here.

Best Regards
Klaus

[Klaus HParticipant]

Hello Hristo,

thank you for your answer with the example, I have played around a bit with the possibilites and found a solution that the customer is okay with, like using the existing crosshair while not all lines show the dot with the selection. I can access all the datapoints and show all the values outside of the chart. So for now I see no need to contact the Sales Department. 🙂

Best regards
Klaus

[Klaus HParticipant]

Hello Peter,

thank you for checking this. I had some time to do more testing and I found the solution for the problem and wanted to share it here.

The line that caused the problem was: var match = /[а-яА-ЯЁё]/.test(txt);

The tomcat server switched its behaviour between 8 and 9 and tries to convert static files into a default characterset (despite me saying in the servlet directly and the script tag that includes the javascript file that it is UTF-8).

But adding the following init-parameter to the default servlet in the web.xml (in server or application) seemed to do the trick:
<init-param>
<param-name>fileEncoding</param-name>
<param-value>utf-8</param-value>
</init-param>
Best regards
Klaus H

[Klaus HParticipant]

Hello Todor,

thank you very much:

1) okay, that was a misunderstanding on my part, “filterable: false” is doing that what I wanted.
2) Works like a charm. 🙂

Best Regards
Klaus

[Author]

Posts