Capture name column (datafield) - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Cell, cellendedit, column, datafield, edit, edited, grid, jqxgrid, updaterow

This topic contains 4 replies, has 2 voices, and was last updated by nostromo 9 years, 9 months ago.

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

Author

Capture name column (datafield) Posts

April 17, 2015 at 2:38 pm Capture name column (datafield) #70016

Participant

hello, as I can capture the name of the column that was published in the event updaterow??

example, if I have 3 columns (id , name, age ), and change the value of age in a record, capture the name “age” in updaterow

var source =
{
datatype: “json”,
updaterow: function (rowid, rowdata, commit) {
alert(“name column”);
commit(true);
},

thanks

translated with google

April 20, 2015 at 6:52 am Capture name column (datafield) #70042

Dimitar

Participant

Hello nostromo,

Here is how to get the edited column’s datafield in the updaterow callback:

<!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.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/beverages.txt";

            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'name', type: 'string' },
                    { name: 'type', type: 'string' },
                    { name: 'calories', type: 'int' },
                    { name: 'totalfat', type: 'string' },
                    { name: 'protein', type: 'string' }
                ],
                id: 'id',
                url: url,
                updaterow: function (rowid, newdata, commit) {
                    alert(editedColumn);
                    commit(true);
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            var editedColumn;

            var cellendedit = function (row, datafield, columntype, oldvalue, newvalue) {
                editedColumn = datafield;
            };

            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                columnsresize: true,
                editable: true,
                columns: [
                  { text: 'Name', datafield: 'name', width: 250, cellendedit: cellendedit },
                  { text: 'Beverage Type', datafield: 'type', width: 250, cellendedit: cellendedit },
                  { text: 'Calories', datafield: 'calories', width: 180, cellendedit: cellendedit },
                  { text: 'Total Fat', datafield: 'totalfat', width: 120, cellendedit: cellendedit },
                  { text: 'Protein', datafield: 'protein', minwidth: 120, cellendedit: cellendedit }
                ]
            });
        });
    </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/

April 20, 2015 at 6:52 pm Capture name column (datafield) #70085

nostromo

Participant

friend, the alert(editedColumn) returns me “undefined”, and add the code and explain.

updaterow: function (rowid, newdata, commit) {
alert(editedColumn);
commit(true);
}

var editedColumn;
var cellendedit = function (row, datafield, columntype, oldvalue, newvalue) {
editedColumn = datafield;
};

April 21, 2015 at 5:18 am Capture name column (datafield) #70088

Dimitar

Participant

Hi nostromo,

Did you test our example? It works perfectly fine on our side. Make sure you have set each of your columns’ cellendedit property (callback function), too. Here is the description of cellendedit from the jqxGrid API Documentation:

cellendedit – sets a custom function which is called when a cell leaves the edit mode. The Grid passes 5 parameters to it – row index, column data field, column type, old cell value, new cell value. The function can be used for canceling the changes of a specific Grid cell. To cancel the changes, the function should return false.

{ text: ‘Product’, datafield: ‘productname’,
cellendedit: function (row, datafield, columntype, oldvalue, newvalue) {
if (newvalue == “My Value”)
return false;
}
}

Best Regards,
Dimitar

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

April 21, 2015 at 11:45 am Capture name column (datafield) #70115

nostromo

Participant

sorry, I had missed

cellendedit: cellendedit

columns: [
{ text: ‘Name’, datafield: ‘name’, width: 250, cellendedit: cellendedit },
{ text: ‘Beverage Type’, datafield: ‘type’, width: 250, cellendedit: cellendedit },
{ text: ‘Calories’, datafield: ‘calories’, width: 180, cellendedit: cellendedit },
{ text: ‘Total Fat’, datafield: ‘totalfat’, width: 120, cellendedit: cellendedit },
{ text: ‘Protein’, datafield: ‘protein’, minwidth: 120, cellendedit: cellendedit }
]

works great!!!

Author

Posts

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

You must be logged in to reply to this topic.