[ftaurinoParticipant]

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

[ftaurinoParticipant]

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

[ftaurinoParticipant]

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>

[ftaurinoParticipant]

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

[Author]

Posts