jQWidgets Forums

Tagged: datafield, Firefox, grid, jqxgrid, Opera, source

This topic contains 9 replies, has 2 voices, and was last updated by Dimitar 10 years, 8 months ago.

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

Author

Grid shows in Chrome but not in Firefox or Opera Posts

August 27, 2014 at 5:58 am Grid shows in Chrome but not in Firefox or Opera #58830

Participant

Hi all,

I’ve a simple jqxgrid, with a number input and a dropdown list, that is correctly shown in chrome, but not will display in firefox o opera:

$(document).ready(function () {
          
            var source =
            {
                addrow: function (rowid, rowdata, position, commit) {
                    // synchronize with the server - send insert command
                    // call commit with parameter true if the synchronization with the server is successful 
                    //and with parameter false if the synchronization failed.
                    // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
                    commit(true);
                },
                deleterow: function (rowid, commit) {
                    // synchronize with the server - send delete command
                    // call commit with parameter true if the synchronization with the server is successful 
                    //and with parameter false if the synchronization failed.
                    commit(true);
                }
            };
            var srcTipologia = [
                "Pasto - pranzo",
                "Pasto - cena",
                "Biglietto aereo",
                "Biglietto treno",
                "Fee conferenza"
            ];
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 400,
                height: 350,
                //source: dataAdapter,
                editable: true,
                showtoolbar: true,
                rendertoolbar: function (toolbar) {
                    var me = this;
                    var container = $("<div style='margin: 5px;'></div>");
                    toolbar.append(container);
                    container.append('<input id="addrowbutton" type="button" value="Aggiungi voce" />');
                    container.append('<input style="margin-left: 5px;" id="deleterowbutton" type="button" value="Elimina voce selezionata" />');
                    $("#addrowbutton").jqxButton();
                    $("#deleterowbutton").jqxButton();
                    // create new row.
                    $("#addrowbutton").on('click', function () {
                        var commit = $("#jqxgrid").jqxGrid('addrow', null, {});
                    });
                    // delete row.
                    $("#deleterowbutton").on('click', function () {
                        var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                        var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                        if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                            var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                            var commit = $("#jqxgrid").jqxGrid('deleterow', id);
                        }
                    });
                },
                columns: [
                  { text: 'Data', datafield: 'data', columntype: 'datetimeinput', cellsformat: 'dd-MM-yyyy', width: 120 },
                  { text: 'Tipologia', datafield: 'tipologia', columntype: 'dropdownlist', width: 200,
                     initeditor: function (row, cellvalue, editor) {
                          editor.jqxDropDownList({ source: srcTipologia});
                      }
                  },
                  { text: 'Importo', datafield: 'importo', width: 80, cellsalign: 'right', columntype: 'numberinput', cellsformat: 'f2' }
                ]
            });    
        });

can you help me please?

many thanks,

francesco

August 27, 2014 at 12:28 pm Grid shows in Chrome but not in Firefox or Opera #58848

Dimitar

Participant

Hello francesco,

Your source does not point to any data and has no datafields defined. These are essential for the grid. We suggest you look at the online demos to see how to set up your grid source correctly.

Best Regards,
Dimitar

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

August 28, 2014 at 7:06 am Grid shows in Chrome but not in Firefox or Opera #58867

ftaurino

Participant

hi dimitar,

and thank you for the answer.

this is an empty grid and I don’t need any real source.
only when a user need to modify a grid, I load the rows
in the ready part with a .getJSON.

any idea?

thanks,

francesco

August 28, 2014 at 7:15 am Grid shows in Chrome but not in Firefox or Opera #58869

Dimitar

Participant

Hi francesco,

You may not need the data itself, but you still need datafields which specify what kind of data will be loaded in the grid. These also correspond to columns in your grid (via the columns’ datafield property).

Best Regards,
Dimitar

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

September 24, 2014 at 9:40 am Grid shows in Chrome but not in Firefox or Opera #59978

ftaurino

Participant

hi dimitar,

even with this js, the grid does not show up in firefox, but work
flawlessly in chrome:

