jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts

January 14, 2014 at 10:17 am in reply to: RangeSelector does not return range properly RangeSelector does not return range properly #47832

kingaru

Participant

Hi Peter,

Thanks for clarifying this! Could you please suggest what would be the best workaround for this problem for now?

Regards
Igor

January 13, 2014 at 9:56 pm in reply to: RangeSelector does not return range properly RangeSelector does not return range properly #47811

kingaru

Participant

Hi Peter,

Here is the quick example the output goes to console so when you slide the range from 0 to 1 it has to be 1 but in console output gives you 0. What I just found as well that if you will wrap the range Selector in to an expander the problem get solved … below are both examples.

—without expander – issue —

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.ui-redmond.css" type="text/css" />
    <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.ui-le-frog.css" type="text/css" />
    <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.darkblue.css" type="text/css" />
    <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
    <script type="text/javascript" src="../jqw/scripts/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="../jqw/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqw/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqw/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqw/jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../jqw/jqwidgets/jqxexpander.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxvalidator.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxcheckbox.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxbuttons.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxradiobutton.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/globalization/globalize.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxcalendar.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxdatetimeinput.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxmaskedinput.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxinput.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxdropdownlist.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxlistbox.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxscrollbar.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxwindow.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxtooltip.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxchart.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxcombobox.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxrangeselector.js"></script> 

    
<script>
    
$(document).ready(function () {

document.body.scroll = "no";
document.body.style.overflow = 'hidden';
document.height = window.innerHeight;

	$("#jqxTabs").jqxTabs({ height: '95vh'  , width: '100%', position: 'top',  animationType: 'fade' , 
				selectionTracker: 'checked' ,theme: 'ui-redmond'});  

            
			
// --------------------     
     

                $("#rangeSelector").jqxRangeSelector(
                    {
                        width: 800, height: 90, min: 0, max: 527,
                        range: {from: 0, to: 527}, 
                        labelsOnTicks: false,
                        resizable: true,
                        majorTicksInterval: 12, minorTicksInterval: 1,
                        showLabels: false
                    });
                
	$("#rangeSelector").on("change", function (event) 
				{
					var range = $("#rangeSelector").jqxRangeSelector("getRange");	
					console.log("From:",range.from);
					console.log("To:",range.to);
				});
			
			
}); // End of the .ready() function
    
</script>

</head>

<body class='default'>

<div id='jqxTabs'>
		<ul>
		<li style="margin-left: 50px;">Tab 1</li>

		</ul>

    <div>
			<div>An Expander</div>
				<div >  <!-- Body of the Expander -->
					<div id='rangeinner' style="margin-left: 1%; margin-top: 1%; width: 98%" >
						<div id="rangeSelector" style="margin: 0 auto; position: relative" >
							<div id="jqxRangeSelectorContent">
							</div>
						</div>
					</div>	
		
				</div>
		</div>
	

</div>

</body>
</html>

here is the example where it is wrapped in to expander.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.ui-redmond.css" type="text/css" />
    <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.ui-le-frog.css" type="text/css" />
    <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.darkblue.css" type="text/css" />
    <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
    <script type="text/javascript" src="../jqw/scripts/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="../jqw/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqw/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqw/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqw/jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../jqw/jqwidgets/jqxexpander.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxvalidator.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxcheckbox.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxbuttons.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxradiobutton.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/globalization/globalize.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxcalendar.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxdatetimeinput.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxmaskedinput.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxinput.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxdropdownlist.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxlistbox.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxscrollbar.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxwindow.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxtooltip.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxchart.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxcombobox.js"></script> 
    <script type="text/javascript" src="../jqw/jqwidgets/jqxrangeselector.js"></script> 

    
<script>
    
$(document).ready(function () {

document.body.scroll = "no";
document.body.style.overflow = 'hidden';
document.height = window.innerHeight;

	$("#jqxTabs").jqxTabs({ height: '95vh'  , width: '100%', position: 'top',  animationType: 'fade' , 
				selectionTracker: 'checked' ,theme: 'ui-redmond'});  

			$("#expander").jqxExpander({ toggleMode: 'none', width: '98%' , showArrow: false, theme: 'energyblue'  });
            
			
// --------------------     
     

                $("#rangeSelector").jqxRangeSelector(
                    {
                        width: 800, height: 90, min: 0, max: 527,
                        range: {from: 0, to: 527}, 
                        labelsOnTicks: false,
                        resizable: true,
                        majorTicksInterval: 12, minorTicksInterval: 1,
                        showLabels: false
                    });
                
	$("#rangeSelector").on("change", function (event) 
				{
					var range = $("#rangeSelector").jqxRangeSelector("getRange");
					console.log("From:",range.from);
					console.log("To:",range.to);
				});
			
			
}); // End of the .ready() function
    
