jQWidgets Forums

jQuery UI Widgets › Forums › Grid › grid and jquery mobil problem

Tagged: , , ,

This topic contains 7 replies, has 2 voices, and was last updated by  Dimitar 11 years, 5 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    grid and jquery mobil problem Posts
  • November 27, 2013 at 1:46 pm grid and jquery mobil problem #44802

    donvex
    Participant

    le me suis connecté avec un smart phone

    remarque:

    1- le char ne s’affiche pas pourtant avec le pc il s’affiche
    2- il faut recharger pour voir apparaître le grid
    3- une foi le grid chargé il ne scroll pas

    November 27, 2013 at 1:55 pm grid and jquery mobil problem #44808

    Dimitar
    Participant

    Hello donvex,

    Unfortunately, we do not support jQWidgets in French. Please re-post your question in English so that we may be able to help.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    November 27, 2013 at 2:06 pm grid and jquery mobil problem #44812

    donvex
    Participant

    hello!
    I load my application in my smart phone but I have some error

    first: when i load my page I’m oblige to refresh the browser after seing grid
    second: after grid appear it’s not possible to scroll it using tactil

    my browser is OPERA mini

    thank

    November 27, 2013 at 2:14 pm grid and jquery mobil problem #44826

    Dimitar
    Participant

    Hi donvex,

    Please provide us with a sample code which demonstrates the reported issue. Also, please make sure you are using the latest version of jQWidgets (3.0.4).

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    November 27, 2013 at 2:38 pm grid and jquery mobil problem #44836

    donvex
    Participant

    yes I’m sure is the jqwidgets(3.0.4)

    thas the code and I use jquery mobile

    
<div data-role="content" >
		<!----------------------- troisieme block contenant "Activité par jour"---------------------------------------->
		<div class="entete" >Activité par jour</div>
		<!----ajout de la grille jqwidget--->
		<div class="contenu" style="margin-left: 1%; margin-top: 19px;">
			<div id="jqxgrid">
			</div>
		</div>	
		
	</div>
	<!---------------------------------end entête rappot commercial---------------------------------------------------------------------------->
				<!---------------------------------partie 4 rapprot-------------------------------------------------------------------------------->
                        <div data-role="footer"  data-theme="b">
							<!----------------------- quatrieme block contenant "Zone de commentaire sur le rapport"---------------------------------------->
							<div class="entete" >Zone de commentaire sur le rapport</div>
							<p>Les commentaires et discussions relatifs à ce rapport.<br>
								Avec le nom de la personne qui commente, la date et le contenu du commentaire.</p>
							<!------------fin--------------------------------------------------------------------------------------->
							<!----------------------- quatrieme block contenant "Zone de commentaire sur le rapport"---------------------------------------->
							<div class="entete" >Date de dernier rafraichissement : 09/10/2013 à 18:30</div>
							<!------------fin--------------------------------------------------------------------------------------->
                        </div>
                <!---------------------------------end entête rappot commercial---------------------------------------------------------------------------->
</div>
    November 27, 2013 at 2:46 pm grid and jquery mobil problem #44843

    Dimitar
    Participant

    Hi donvex,

    We would need your JavaScript code, too. Please post a complete example.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    November 27, 2013 at 2:54 pm grid and jquery mobil problem #44852

    donvex
    Participant

    ok that it!

    