<script type="text/javascript">
               $(document).ready(function () {

            var source =
            {
                             datafields: [
                    { name: 'id', type: 'int' },
                    { name: 'data', type: 'text' },
                    { name: 'tipologia', type: 'text' },
                    { name: 'importo', type: 'float' }
                ]
            };
            var srcTipologia = [
                "Pasto - pranzo",
                "Pasto - cena",
                "Biglietto aereo",
                "Biglietto treno",
                "Fee conferenza"
            ];
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 450,
                theme: 'energyblue',
                height: 350,
                source: dataAdapter,
                editable: true,
                showtoolbar: true,
                showstatusbar: true,
                statusbarheight: 50,
                showaggregates: true,
                rendertoolbar: function (toolbar) {
                    var me = this;
                    var container = $("<div style='margin: 5px;'></div>");
                    toolbar.append(container);
                    container.append('<input id="addrowbutton" type="button" value="Aggiungi voce" />');
                    container.append('<input style="margin-left: 5px;" id="deleterowbutton" type="button" value="Elimina voce selezionata" />');
                        $("#addrowbutton").jqxButton();
                    $("#deleterowbutton").jqxButton();
                    // create new row.
                    $("#addrowbutton").on('click', function () {
                        var commit = $("#jqxgrid").jqxGrid('addrow', null, {});
                    });
                    // delete row.
                    $("#deleterowbutton").on('click', function () {
                        var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                        var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                        if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                            var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                            var commit = $("#jqxgrid").jqxGrid('deleterow', id);
                        }
                    });
                },
                ready: function () {
                    $("#jqxgrid").jqxGrid('hideColumn', 'id');
                 },
                columns: [
                  { text: 'id', datafield: 'id', width: 50 },
                  { text: 'Data (gg/mm/aaaa)', datafield: 'data', columntype: 'text', width: 150,
                    initeditor: function (row, cellvalue, editor) {
                        editor.jqxMaskedInput({ mask: '[0-3][0-9]/[0-1][0-9]/[1-2]###' });
                     }                                      
                  },
                  { text: 'Tipologia', datafield: 'tipologia', columntype: 'dropdownlist', width: 200,
                     initeditor: function (row, cellvalue, editor) {
                          editor.jqxDropDownList({ source: srcTipologia});
                      }
                  },
                  { text: 'Importo', datafield: 'importo', width: 100, cellsalign: 'right', columntype: 'numberinput', aggregates: ['sum'],
                    initeditor: function (row, cellvalue, editor) {
                        editor.jqxNumberInput({ decimalDigits: 2, decimalSeparator: '.', min: 0 });
                     }     
                   }
                  ]
            });    
            
//           DATA SENT IN VALIDATION FORM !

        });            </script>

September 24, 2014 at 9:58 am Grid shows in Chrome but not in Firefox or Opera #59983

Dimitar

Participant

Hi ftaurino,

We tested your code and it runs fine on both Firefox and Chrome. You may be missing some of the necessary references to script files. Please check out the complete code and make sure you are using the latest version of jQWidgets (3.5.0):

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.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/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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source =
            {
                datafields: [
                    { name: 'id', type: 'int' },
                    { name: 'data', type: 'text' },
                    { name: 'tipologia', type: 'text' },
                    { name: 'importo', type: 'float' }
                ]
            };
            var srcTipologia = [
                "Pasto - pranzo",
                "Pasto - cena",
                "Biglietto aereo",
                "Biglietto treno",
                "Fee conferenza"
            ];
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 450,
                theme: 'energyblue',
                height: 350,
                source: dataAdapter,
                editable: true,
                showtoolbar: true,
                showstatusbar: true,
                statusbarheight: 50,
                showaggregates: true,
                rendertoolbar: function (toolbar) {
                    var me = this;
                    var container = $("<div style='margin: 5px;'></div>");
                    toolbar.append(container);
                    container.append('<input id="addrowbutton" type="button" value="Aggiungi voce" />');
                    container.append('<input style="margin-left: 5px;" id="deleterowbutton" type="button" value="Elimina voce selezionata" />');
                    $("#addrowbutton").jqxButton();
                    $("#deleterowbutton").jqxButton();
                    // create new row.
                    $("#addrowbutton").on('click', function () {
                        var commit = $("#jqxgrid").jqxGrid('addrow', null, {});
                    });
                    // delete row.
                    $("#deleterowbutton").on('click', function () {
                        var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                        var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                        if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                            var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                            var commit = $("#jqxgrid").jqxGrid('deleterow', id);
                        }
                    });
                },
                ready: function () {
                    $("#jqxgrid").jqxGrid('hideColumn', 'id');
                },
                columns: [
                  { text: 'id', datafield: 'id', width: 50 },
                  { text: 'Data (gg/mm/aaaa)', datafield: 'data', columntype: 'text', width: 150,
                      initeditor: function (row, cellvalue, editor) {
                          editor.jqxMaskedInput({ mask: '[0-3][0-9]/[0-1][0-9]/[1-2]###' });
                      }
                  },
                  { text: 'Tipologia', datafield: 'tipologia', columntype: 'dropdownlist', width: 200,
                      initeditor: function (row, cellvalue, editor) {
                          editor.jqxDropDownList({ source: srcTipologia });
                      }
                  },
                  { text: 'Importo', datafield: 'importo', width: 100, cellsalign: 'right', columntype: 'numberinput', aggregates: ['sum'],
                      initeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ decimalDigits: 2, decimalSeparator: '.', min: 0 });
                      }
                  }
                  ]
            });

            //           DATA SENT IN VALIDATION FORM !

        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