</script>

</head>

<body class='default'>

<div id='jqxTabs'>
		<ul>
		<li style="margin-left: 50px;">Tab 1</li>

		</ul>

    <div>
		<div id="expander" style="margin-left: 1%; margin-top: 1%; margin-right: 1%">
			<div>An Expander</div>
				<div >  <!-- Body of the Expander -->
					<div id='rangeinner' style="margin-left: 1%; margin-top: 1%; width: 98%" >
						<div id="rangeSelector" style="margin: 0 auto; position: relative" >
							<div id="jqxRangeSelectorContent">
							</div>
						</div>
					</div>	
		
				</div>
		</div>
	
	</div>

</div>

</body>
</html>

January 9, 2014 at 9:53 am in reply to: Charts reloading Charts reloading #47614

kingaru

Participant

Hi Peter,

Yes, that makes sense if you are updating the chart’s data and keep setting the same. In my case I’m trying to create a sort of zoom function where with use of the jqxRangeSelector I will zoom in in to a small chart which will trigger change for the main chart. In this case I have to re-create the main chart with new settings (because I need to pass new scale for grid to the chart) and place it instated of the existing one that. That is the reason for re-creating the whole setup for the same chart. In this case .remove() will not be an option since it completely removes DOM element but I need to put new re-created chart with use of the same DIV. Please advice what would be then the best approach here?

Thanks
Igor

January 9, 2014 at 7:31 am in reply to: Charts reloading Charts reloading #47604

kingaru

Participant

Hello Peter,

