jQuery UI Widgets Forums Grid Capture name column (datafield)

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Capture name column (datafield) #70016

    nostromo
    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

    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/

    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;
    };

    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/

    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!!!

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

You must be logged in to reply to this topic.