September 25, 2014 at 11:52 am Grid shows in Chrome but not in Firefox or Opera #60047

ftaurino

Participant

hi dimitar,

even with the 3.5 version, on firefox 32 on linux and windows, this page does not work.
I’ve included these js and css:

<!– jqwidgets… –>
<link href=”{{ @BASE }}/ui/js/jqwidgets/styles/jqx.base.css” rel=”stylesheet” media=”screen”>
<link href=”{{ @BASE }}/ui/js/jqwidgets/styles/jqx.energyblue.css” rel=”stylesheet” media=”screen”>
<script type=”text/javascript” src=”{{ @BASE }}/ui/js/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”{{ @BASE }}/ui/js/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”{{ @BASE }}/ui/js/jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”{{ @BASE }}/ui/js/jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”{{ @BASE }}/ui/js/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”{{ @BASE }}/ui/js/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”{{ @BASE }}/ui/js/jqwidgets/jqxdatatable.js”></script>
<script type=”text/javascript” src=”{{ @BASE }}/ui/js/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”{{ @BASE }}/ui/js/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”{{ @BASE }}/ui/js/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”{{ @BASE }}/ui/js/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”{{ @BASE }}/ui/js/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”{{ @BASE }}/ui/js/jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”{{ @BASE }}/ui/js/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”{{ @BASE }}/ui/js/jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”{{ @BASE }}/ui/js/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”{{ @BASE }}/ui/js/jqwidgets/jqxgrid.grouping.js”></script>
<script type=”text/javascript” src=”{{ @BASE }}/ui/js/jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”{{ @BASE }}/ui/js/jqwidgets/jqxnumberinput.js”></script>
<script type=”text/javascript” src=”{{ @BASE }}/ui/js/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”{{ @BASE }}/ui/js/jqwidgets/jqxmaskedinput.js”></script>
<script type=”text/javascript” src=”{{ @BASE }}/ui/js/jqwidgets/jqxgrid.aggregates.js”></script>
<!– fine jqwidgets… –>

“@BASE” is correctly expanded in my framewor and all files are downloaded in the browsers.
also, no errors show up in the developer console. perhaps the order of js loading can change
the final rendering?

thx,
francesco

September 25, 2014 at 12:12 pm Grid shows in Chrome but not in Firefox or Opera #60051

Dimitar

Participant

Hi francesco,

You also have to include the jQuery script (before jqxcore.js).

Best Regards,
Dimitar

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

September 26, 2014 at 6:12 am Grid shows in Chrome but not in Firefox or Opera #60111

ftaurino

Participant

hi,

this is only for jqxwidgets scripts. jquery and other js are included before these lines:

 
  <link href="{{ @BASE }}/ui/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
  <link href="{{ @BASE }}/ui/css/form-legend.css" rel="stylesheet" media="screen">
  <link href="{{ @BASE }}/ui/css/toastr.min.css" rel="stylesheet" media="screen">
             
  <script src="{{ @BASE }}/ui/js/jquery-2.1.1.min.js"></script>
  <script src="{{ @BASE }}/ui/bootstrap/js/bootstrap.js"></script>
  <script src="{{ @BASE }}/ui/js/toastr.min.js"></script>
  <script src="{{ @BASE }}/ui/js/jqBootstrapValidation.js"></script>

thx,

francesco

September 26, 2014 at 6:18 am Grid shows in Chrome but not in Firefox or Opera #60113

Dimitar

Participant

Hi francesco,

Are you sure all scripts are correctly loaded and that there are no console errors thrown? If everything is all right, there may be an issue with your HTML. Also, do you experience any issues with our version of your example?

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.