Thanks a lot for the feedback, I understand that I ultimately re-build charts in my particular case from scratch by hitting refresh button so I have to set all settings for them, however how it is different from a situation when I build these charts for the first time? Why 1st time built happens in a split second (we set all 40+ properties here as well, right?) and all further “re-builds” taking much longer? Also if before creating these charts for the 1st time I save original state of DIV’s of these graphs by using originalState=$(“#some_div”).html() and restore it just before refreshing by $(“#some_div”).html(originalState); (ultimately removing them) then the whole update process works like the 1st time load?

Thanks a lot for your time and help!
Regards
Igor

January 7, 2014 at 9:03 pm in reply to: sync method in chart and progress spin? sync method in chart and progress spin? #47499

kingaru

Participant

I think I just found an answer … I should be passing records … right?

Igor

January 7, 2014 at 8:59 pm in reply to: sync method in chart and progress spin? sync method in chart and progress spin? #47498

kingaru

Participant

Hi Peter,

So you are suggesting to load dataAdapter via dataBind() and then in the loadComplete callback define settings for the chart and eventually call jqxChart(settings), right? What in that case should I pass as a “source:” in the chart settings? Please correct me if I’m wrong but if I’ll define the same dataAdapter as the source then we will have constant loop trough loadComplete callback -> jqxChart pointing to the dataAdapter trough the source -> dataAdapter -> loadComplete etc., or I’m missing something here?

Thanks
Igor

January 7, 2014 at 4:49 pm in reply to: sync method in chart and progress spin? sync method in chart and progress spin? #47429

kingaru

Participant

Hello Peter,

Yes, I understood already that spinner will not be possible with sync. I would of course prefer to go with async option instead but having following challenge:

In order to define proper scale for my chart’s grid I need to assign variable values to “unitInterval:” which I receive via dataAdapter from a database. Unfortunately it looks like the chart creates axes before load of the dataAdapter is fully completed therefore the variable which I try to get from dataAdapter and pass to unitInterval is not available at the time when Axes/grid info for the chart are created. Could you please let me know if there is a solution to ful fil this requirements?

Thanks in advance
Igor

January 6, 2014 at 9:01 pm in reply to: sync method in chart and progress spin? sync method in chart and progress spin? #47355

kingaru

Participant

Hi Peter,

Like I’ve mentioned in my original post the call is sync because of the issue that I have described in my previous post (http://www.jqwidgets.com/community/topic/sync-method-in-chart-and-progress-spin/) which I resolved by enabling sync request. Please advice if there could be a different solution to that issue other than enabling sync which would resolve this particular problem.

Regards
Igor

January 6, 2014 at 8:20 pm in reply to: sync method in chart and progress spin? sync method in chart and progress spin? #47349

kingaru

Participant

Hello Peter,

Thanks for the prompt feedback. I tried to use beforeSend callback to start spinner and loadComplete to stop it … unfortunately the spinner only appears after the Ajax is completed i.e. together with the chart. Am I doing something wrong here?

Regards
Igor

January 5, 2014 at 4:26 pm in reply to: how to set value to unitInterval via a variable? how to set value to unitInterval via a variable? #47262

kingaru

Participant

Nevermind … I found the issue… I should be using sync method in the dataAdapter instead of async one …

Regards
Igor

October 1, 2013 at 5:10 pm in reply to: Jumpy scroll bar on the main window with isModal enabled Jumpy scroll bar on the main window with isModal enabled #29991

kingaru

Participant

Hello,

OK.. the working solution was to disabled sliders in the browser window completely by using:

document.body.scroll = “no”;
document.body.style.overflow = ‘hidden’;
document.height = window.innerHeight;

Not sure if this is the right way to go but it helps here since jqxTab has it is own sliders.

Regards
Igor

September 30, 2013 at 5:39 pm in reply to: Jumpy scroll bar on the main window with isModal enabled Jumpy scroll bar on the main window with isModal enabled #29854

kingaru

Participant

Hello Peter,

I tried releases starting from 2.8.3 till the current one and they all have the same issue.
It is a bit tricky issue which may not be too easy to re-produce .
Please take look at this screenshot: http://i44.tinypic.com/1rdk61.png
You can see that when window with isModal is opened absolutely unnecessary scroll bars will be appearing in the browser window.
This is behavior that I observe in Linux. Under Windows 8 when I open window for the 1st time only vertical scroll bar in the browser will be appearing and instantly disappearing .

Regards
Igor

August 17, 2013 at 7:13 pm in reply to: broken autoComplete in jqxComboBox in the 3.0 release broken autoComplete in jqxComboBox in the 3.0 release #27036

kingaru

Participant

Hi Peter,

Thanks a lot for your prompt feedback. Here is the simple code for the test:

———– index.html ————


<div id="test_form" style="margin-left: 1%; margin-top: 1%">
      <div><h3>Testing comboBox</h3></div>
                <div>
                        <form id="service_register_form" target="form-iframe"  style="font-size: 13px; font-family: Verdana;">
                        <table class="register-table">
                                <tr>
                                        <td>A ComboBox:</td>
                                        <td><div id='cbox'> </div></td>
                                </tr>
                                <tr>
                        </table>
                        </form>
                </div>
        </div>
</div>

———- End index.html ————

———– test.js ———————


$(document).ready(function () {
        var mydata = [
                {id:"1", type: "This is the line 1"},
                {id:"2", type: "Another line for the test"},
                {id:"3", type: "More lines for the test"},
                {id:"4", type: "Extra line for the test"}
                ];
        $("#cbox").jqxComboBox({ source: mydata, displayMember: 'type', valueMember: 'id' , placeHolder: "Select an item",
                                                        height: 25, width: 300, minLength: 3, autoDropDownHeight: true,  autoComplete: true,
                                                        searchMode: 'containsignorecase', theme: 'darkblue' });
}); // End of the .ready() function

———- end of the test.js —————

When I type “lines” in the combo box it filters out for slection only lines that have “lines” , however now when I want to select
“More lines for the test” it selects the following item instead. Now after that anything that you try to select from the combobox will be selected wrongly.

Regards
Igor

August 15, 2013 at 10:25 am in reply to: Syncing data between dataAdapter and SQL Syncing data between dataAdapter and SQL #26882

kingaru

Participant

Hi Peter,

Thanks for clarification ! So it appears I need to use both of them if need to get data from SQL to update CombiBox , right ?
I have one challenge with this approach though , when I .submit() my form to SQL and immediately try to set “source” property again (i.e. read records from SQL back ) both processes (submitting/and re-reading) happening at the same time (async?) . Is it me that ‘m doing something wrong and there is better approach on how to update data in Combobox after adding a new data in SQL or I need to use different methods to control finishing of submut() and only then starting setting “source” to refresh data.

Thanks in advance
Igor

P.S. Sorry if this is a bit of off-topic

August 12, 2013 at 10:21 am in reply to: Syncing data between dataAdapter and SQL Syncing data between dataAdapter and SQL #26685

kingaru

Participant

Hi Peter,

Thanks for the feedback. I use exactly the same principle like it is described in the example , however I believe after adding a new record in SQL I need some how to trigger a “reload” of data adapter for my comboBox , it does nto look like it will happen automatically , right?
How can I do that , which method in CombiBox should I be using for that?

Thanks in advance
Igor

Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)