jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Problem with Internet Explorer 10

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 10 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Problem with Internet Explorer 10 Posts
  • July 11, 2014 at 6:42 pm Problem with Internet Explorer 10 #57091

    joyce973
    Participant

    Hi,
    I’m having some problems with IE 10 with a Grid: it does not load any data.
    The same code works fine with Chrome and Firefox.
    I have no idea why.
    Can you help me, please?

    Here is my code:

    <!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">
<html lang="it">
 
 <link rel="stylesheet" href="jq/styles/jqx.base.css" type="text/css" />
<body>
<center>
<div id="jqxWidget">
<div id="jqxgrid" style="font-size: 11px; font-family: Verdana; float: left;"></div>
        						<div style="width: 200px; float: left; margin-right: 10px;">
           							<!-- <input value="Remove Filter" id="clearfilteringbutton" type="button" />-->
            						<div style="margin-top: 10px;" id='filterbackground'><!--Filter Background--></div>
            						<div style="margin-top: 10px;" id='filtericons'><!--Show All Filter Icons--></div>
            					</div>                     
</div>               					
</center>           
 </body>
 </html>
 <style>
        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
     
<script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="jq/jqxcore.js"></script>
    <script type="text/javascript" src="jq/jqxtree.js"></script>
    <script type="text/javascript" src="jq/jqxsplitter.js"></script>
    <script type="text/javascript" src="jq/jqxbuttons.js"></script>
    <script type="text/javascript" src="jq/jqxpanel.js"></script>
    <script type="text/javascript" src="jq/jqxlistbox.js"></script>
    <script type="text/javascript" src="jq/jqxexpander.js"></script>
    <script type="text/javascript" src="jq/jqxscrollbar.js"></script>
    <script type="text/javascript" src="scripts/demos.js"></script>
    <script type="text/javascript" src="funzioni.js"></script>
    <script type="text/javascript" src="jq/jqxdata.js"></script> 
    <script type="text/javascript" src="jq/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jq/jqxmenu.js"></script>
    <script type="text/javascript" src="jq/jqxgrid.js"></script>
    <script type="text/javascript" src="jq/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="jq/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="jq/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="jq/jqxpanel.js"></script>
    <script type="text/javascript" src="jq/globalization/globalize.js"></script>
    <script type="text/javascript" src="jq/jqxcalendar.js"></script>
    <script type="text/javascript" src="jq/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="jq/jqxcheckbox.js"></script>
    <script type="text/javascript" src="scripts/demos.js"></script>
    <script type="text/javascript" src="jq/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="jq/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="jq/jqxgrid.export.js"></script>   
    <script type="text/javascript" src="jq/jqxdata.export.js "></script>       
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript" src="jq/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="jq/jqxcheckbox.js"></script>
    <script type="text/javascript" src="jq/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="jq/jqxtabs.js"></script>
    <script type="text/javascript" src="jq/jqxinput.js"></script>
    <script type="text/javascript" src="scripts/jquery.validate.min.js"></script>
    <script type="text/javascript" src="jq/jqxcombobox.js"></script> 
     <script type="text/javascript" src="jq/jqxgrid.edit.js"></script> 
     <script type="text/javascript" src="jq/jqxeditor.js"></script>
			<script>
			 
			<%
			idCat= request.QueryString("idCat")
			idSubCat= request.QueryString("idSubCat")
			nomeCat= request.QueryString("nomeCat")
			nomeSubCat= request.QueryString("nomeSubCat")
			idSelCat= request.QueryString("idSelCat")
			nomeSelCat= request.QueryString("nomeSelCat")
			%>
            var url = "assets.asp?idCat=<%=idCat%>&idSubCat=<%=idSubCat%>";
			//var url ="assets.txt";
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'id', type: 'string' },		
					{ name: 'codice', type: 'string' },
                    { name: 'nome', type: 'string' },
                    { name: 'disponibilita', type: 'string' },
                    { name: 'stato', type: 'string' },
                    { name: 'localita', type: 'string' }
                ],
                id: 'id',
                url: url
            };
			var addfilter = function () {
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filtervalue = '';
                var filtercondition = 'contains';
                var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                filtervalue = '';
                filtercondition = 'starts_with';
                var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
 
                filtergroup.addfilter(filter_or_operator, filter1);
                filtergroup.addfilter(filter_or_operator, filter2);
                // add the filters.
                $("#jqxgrid").jqxGrid('addfilter', 'firstname', filtergroup);
                // apply the filters.
                $("#jqxgrid").jqxGrid('applyfilters');
				$("#jqxgrid").jqxGrid({ autoshowfiltericon: false });
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            
			var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                return '<span style="margin: 4px; margin-right: 10px; font-size: 11px; float: ' + columnproperties.cellsalign + ';">' + value + '</span>';
            }
		
			$("#jqxgrid").jqxGrid(
            {
                
				width: '98%',
				height: '370px',
                //autoheight:true,
				source: dataAdapter,
				showfilterrow: true,
                filterable: true,
                sortable: true,
                columnsresize: true,
				pageable: true,
				//filtermode: 'excel',
				localization: getLocalization('en'),
				autoshowfiltericon: true,
				statusbarheight: 28,
				autoheight: true,
				rowsheight: 20,
				//columnsheight:'30px',
				showstatusbar: true,
                renderstatusbar: function (statusbar) {
                    // appends buttons to the status bar.
                    var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
                    var esporta = $("<div style='float: right; margin-left: 5px;'><span style='margin-left: 4px; position: relative; top: 0px; font-size: 11px;'>Esporta</span></div>");
                    var stampa = $("<div style='float: right; margin-left: 5px;'><span style='margin-left: 4px; position: relative; top: 0px; font-size: 11px;'>Stampa</span></div>");
                    container.append(esporta);
                    container.append(stampa);
                    statusbar.append(container);
                    esporta.jqxButton({  width: 60, height: 12 });
                    stampa.jqxButton({  width: 65, height: 12 });
                    
                    // esporta
                    esporta.click(function (event) {
                        $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid'); 
                    });
                    // stampa
                    stampa.click(function (event) {
                        var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
                		var newWindow = window.open('', '', 'width=800, height=500'),
                		document = newWindow.document.open(),
               			pageContent =
                    		'<!DOCTYPE html>\n' +
                    		'<html>\n' +
                    		'<head>\n' +
                    		'<meta charset="utf-8" />\n' +
                    		'<title>Stampa</title>\n' +
                    		'</head>\n' +
                    		'<body>\n' + gridContent + '\n</body>\n</html>';
                			document.write(pageContent);
                			document.close();
                			newWindow.print();
                   			 });
                   
               			 },
				
                columns: [
                  { text: 'N° scheda', datafield: 'id', filtertype: 'textbox', width: 100, cellsrenderer: cellsrenderer },
				  { text: 'Codice', datafield: 'codice', filtertype: 'textbox', width: 100, cellsrenderer: cellsrenderer },
                  { text: 'Nome', datafield: 'nome', filtertype: 'textbox', width: 250, cellsrenderer: cellsrenderer },
                  { text: 'Disponibilità', datafield: 'disponibilita', filtertype: 'checkedlist', filterable: true, width: 180, cellsrenderer: cellsrenderer },
                  { text: 'Stato', datafield: 'stato', filtertype: 'checkedlist', filterable: true, width: 120, cellsrenderer: cellsrenderer },
                  { text: 'Località', datafield: 'localita', filtertype: 'textbox', minwidth: 120, cellsrenderer: cellsrenderer }
              ],
			  			ready: function () {
                    		//$('#jqxgrid').jqxGrid('hidecolumn', 'id');
							addfilter();
							//ricarica(1,19);
                		},
            });
			 

			//$('#events').jqxPanel({ width: 300, height: 80});
            $("#jqxgrid").on("filter", function (event) {
               // $("#events").jqxPanel('clearcontent');
                var filterinfo = $("#jqxgrid").jqxGrid('getfilterinformation');
                var eventData = "Triggered 'filter' event";
                for (i = 0; i < filterinfo.length; i++) {
                    //var eventData = "Filter Column: " + filterinfo[i].filtercolumntext;
                    //$('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
                }
            });
           
            $('#clearfilteringbutton').click(function () {
                $("#jqxgrid").jqxGrid('clearfilters');
            });
            // show/hide filter background
            $('#filterbackground').on('change', function (event) {
                $("#jqxgrid").jqxGrid({ showfiltercolumnbackground: event.args.checked });
            });
            // show/hide filter icons
            $('#filtericons').on('change', function (event) {
                $("#jqxgrid").jqxGrid({ autoshowfiltericon: !event.args.checked });
            });
			$("#jqxgrid").on("pagechanged", function (event) {
               
            });
            $("#jqxgrid").on("pagesizechanged", function (event) {
                //$("#eventslog").css('display', 'block');
                //$("#events").jqxPanel('clearcontent');
                //var args = event.args;
                //var eventData = "pagesizechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + ", Old Page Size: " + args.oldpagesize + "</div>";
                //$('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
                // get page information.          
                //var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
                //$('#paginginfo').html("<div style='margin-top: 5px;'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount + "</div>");
            });
			
			$("#jqxgrid").on('rowselect', function (event) {
				var idScheda = $('#jqxgrid').jqxGrid('getcellvalue', event.args.rowindex, "id");
				apriScheda(idScheda);
            });
</script>
    July 12, 2014 at 4:29 am Problem with Internet Explorer 10 #57096

    Peter Stoev
    Keymaster

    Hi joyce973,

    Check your code for Syntax errors. IE is more strict about them.

    Best Regards,
    Peter Stoev

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

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

You must be logged in to reply to this topic.