jQWidgets Forums

Tagged: datagrid validation, jquery datagrid, jqxgrid validation

This topic contains 8 replies, has 3 voices, and was last updated by Peter Stoev 12 years, 4 months ago.

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

Author

Validation message pop-up Posts

October 5, 2012 at 12:14 pm Validation message pop-up #8981

mrkozanoglu

Member

Hi,

I have an editable grid and when necessary I update the grid data like this:

source.localdata = data;
$(“#jqxgrid”).jqxGrid({ source: source });

Before updating everything works fine. When I update the grid like this, it checks the cell value and doesn’t accept it if it’s not valid but there’s a problem; validation message doesn’t pop up anymore. I think it’s a display issue. What can I do about it?

Thanks.

October 5, 2012 at 12:21 pm Validation message pop-up #8982

Peter Stoev

Keymaster

Hi mrkozanoglu,

In order to update the Grid’s source, you need to set the Grid’s source property to point to an instance of jqxDataAdapter.

Example:

   var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });

Validation messages pop up only if the data is not valid. Not sure what’s your scenario and data from the provided information. Could you please, provide step by step instructions and a small sample which demonstrates your scenario and reproduces the reported behavior?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 5, 2012 at 12:42 pm Validation message pop-up #8983

mrkozanoglu

Member

Hi,

I have a combo box and the grid’s data completely changes according to the selection of the combo box. When a combo box selection happens I update the grid data with new data as I said before. This way I create the table only once and just update the grid source when necessary. I set the grid’s source property when I create the table at the beginning.

As I said the validation works same as before. For example I have a maximum number value that can be entered to a cell. When the value is higher than 100 it’s invalid and the grid doesn’t accept it anymore as it should be and prevents editing other cells. But the validation message that I use to warn the user doesn’t pop up anymore.

Example code is something like this:

$(“#selectionBox”).change(function() {

var tableData = ….. // some new data that I get from database;

source.localdata = tableData; // source is the grid’s source property that points to jqxDataAdapter and it’s a global variable
$(“#jqxgrid”).jqxGrid({ source: source });

// after this point table is updated and validation check works fine but message won’t pop up

}

Thanks.

October 8, 2012 at 7:02 am Validation message pop-up #9031

mrkozanoglu

Member

I crated a very simple version of the problem, please try this: when the page loads enter a number higher than 100 and see the pop up message then press the button and change the grid data then try entering the number again and you won’t see the pop up.

<html>
<head>
<title>Grid Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqxcore.js"></script>
<script type="text/javascript" src="jqxdata.js"></script>
<script type="text/javascript" src="jqxbuttons.js"></script>
<script type="text/javascript" src="jqxscrollbar.js"></script>
<script type="text/javascript" src="jqxgrid.js"></script>
<script type="text/javascript" src="jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="jqxdropdownlist.js"></script>
<script type="text/javascript" src="jqxlistbox.js"></script>
<script type="text/javascript" src="jqxgrid.edit.js"></script>
<script src="jquery.alerts.js" type="text/javascript"></script>
<link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="styles/jqx.energyblue.css" type="text/css" />
<script type="text/javascript">
var source;
var array1 = [[1,2,3,4],[1,2,3,4],[1,2,3,4]];
var validationFunc =  function (cell, value) {
	var result = true;
	try {
		value = parseInt(value);
	} catch (E) {
		result =  {result: false, message: "Please enter a number between 0 and 100." };
	}
	
    if (value < 0 || value > 100) { 
    	result = {result: false, message: "Please enter a number between 0 and 100."};
    };
    return result;
};
        $(document).ready(function () {
            
            source =
            {
                localdata: array1,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (array1) { },
            });
            
            
            $("#jqxgrid").jqxGrid(
            {
                width: 360,
                source: dataAdapter,
                editable: true,
                selectionmode : 'singlecell',
                columns: [	       		           	
        		           	{ text: "0", datafield: 0, width: 90, cellsalign: 'right', cellsformat: 'n', hideable: false, validation: validationFunc },
        		           	{ text: "1", datafield: 1, width: 90, cellsalign: 'right', cellsformat: 'n', hideable: false, validation: validationFunc },
        		           	{ text: "2", datafield: 2, width: 90,  cellsalign: 'right', cellsformat: 'n', hideable: true, validation: validationFunc },
        		           	{ text: "3", datafield: 3, width: 90,  cellsalign: 'right', cellsformat: 'n', hideable: true, validation: validationFunc },  ]
            });
        
        $("#button").unbind('click').click(function() {
        	
        	array1 = [[9,8,7,6],[9,8,7,6],[9,8,7,6]];
        	        	
        	source.localdata = array1;
	        $("#jqxgrid").jqxGrid({ source: source });
        	
        });
  });
</script>
</head>
<body>
	<input type="button" class="button" value="Button" id="button"  />
	<div id='jqxWidget'>
    	    <div id="jqxgrid"></div>
	</div>
</body>
</html>

October 8, 2012 at 11:29 am Validation message pop-up #9042

Peter Stoev

Keymaster

We confirm the reported issue and will fix it for the next version – jQWidgets 2.5.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 9, 2012 at 8:27 am Validation message pop-up #9093

mrkozanoglu

Member

Well, we debugged the source jqxgrid.edit.js file and created a solution. I think message pops up but the calculated position is not true so we can’t see it. Here is our solution:

At line 1117:

      _showvalidationpopup : function(o, d, p) {
			var j = this.editcell.editor;
							if (!j) {
						return
							}
							
						this.validationpopup = null;     // we added these two lines 
							this.validationpopuparrow = null;

October 9, 2012 at 8:58 am Validation message pop-up #9098

Peter Stoev

Keymaster

Ok, thanks for the update! However, please review our EULA which you accepted when you downloaded the product. Any changes in the code are in violation with the license agreement.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 18, 2013 at 7:59 pm Validation message pop-up #13876

sarah.tx

Member

Hi Peter,

I’m running into the same problem. I tested mrkozanoglu’s sample code with the latest version of jqWidgets, but the problem is still there. The validation popup doesn’t show after the data source is refreshed. I know the release notes said it’s fixed in 2.5. Is there a different way to update the data source so that this problem can be avoided? Any ideas?

Thanks for your help!

January 18, 2013 at 9:12 pm Validation message pop-up #13887

Peter Stoev

Keymaster

Hi sarah.tx,

Here’s a working sample using the latest version:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = '';
            // 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: '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: 680,
                source: dataAdapter,
                editable: true,
                theme: theme,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80 },
                  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 80 },
                  { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195 },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
                  { text: 'Quantity', datafield: 'quantity', width: 70, 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', 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);
            });
            $("#button").click(function () {
                $("#jqxgrid").jqxGrid('updatebounddata');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
        <div style="margin-top: 30px;">
            <div id="cellbegineditevent"></div>
            <div style="margin-top: 10px;" id="cellendeditevent"></div>
       </div>
       <input type="button" id="button" value="button" />
    </div>
</body>
</html>

The validation popup shows after calling the ‘updatebounddata’ method, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.