jQWidgets Forums

Tagged: datagrid, gridview, javascript datagrid, jqxgrid

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

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

Author

Issue with setcellvalue method Posts

August 25, 2012 at 12:13 pm Issue with setcellvalue method #7130

DollyB

Member

Hi,

I am doing integer validation on editing a cell.
Issue: When I try to enter a non integer in the cell, a popup is shown asking to enter a proper integer value. On clicking on OK of popup the edited cell should be highlighted or the new value is ignored(cell should display its old value.) In order to acheive this, I am using setcellvalue method. When I prited the args values, everything look fine but an error message is shown in the browser like, ‘this.editcell is null or not an object.’

Please suggest what went wrong and my code looks like,

$("#jqxgridDR").bind('cellvaluechanged', function (event) {

var attrProp = [];

attrProp = reqJsonAttrTemplate [event.args.datafield];

				if(attrProp["Integer"] == "true"){

if(!(/^[0-9]+$/.test(event.args.value))){

						alert("Please enter a valid number.");

$(“#jqxgridDR”).jqxGrid(‘setcellvalue’, event.args.rowindex, event.args.datafield, event.args.oldvalue);

‘#jqxgridDR’).jqxGrid(‘render’);

});

Thankx
DollyB

August 25, 2012 at 3:21 pm Issue with setcellvalue method #7134

Peter Stoev

Keymaster

Hi DollyB,

jqxGrid’s setcellvalue method raises cellvaluechanged and it is not correct to call this method in a cellvaluechanged handler because this may cause a circular calls of that method. Please consider another options of calling setcellvalue method.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 26, 2012 at 6:47 am Issue with setcellvalue method #7145

DollyB

Member

Hi Peter,

Yes. thats true.
I kept the same code in cellendedit handler. I am getting this.editcell is null or not an object error in the browser. Could you tell me why I am getting this message?
If I remove the line, $(‘#jqxgridDR’).jqxGrid(‘render’); the error message disappear but the old value is not placed on clicking on ok of the alert in both the cases.

Could you give me an example of such scenario if I am doing something wrong?

var attrProp = [];
				attrProp = reqJsonAttrTemplate [event.args.datafield];
				if(attrProp["Integer"] == "true"){
					if(!(/^[0-9]+$/.test(event.args.value))){
						alert("Please enter a valid number.");
						alert('event.args.oldvalue:'+event.args.oldvalue);
						$("#jqxgridDR").jqxGrid('setcellvalue', event.args.rowindex, event.args.datafield, event.args.oldvalue);
						$('#jqxgridDR').jqxGrid('render');	
					}													 
				}

August 26, 2012 at 7:13 am Issue with setcellvalue method #7147

Peter Stoev

Keymaster

Hi DollyB,

You shouldn’t call ‘setcellvalue’ in a cellvaluechanged event handler. The cellvaluechanged event is raised in the ‘setcellvalue’ method and because of that you shouldn’t call ‘setcellvalue’ inside the event handler. Here’s a sample which calls the setcellvalue method and updates the Grid’s data after the call. Note that I didn’t make an additional call of the ‘render’ method.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.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.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/jquery.global.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) {
                    // synchronize with the server - send update command   
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                editable: true,
                theme: theme,
                selectionmode: 'singlecell',
                columns: [
                  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
                  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 },
                  { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 177 },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
                  { text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 90, cellsalign: 'right', cellsformat: 'yyyy-MM-dd',
                      validation: function (cell, value) {
                          var year = value.getFullYear();
                          if (year >= 2013) {
                              return { result: false, message: "Ship Date should be before 1/1/2013" };
                          }
                          return true;
                      }
                  },
                  { 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;
                      },
                      initeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
                      }
                  },
                  { text: 'Price', datafield: 'price', width: 65, 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;
                      },
                      initeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ digits: 3 });
                      }
                  }
                ]
            });
            $("#jqxgrid").jqxGrid('setcellvalue', 0, 'firstname', "New Name");
        });
    </script>
</head>
<body class='default'>
   <div id="jqxgrid"></div>
      
</body>
</html>

For validation of data, there’s a validation function which you can associate to your column. The above code shows how to implement validation, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 26, 2012 at 8:11 am Issue with setcellvalue method #7151

DollyB

Member

Hi Peter,

Thankx.
In the example mentioned above, how to get the month and day value like getting Year using getFullYear()? Are there any methods to get month and day value also?

-DollyB

August 29, 2012 at 1:57 pm Issue with setcellvalue method #7257

DollyB

Member

Hi Peter,

You are doing the validation on loading the data into Grid.
But I want to do integer validation on cell edit and show an alert message if value is not an integer and revert back the new value.
How do I acheive this?

I tried like,

$("#jqxgridDR").bind('cellendedit', function (event) {
        	var attrProp = [];
			attrProp = reqJsonAttrTemplate [event.args.datafield];
			if(event.args.datafield != "revision"){
			if(attrProp["Integer"] == "true"){
				if(!(/^[0-9]+$/.test(event.args.value))){
					alert(attrProp["Caption"]+" must be Integer !");						
					$("#jqxgridDR").jqxGrid('setcellvalue', event.args.rowindex, event.args.datafield, event.args.oldvalue);
					$('#jqxgridDR').jqxGrid('render');	
				}													 
			}
			}
        		
}

But it throws ‘this.editcell is null or not an object’. It is happening because of the last two lines shown above. Please suggest me the solution.

I have mailed the entire samle code to support mail id. Please have a look and suggest me the solution if you have any.

Thankx
DollyB.

August 29, 2012 at 2:11 pm Issue with setcellvalue method #7258

Peter Stoev

Keymaster

Hi DollyB,

I am not doing validation on loading the data into the Grid. The validation is done on cell end edit. The validation callback is called before the new value is saved. If the validation’s result is false, the Grid will display a validation popup(alert) message. The validation function should return true, if the new value is valid and false, if not.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.