jQWidgets Forums

Tagged: Cell, cell edit, cellbeginedit, edit, grid, jqxgrid, setcellvalue

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

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

Author

Issue with setcellvalue Posts

December 18, 2013 at 9:58 am Issue with setcellvalue #46686

ssp

Participant

Hi,

On editing a cell or just clicking on any cell of the grid, I want to update another particular cell in the same row to zero.
Issue: I am not able to update the another cell using setcellvalue!
plz suggest whether is this possible??

var gridName = "#"+location+"Grid";
    	
    	var editedIndex;	
			var value;
			
  		$(gridName).jqxGrid({
  			width: gridWidth,
  			autoheight : true,
 			source : dataAdapter,
 			theme : 'theme',
 			editable : true,
 			rowsheight:21,
 			showstatusbar : true,
 			showfiltercolumnbackground: true,
 			showfilterrow: true,
            filterable: true,
            showaggregates : true,
            columnsresize:true, 
 			selectionmode : 'multiplecellsadvanced',
 			columns :gridColumns  				
 		});    
  	 
  
  		$("#"+location+"Grid").bind('cellendedit', function (event) {
  			

$("#"+location+"Grid").jqxGrid('setcellvalue', rowIndex, 'strSurplusOrDeficit', 0);  			

  			});

Thanks & Regards,
Sandhya

December 18, 2013 at 10:22 am Issue with setcellvalue #46689

Dimitar

Participant

Hello Sandhya,

In your example, rowIndex is undefined, that is why setcellvalue does not work. Our suggestion is to use the column cellbeginedit callback function, as in the following example, based on the demo Default Functionality:

<!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.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/jqxcheckbox.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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var url = "../sampledata/products.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }

            // sets the "Quantity per Unit" cell on the same row to 0
            var updateToZero = function (row, datafield, columntype) {
                $("#jqxgrid").jqxGrid('setcellvalue', row, "QuantityPerUnit", 0);
            };

            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250, cellbeginedit: updateToZero },
                  { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                  { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100, cellbeginedit: updateToZero },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100, cellbeginedit: updateToZero },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued', cellbeginedit: updateToZero }
                ],
                columngroups: [
                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

December 18, 2013 at 1:48 pm Issue with setcellvalue #46712

ssp

Participant

Hi Dimitar,

Sorry I had missed copying rowIndex lines in the above post,
‘setcellvalue’ doesn’t work for me even then,

$("#"+location+"Grid").bind('cellendedit', function (event) {
  var args = event.args;
  			var columnDataField = args.datafield;  			
  			var rowIndex = args.rowindex;			

$("#"+location+"Grid").jqxGrid('setcellvalue', rowIndex, 'strSurplusOrDeficit', 0);  			

  			});

And in the demo default functionality link you have mentioned above, I cant find the updating of the “Quantity per Unit” cell on the same row to 0 on editing “Product Name” cell value??

Thanks & Regards,
Sandhya

December 18, 2013 at 1:58 pm Issue with setcellvalue #46713

Dimitar

Participant

Hi Sandhya,

This functionality is found in the example code we provided you, not in the Default Functionality demo. Please try it out.

Best Regards,
Dimitar

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

December 19, 2013 at 11:17 am Issue with setcellvalue #46770

ssp

Participant

Hi Dimitar,

I am not able to set the cell value to zero on cellbeginevent using the example code you have provided above.

Is it not possible to call setcellvalue inside cellbeginevent event like below?

$("#"+location+"Grid").bind('cellendedit', function (event) {
  var args = event.args;
  			var columnDataField = args.datafield;  			
  			var rowIndex = args.rowindex;			

<strong>$("#"+location+"Grid").jqxGrid('setcellvalue', rowIndex, 'strSurplusOrDeficit', 0);</strong>  			

  			});

Thanks & Regards,
Sandhya

December 19, 2013 at 1:15 pm Issue with setcellvalue #46773

Dimitar

Participant

Hi Sandhya,

The code we provided you works fine on our side. Do you experience any issues with it? Please make sure you are using the latest version of jQWidgets (3.0.4).

Your approach also works, but changes the value to 0 after the cell has been edited. Here is an example:

<!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.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/jqxcheckbox.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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var url = "../sampledata/products.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                    { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
                    { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                    { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
                    { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                    { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ],
                columngroups: [
                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                ]
            });

            $("#jqxgrid").bind('cellendedit', function (event) {
                var args = event.args;
                var columnDataField = args.datafield;
                var rowIndex = args.rowindex;
                if (columnDataField != "QuantityPerUnit") {
                    $("#jqxgrid").jqxGrid('setcellvalue', rowIndex, 'QuantityPerUnit', 0);
                };
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

The issue on your side may come from the use of the location variable in your grid’s id.

Best Regards,
Dimitar

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.