jQWidgets Forums

Tagged: datagrid control, jqwidgets datagrid, ui datagrid

This topic contains 5 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 6 months ago.

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

Author

Validation Error Message is hidden if autoheight: true and only 1 row. Posts

September 10, 2013 at 9:36 pm Validation Error Message is hidden if autoheight: true and only 1 row. #28721

Participant

Hi,

I enabled autoheight: true and editable: true. When the grid has only one row, the validation message is hidden above the editing cell (behind the column header ). If I add one more row, the message is visible. Is there a workaround? Thanks!

September 11, 2013 at 4:16 am Validation Error Message is hidden if autoheight: true and only 1 row. #28732

Peter Stoev

Keymaster

Hi kevin,

Do you use jQWidgets ver. 3.0.2?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 11, 2013 at 6:26 pm Validation Error Message is hidden if autoheight: true and only 1 row. #28799

kevin_wkw

Participant

Hi Peter,
Yes, I also tested on \jqwidgets-ver3.0.2\demos\jqxgrid\editrowsrendering.htm.
I changed the var data = generatedata(1); and added autoheight: true to the grid. When I edited the “Quantity” to 888, the error message “Quantity should be in the 0-150 interval” is hidden behind the column header.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>The sample illustrates how to style the edited rows and keep their values in an Array.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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.sort.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/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <style type="text/css">
        .editedRow {
          color: #b90f0f;
          font-style: italic;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            // prepare the data
            var data = generatedata(1);
            // array which keeps the indexes of the edited rows.
            var editedRows = new Array();
            var source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata, commit) {
                    // that function is called after each edit.
                    var rowindex = $("#jqxgrid").jqxGrid('getrowboundindexbyid', rowid);          
                    editedRows.push({ index: rowindex, data: rowdata });
                    // 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: '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);
            var cellclass = function (row, datafield, value, rowdata) {
                for (var i = 0; i < editedRows.length; i++) {
                    if (editedRows[i].index == row) {
                        return "editedRow";
                    }
                }
            }
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 685,
                autoheight: true,
                source: dataAdapter,
                editable: true,
                theme: theme,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'First Name', columntype: 'textbox', cellclassname: cellclass, datafield: 'firstname', width: 80 },
                  { text: 'Last Name', datafield: 'lastname', cellclassname: cellclass, columntype: 'textbox', width: 80 },
                  { text: 'Product', columntype: 'dropdownlist', cellclassname: cellclass, datafield: 'productname', width: 195 },
                  { text: 'Available', datafield: 'available', cellclassname: cellclass, columntype: 'checkbox', width: 67 },
                  {
                      text: 'Ship Date', datafield: 'date', cellclassname: cellclass, columntype: 'datetimeinput', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'd',
                  validation: function (cell, value) {
                          if (value == "")
                             return true;
                          var year = value.getFullYear();
                          if (year >= 2014) {
                              return { result: false, message: "Ship Date should be before 1/1/2014" };
                          }
                          return true;
                      }
                  },
                  {
                      text: 'Quantity', datafield: 'quantity', cellclassname: cellclass, 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', cellclassname: cellclass, 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 });
                      }
                  }
                ]
            });
        });
    </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>

September 11, 2013 at 7:26 pm Validation Error Message is hidden if autoheight: true and only 1 row. #28807

Peter Stoev

Keymaster

Hi kevin_wkw,

Actually, we do have a work item reported about another user for the same situation. It will be resolved in the next release which is expected on 30th September.

Best Regards,
Peter Stoev

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

October 14, 2013 at 8:58 pm Validation Error Message is hidden if autoheight: true and only 1 row. #30704

kevin_wkw

Participant

Hi,

It is still very buggy. The validation message is hidden on the first column. Also, if the error message is too long, it will be hidden as well on other columns. I am using the latest 3.03 version. Please fix this asap, validation is very important to my clients. Thank you!!

Here is the sample code. If you add higer values (200+) for ‘Price’ and/or ‘Quality’ column and hit etner, you’ll see what I mean.


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>The sample illustrates how to style the edited rows and keep their values in an Array.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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.sort.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/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <style type="text/css">
        .editedRow {
          color: #b90f0f;
          font-style: italic;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            // prepare the data
            var data = generatedata(1);
            // array which keeps the indexes of the edited rows.
            var editedRows = new Array();
            var source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata, commit) {
                    // that function is called after each edit.
                    var rowindex = $("#jqxgrid").jqxGrid('getrowboundindexbyid', rowid);          
                    editedRows.push({ index: rowindex, data: rowdata });
                    // 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: '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);
            var cellclass = function (row, datafield, value, rowdata) {
                for (var i = 0; i < editedRows.length; i++) {
                    if (editedRows[i].index == row) {
                        return "editedRow";
                    }
                }
            }
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 685,
                source: dataAdapter,
                autoheight: true,
                editable: true,
                theme: theme,
                selectionmode: 'multiplecellsadvanced',                
                columns: [
{
                      text: 'Quantity', datafield: 'quantity', cellclassname: cellclass, 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: 'First Name', columntype: 'textbox', cellclassname: cellclass, datafield: 'firstname', width: 80},
                {
                    text: 'Price', datafield: 'price', cellclassname: cellclass, 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 });
                    }
                },
                  { text: 'Last Name', datafield: 'lastname', cellclassname: cellclass, columntype: 'textbox', width: 80 },
                  { text: 'Product', columntype: 'dropdownlist', cellclassname: cellclass, datafield: 'productname', width: 195 },
                  { text: 'Available', datafield: 'available', cellclassname: cellclass, columntype: 'checkbox', width: 67 },
                  {
                      text: 'Ship Date', datafield: 'date', cellclassname: cellclass, columntype: 'datetimeinput', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'd',
                  validation: function (cell, value) {
                          if (value == "")
                             return true;
                          var year = value.getFullYear();
                          if (year >= 2014) {
                              return { result: false, message: "Ship Date should be before 1/1/2014" };
                          }
                          return true;
                      }
                  }
                  
                ]
            });
        });
    </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>

October 15, 2013 at 5:13 am Validation Error Message is hidden if autoheight: true and only 1 row. #30716

Peter Stoev

Keymaster

Hi kevin_wkw,

The validation message should be always displayed in the Grid and it is restricted by the Grid’s bounds. There is nothing to be fixed on this side and it works as expected. We cannot do anything when there is not enough available space for the validation message in the Grid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.