<!DOCTYPE html>
<html lang="en">
<head>
    
	
	<!-- include jquery-mobile !-->
		<link rel="stylesheet" href="../../css/jquery.mobile.theme-1.3.0.min.css" />
		<link rel="stylesheet" href="../../css/jquery.mobile.structure-1.3.0.min.css" />
		<link rel="stylesheet" href="../../css/customtheme.min.css" />
		<link rel="stylesheet" href="../../css/css.css" />
		<script src="../../js/jquery-1.10.2.min.js"></script>
		<script src="../../js/scriptjquery.js"></script>
		<script src="../../js/jquery.mobile-1.3.0.min.js"></script>
	<!-- fin -->
	
				<link rel="stylesheet" href="../../styles/jqx.base.css" type="text/css" />
				<link rel="stylesheet" href="../../styles/jqx.ui-redmond.css" type="text/css" />
                
                <!-- bibliotech jqwidget -->
				 
    <link rel="stylesheet" href="../../styles/jqx.windowsphone.css" type="text/css" />
    <link rel="stylesheet" href="../../styles/jqx.blackberry.css" type="text/css" />
    <link rel="stylesheet" href="../../styles/jqx.mobile.css" type="text/css" />
    <link rel="stylesheet" href="../../styles/jqx.android.css" type="text/css" />			
				<script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxgrid.js"></script>
				 <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
				<script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
				<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
				<script type="text/javascript" src="../../jqwidgets/jqxpanel.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/jqxdropdownlist.js"></script>
				<script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
				<script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
				
				<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
				<script type="text/javascript" src="../../scripts/gettheme.js"></script>
				<script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
				<script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
				
				
	<!-- script gerant l'affichage de la gauge ------------------------------------------------------------->
	
    <script type="text/javascript">
	
        var valeurob = 100;
			var gauge=87;
		
           $(document).ready(function () {
		   
		   
             //Gauge
              $('#gauge').jqxGauge({
                ranges: [{ startValue: 0, endValue:  valeurob , style: { fill: '#f90019', stroke: '#f90019' }, startDistance: 0, endDistance: 0 },
                         { startValue:  valeurob , endValue: valeurob * 1.3  , style: { fill: '#32f900', stroke: '#32f900' }, startDistance: 0, endDistance: 0}],
                cap: { size: '5%', style: { fill: '#d02841', stroke: '#d02841'} },
                caption: { offset: [0, -25], value: gauge , position: 'bottom' },
                border: { style: { fill: '#8e9495', stroke: '#7b8384', 'stroke-width': 1 } },
                ticksMinor: { interval: 500, size: '5%' },
                ticksMajor: { interval: 2000, size: '10%' },       
                labels: { position: 'outside', interval: Math.round(valeurob * 1.3/10)  },
                pointer: { style: { fill: '#d02841' }, width: 5 },
                animationDuration: 1500
            });
            
             $('#gauge').jqxGauge({max: valeurob * 1.3  ,width: '42%'});
            $('#gauge').jqxGauge('value', gauge);
        });
    </script>
	<!-- end script gerant l'affichage de la gauge -------------------------------------------------------------> 	
	<!--script qui affiche le diagramme en batton-->
	<script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
			
            var sampleData = [
{ Day: '10/10/2013', Running: 30, Swimming: 1.44 },
{ Day: '10/11/2013', Running: 40, Swimming: 1.93 },
{ Day: '10/12/2013', Running: 50, Swimming: 2.41},
{ Day: '10/13/2013', Running: 0, Swimming:  0.00},
{ Day: '10/14/2013', Running: 20, Swimming: 0.96},
{ Day: '10/15/2013', Running: 10, Swimming: 0.48 },
{ Day: '10/16/2013', Running: 40, Swimming: 0.96},
{ Day: '10/17/2013', Running: 35, Swimming: 1.44 },
{ Day: '10/18/2013', Running: 40, Swimming: 1.93},
{ Day: '10/19/2013', Running: 50, Swimming: 2.41 },
{ Day: '10/20/2013', Running: 0, Swimming:  0.00},
{ Day: '10/21/2013', Running: 20, Swimming: 0.96 },
{ Day: '10/22/2013', Running: 10, Swimming: 0.48},
{ Day: '10/23/2013', Running: 20, Swimming: 0.96},
{ Day: '10/24/2013', Running: 30, Swimming: 1.44},
{ Day: '10/25/2013', Running: 40, Swimming: 1.93 },
{ Day: '10/26/2013', Running: 50, Swimming: 2.41 },
{ Day: '10/27/2013', Running: 0, Swimming:  0.00},
{ Day: '10/28/2013', Running: 20, Swimming: 0.96 },
{ Day: '10/29/2013', Running: 10, Swimming: 0.48 },
{ Day: '10/30/2013', Running: 20, Swimming: 0.96 },
{ Day: '10/31/2013', Running: 30, Swimming: 1.44}
                ];
            // prepare jqxChart settings
            var settings = {
                title:'  ',
                description: '  ',
                enableAnimations: true,
                showLegend: false,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                categoryAxis:
                    {
                        text: 'Category Axis',
                        dataField: 'Day',
                        showTickMarks: true,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        showGridLines: false,
                        gridLinesInterval: 1,
                        gridLinesColor: '#888888',
                        axisSize: 'auto',
						textRotationAngle: 270
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'stackedcolumn',
                            columnsGapPercent: 100,
                            seriesGapPercent: 5,
                            valueAxis:
                            {
                                unitInterval: 10,
                                minValue: 0,
                                maxValue: 100,
                                displayValueAxis: true,
                                description: '',
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'Running', displayText: 'Running' },
                                    { dataField: 'Swimming', displayText: 'Swimming' }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
	<!-- fin affichage diagramme en batton-->
	
				<!----------------------script gerant l'affichage du tableau -->
				<script type="text/javascript">
					$(document).ready(function () {
						var theme = "ui-redmond";
						var url = "../../data/datasuivitcommerciaux.txt";
						// prepare the data
						var source =
						{
							datatype: "json",
							datafields: [
								{ name: 'jour', type: 'string' },
								{ name: 'date', type: 'string' },
								{ name: 'O_recalcul', type: 'float' },
								{ name: 'O_initial', type: 'integer' },
								{ name: 'realise', type: 'integer' },
								{ name: 'O_cumule', type: 'integer' },
								{ name: 'r_cumule', type: 'integer'}
							],
							url: url
						};
						
						var dataAdapter = new $.jqx.dataAdapter(source);
						$("#jqxgrid").jqxGrid(
						{
							width: '100%',
							height: 900,
							source: dataAdapter,
							theme: theme,
							columnsheight: 40,
							columnsmenuwidth: 40,
							rowsheight: 34,
							columns: [
							  { text: 'Jour semaine', datafield: 'jour', width: '20%'},
							  { text: 'Date', datafield: 'date', width: '40%'},
							  { text: 'Objectif recalculé à 100%', datafield: 'O_recalcul', width: '10%', cellsformat: 'F1', cellsalign: 'right'     },
							  { text: 'Objectif initial', datafield: 'O_initial', width: '15%', cellsformat: 'F1', cellsalign: 'right' },
							  { text: 'Realisé', datafield: 'realise', width: '10%', cellsformat: 'F1', cellsalign: 'right' },
							  { text: 'Objectif Cumulé', datafield: 'O_cumule', width: '12%', cellsformat: 'F1', cellsalign: 'right'},
							  { text: 'Réalisé Cumulé', datafield: 'r_cumule', width: '15%', cellsformat: 'F1', cellsalign: 'right'}
						  ]
						});
						
						
					});
				</script>
				<!-- end script getion tableau -->
<!-- end  -->
<style type="text/css">

.legende-sup {
    display: inline-block;
    height: 12px;
    width: 12px;
    background-color: #993F3C;
}
.legende-obj {
    display: inline-block;
    height: 12px;
    width: 12px;
    background-color: #3E6796;
}
pre{
	font-size: 14pt;
}
h2{
	text-align:center;
}
h3{
	width:50%;
	margin-left: auto;
}
.gauge { 
	width:100%;
	height:100%;
	margin: 0px auto 0px auto;
	text-align: center;
	overflow: hidden;
	border: 1px black solid;
	
}
.gauge #gauge{ 
	width:100%;
	height:100%;
	margin: 0px auto 0px auto;
	text-align: center;
}
.tableau{
	width:100%;
	height:413px;
	border: 1px black solid;
}
tableau {
	width: 100%;
}
.val1, .val2, .val3, .val4, .val5, .val6, .val7{
	display: inline;
}

<!-- introduction des media query pour ramener chaque element à la suite de l'autre-->
@media only screen and (max-width:600px) {
    .gauge{ 
		width:100%;
		height:100%;
		margin: 0px auto 0px auto;
		text-align: center;
		
	}
	.tableau{
		width:100%;
		height:40%;
	}
}
<!---->
</style>
</head>
<body class='default' >
<!-- page d'insertion de la gauge -->
<div data-role="page" id="page1" data-theme="d">
	<div data-role="header" data-theme="b">
	<a data-ajax="false" href="../../application.php"  data-icon="home" >Menu</a>
		<div class="block">
		<h3>RAPPORT SUIVIT COMMERCIAL</h3>
		</div>
	</div>	
	<div data-role="controlgroup" data-type="horizontal">
			<a href="#page2" data-role="button">voir Statut</a>
			<a href="#page3" data-role="button">Ecart Objectif</a>
			<a href="#page4" data-role="button">Activité par jour</a>
	</div>	
		<!----------------------------------------------suivit des commerciaux du modul reporing------------------------------------------------------------>
	<div data-role="content>
		<!----------------------- second block contenant "ecart Objectif"---------------------------------------->
	<pre>
	<b>Commercial</b>: Donvex
	<b>Plan de commissionnement</b>: P_COM_1
	<b>Periodicite</b>: Annuelle
	</pre>
		<!-----------------------fin second block ------------------------------------------------------------------------>	
	</div>	
    <!---------------------------------end entête rappot commercial---------------------------------------------------------------------------->
	<div data-role="content" >
		<!-----------------------premier block contenant "Niveau d'attiente objectif" & "statut"--------------------------->
		<!--------zone d'insertion de la gauge--------------------------->
				<div class="gauge">
					<div class="entete" ><pre><b>Niveau d'attiente objectif</b></pre></div>
					<div id='gauge'></div>
				</div>
		<!--------fin insertion de la gauge--------------------------->		   
				<div class="tableau">
						<div class="entete" ><pre><b></b></pre></div>

							<table border="1"   bordercolor="#385D8A" cellpading="0" cellspacing="0" align="center" bgcolor=#b3e0ff >
								<caption><h2>statut <br> Mercredi 9 Octobre 2013</h2></caption>
								<tr>
									<td><b>REALISE</b> </td><td width="30%">&nbsp <div class="val1">740</div>£</td>
								</tr>	
								<tr>
									<td><b>OBJECTF A DATE</b></td><td>&nbsp <div class="val2">200</div>£</td>
								</tr>	
								<tr>
									<td><b>% D'ATTEINTE A DATE</b></td><td><div class="val3">87</div>%</td>
								</tr>	
								<tr >
									<td colspan="2" align="center"><div class="val4">Octobre 2013</div></td>
								</tr>
								<tr>
									<td><b>OBJECTIF PERIODE</b></td><td><div class="val5">740</div>£</td>
								</tr>
								<tr>
									<td><b>% D'ATTEINTE SUR OCTOBRE 2013</b></td><td><div class="val6">24</div>%</td>
								</tr>
								<tr>
									<td><b>MONTANT DE LA COMMISSION</b></td><td><div class="val7">30</div> &nbsp £</td>
								</tr>
							</table>	
				</div>			
		<div data-role="controlgroup" data-type="horizontal">
			<a href="#page2" data-role="button">voir Statut</a>
			<a href="#page3" data-role="button">Ecart Objectif</a>
			<a href="#page4" data-role="button">Activité par jour</a>
		</div>		
	</div>
	<div data-role="footer">

		 <div data-role="controlgroup" data-type="horizontal" data-mini="true">
				<a href="#commission" data-role="button"   data-theme="b">Mes commissions</a>
				<a href="#rapports" data-role="button"   data-theme="b">Rapports</a>
		</div>
		
    </div>
</div>	
<!-- fin -->

 
<!-- page insertion du diagramme à batton (chart) -->
<div data-role="page3" id="page3" >		
	<div data-role="header" data-theme="d">	
		<a href="#page1" data-role="bouton">Simulation commissions</a>
		<a href="#page4" data-role="bouton">Activité par jour</a>
	</div>
<!---------------------------------partie 2 podium-------------------------------------------------------------------------------->
	<div data-role="content" >
			<!----------------------- second block contenant "ecart Objectif"---------------------------------------->
			
				<div class="entete" >Ecart d'ojectif</div>
				<div class="contenu " style="margin-top: 19px;">
					 <div id='jqxChart' style="width:100%; height:350px;"></div>
					<div class="legende">
						<div class="legende-sup"></div> &nbsp Supplément recalculé<br>
						<div class="legende-obj"></div> &nbsp Objetif initial
					</div>
				</div>
			
			<!-----------------------fin second block ------------------------------------------------------------------------>	
	</div>
</div>
<!-- fin -->

<!-- page insertion de la grid -->
<div data-role="page" id="page4" >	
	<div data-role="header" data-theme="b">	
		<a href="#page1" data-role="bouton" data-theme="d">Simulation commissions</a>
		<a href="#page3" data-role="bouton" data-theme="d">Ecart d'ojectif</a>
	</div>
	
	<div data-role="content" >
		<!----------------------- troisieme block contenant "Activité par jour"---------------------------------------->
		<div class="entete" >Activité par jour</div>
		<!----ajout de la grille jqwidget--->
		<div class="contenu" style="margin-left: 1%; margin-top: 19px;">
			<div id="jqxgrid">
			</div>
		</div>	
		
	</div>
	<!---------------------------------end entête rappot commercial---------------------------------------------------------------------------->
				<!---------------------------------partie 4 rapprot-------------------------------------------------------------------------------->
                        <div data-role="footer"  data-theme="b">
							<!----------------------- quatrieme block contenant "Zone de commentaire sur le rapport"---------------------------------------->
							<div class="entete" >Zone de commentaire sur le rapport</div>
							<p>Les commentaires et discussions relatifs à ce rapport.<br>
								Avec le nom de la personne qui commente, la date et le contenu du commentaire.</p>
							<!------------fin--------------------------------------------------------------------------------------->
							<!----------------------- quatrieme block contenant "Zone de commentaire sur le rapport"---------------------------------------->
							<div class="entete" >Date de dernier rafraichissement : 09/10/2013 à 18:30</div>
							<!------------fin--------------------------------------------------------------------------------------->
                        </div>
                <!---------------------------------end entête rappot commercial---------------------------------------------------------------------------->
</div>
<!-- fin -->
</body>
</html>
    November 28, 2013 at 8:01 am grid and jquery mobil problem #45344

    Dimitar
    Participant

    Hi donvex,

    We tested your example without the custom files you have included (customtheme.min.css, css.css and scriptjquery.js). The page loads correctly the first time. If the file scriptjquery.js is a jQuery file, too, it is possible that the issue is caused by it.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.