jQWidgets Forums

Forum Replies Created

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

Author

Posts

October 14, 2013 at 8:58 pm in reply to: Validation Error Message is hidden if autoheight: true and only 1 row. 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>

September 12, 2013 at 8:25 pm in reply to: Customize header column Customize header column #28888

kevin_wkw

Participant

I’d like to see the demo too. Where it is at?

September 11, 2013 at 6:26 pm in reply to: Validation Error Message is hidden if autoheight: true and only 1 row. 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>

July 23, 2013 at 4:40 pm in reply to: Combine Gird + Virtual Scoll + Group + Soring Combine Gird + Virtual Scoll + Group + Soring #25632

kevin_wkw

Participant

Thanks Peter.

July 23, 2013 at 4:38 pm in reply to: Object doesn't support property or method 'toUpperCase' Object doesn't support property or method 'toUpperCase' #25631

kevin_wkw

Participant

Thanks Peter. It was my mistake. I am good now.

July 16, 2013 at 8:23 pm in reply to: Object doesn't support property or method 'toUpperCase' Object doesn't support property or method 'toUpperCase' #25281

kevin_wkw

Participant

Thanks. I removed ‘,’ and replaced it with ‘int’. However, I still have the same error. The JSON data is below.

var source =
        {
            datatype: 'json',
            datafields: [
                { name: 'Field', type: 'string' },
                { name: 'FieldId', type: 'int' }
            ],
            url: '/Fields/FetchItems/'
        };
        var dataAdapter = new $.jqx.dataAdapter(source);
        // Create a jqxInput
        $("#input_field").jqxInput({ source: dataAdapter, placeHolder: "Enter:", displayMember: "Field", valueMember: "FieldId", theme: theme });
        $("#input_field").on('select', function (event) {
            if (event.args) {
                var item = event.args.item;
                if (item) {
                    var valueelement = $("<div></div>");
                    valueelement.text("Value: " + item.value);
                    var labelelement = $("<div></div>");
                    labelelement.text("Label: " + item.label);
                    $("#selectionlog").children().remove();
                    $("#selectionlog").append(labelelement);
                    $("#selectionlog").append(valueelement);
                }
            }
        });

Json Test Data :
[{“FieldId”:0,”Field”:”Action Field 0″},{“FieldId”:1,”Field”:”Action Field 1″},{“FieldId”:2,”Field”:”Action Field 2″},{“FieldId”:3,”Field”:”Action Field 3″},{“FieldId”:4,”Field”:”Action Field 4″},{“FieldId”:5,”Field”:”Action Field 5″},{“FieldId”:6,”Field”:”Action Field 6″},{“FieldId”:7,”Field”:”Action Field 7″},{“FieldId”:8,”Field”:”Action Field 8″},{“FieldId”:9,”Field”:”Action Field 9″}]

July 5, 2013 at 11:47 pm in reply to: Combine Gird + Virtual Scoll + Group + Soring Combine Gird + Virtual Scoll + Group + Soring #24616

kevin_wkw

Participant

Just found out virtual mode require paging for grouping to work. Is there a way not to enable paging and still make virtual mode and grouping work?

Author

Posts

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