jQuery UI Widgets Forums Grid problem

This topic contains 18 replies, has 2 voices, and was last updated by  nico86 9 years, 1 month ago.

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    problem Posts
  • problem #70704

    nico86
    Participant

    Hi
    I think there is a compatibilty probleme with jqxgrid (dropdownlist ?) and internet explorer 8 .
    This problem also exists in your demos. For exemple cell cellediting.htm

    Thanks

    bug1

    • This topic was modified 9 years, 1 month ago by  nico86.
    • This topic was modified 9 years, 1 month ago by  nico86.
    • This topic was modified 9 years, 1 month ago by  nico86.
    problem #70754

    Dimitar
    Participant

    Hi nico86,

    We tested our online demo (version 3.8.0) cellediting.htm with Internet Explorer 8. There were no errors thrown and the demonstrated functionality works fine. Please make sure you have downloaded the latest version and if necessary, re-download it and add the jQWidgets files to your project again.

    Best Regards,
    Dimitar

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

    problem #70773

    nico86
    Participant

    I have redownload the widget, and same problem :
    for example , with the cellediting demo feile the problem appears when i double-click on a cell of the column product

    thanks.

    • This reply was modified 9 years, 1 month ago by  nico86.
    problem #70783

    Dimitar
    Participant

    Hi nico86,

    Do you experience this issue with the online demo?

    Best Regards,
    Dimitar

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

    problem #70790

    nico86
    Participant

    i can’t tell you because on my company on my workstation I have no internet…And on other post i have IE11…but i I am obliged to work with IE8.
    and you have you test when you click on the cell of the column product ?

    thanks

    problem #70818

    Dimitar
    Participant

    Hi nico86,

    We were able to reproduce this issue but with Internet Explorer 7, not 8. The error states: “Invalid property value.” and is related to the unsupported use of the inherit CSS keyword. It is, however, supported in Internet Explorer 8 and the issue should not occur there.

    Best Regards,
    Dimitar

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

    problem #70933

    nico86
    Participant

    very strange, is it possible is due to IE setting ? but which setting ?

    🙁

    problem #70955

    Dimitar
    Participant

    Hi nico86,

    This may happen if your browser is in Quirks mode.

    Best Regards,
    Dimitar

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

    problem #70967

    nico86
    Participant

    I have tried jqxdropdownlist.js instead of from 3.7.1 into 3.8 and all work fine, what is the difference. ?

    thanks.

    problem #70980

    nico86
    Participant

    all demo from jqxdropdownlist have the same problem, i dont know if IE8 is in quirks mode but how to fix it ?
    Thanks

    • This reply was modified 9 years, 1 month ago by  nico86.
    • This reply was modified 9 years, 1 month ago by  nico86.
    problem #70986

    Dimitar
    Participant

    Hi nico86,

    This issue occurs only in IE7 and probably IE8 in Quirks mode. You can read this Stack Overflow topic to learn how to switch this browser mode off: http://stackoverflow.com/questions/20594749/how-to-disable-quirk-mode. The issue itself will be fixed in version 3.8.1 of jQWidgets.

    Best Regards,
    Dimitar

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

    problem #70994

    nico86
    Participant

    thanks, i succeed in turn off this option. it was “compatibility mode for intranet sites”

    problem #71238

    nico86
    Participant

    Hi,
    Sometimes, when i navigate into my large grid, I have a new problem with IE 8 (with IE8 borwser mode and IE document mode)
    Some columns are not displayed and i have a javascript problem (see screen below)

    Does parentNode use into jqxgrid is compatible with IE8 ?

    Capture

    thanks

    Nicolas.

    • This reply was modified 9 years, 1 month ago by  nico86.
    problem #71249

    Dimitar
    Participant

    Hi Nicolas,

    Do you experience this issue with any of the grid demos? If not, could you, please, provide us with a JSFiddle we can test to reproduce it?

    Best Regards,
    Dimitar

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

    problem #71279

    nico86
    Participant

    Hi,
    I need to make one example.

    I have used your demo file cellediting.html, and i just add four columns (a,b,c,d,e)
    when I scroll to the right, missing columns (availaible , quantity , price , date)

    Capture1

    then when i scroll to left the colums a, b, c, d, e have become blank.

    Capture2

    Thanks.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>In order to enter in edit mode, select a grid cell and start typing, "Click" or press the "F2" key. You 
        can also navigate through the cells using the keyboard arrows or with the "Tab" and "Shift + Tab" key combinations. To cancel the cell editing, press the "Esc" key. To save
        the changes press the "Enter" key or select another Grid cell. Pressing the 'Space' key when a checkbox cell is selected will toggle the check state.</title>
        <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/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>  
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.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/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var data = generatedata(200);
                var source =
                {
                    localdata: data,
                    datatype: "array",
                    updaterow: function (rowid, rowdata, commit) {
                        // synchronize with the server - send update command
                        // call commit with parameter true if the synchronization with the server is successful 
                        // and with parameter false if the synchronization failder.
                        commit(true);
                    },
                    datafields:
                    [
                        { name: 'a', type: 'string' },
                        { name: 'b', type: 'string' },
                        { name: 'c', type: 'string' },
                        { name: 'd', type: 'string' },
                        { name: 'e', type: 'string' },
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'available', type: 'bool' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' },
                        { name: 'date', type: 'date' }
                    ]
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    source: dataAdapter,
                    editable: true,
                    enabletooltips: true,
                    selectionmode: 'multiplecellsadvanced',
                    columns: [
                      { text: 'a', columntype: 'textbox', datafield: 'a', width: 120 },
                      { text: 'b', columntype: 'textbox', datafield: 'b', width: 120 },
                      { text: 'c', columntype: 'textbox', datafield: 'c', width: 120 },
                      { text: 'd', columntype: 'textbox', datafield: 'd', width: 120 },
                      { text: 'e', columntype: 'textbox', datafield: 'e', width: 120 },
                      
                      { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 120 },
                      { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 120 },
                      { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195 },
                      { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
                      {
                          text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'd',
                      validation: function (cell, value) {
                              if (value == "")
                                 return true;
                              var year = value.getFullYear();
                              if (year >= 2015) {
                                  return { result: false, message: "Ship Date should be before 1/1/2015" };
                              }
                              return true;
                          }
                      },
                      {
                          text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right', columntype: 'numberinput',
                          validation: function (cell, value) {
                              if (value < 0 || value > 150) {
                                  return { result: false, message: "Quantity should be in the 0-150 interval" };
                              }
                              return true;
                          },
                          createeditor: function (row, cellvalue, editor) {
                              editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
                          }
                      },
                      { text: 'Price', datafield: 'price', align: 'right', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
                          validation: function (cell, value) {
                              if (value < 0 || value > 15) {
                                  return { result: false, message: "Price should be in the 0-15 interval" };
                              }
                              return true;
                          },
                          createeditor: function (row, cellvalue, editor) {
                              editor.jqxNumberInput({ digits: 3 });
                          }
                      }
                    ]
                });
                // events
                $("#jqxgrid").on('cellbeginedit', function (event) {
                    var args = event.args;
                    $("#cellbegineditevent").text("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
                });
                $("#jqxgrid").on('cellendedit', function (event) {
                    var args = event.args;
                    $("#cellendeditevent").text("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxgrid"></div>
            <div style="font-size: 12px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif; margin-top: 30px;">
                <div id="cellbegineditevent"></div>
                <div style="margin-top: 10px;" id="cellendeditevent"></div>
           </div>
        </div>
    </body>
    </html>
    • This reply was modified 9 years, 1 month ago by  nico86.
    • This reply was modified 9 years, 1 month ago by  nico86.
Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.